Free lesson · JavaScript Basic to Advance

Arrow Functions

Easy5 min read

A Shorter Way to Write Functions

Arrow functions are a compact syntax for writing functions, added in ES6 (2015). They've become the default function syntax in modern JavaScript code — you'll see them everywhere in real codebases.

// Function expression (old way)
const double = function(n) {
  return n * 2;
};

// Arrow function (modern way)
const doubleArrow = (n) => {
  return n * 2;
};

// Arrow function (even shorter)
const doubleShort = n => n * 2;

console.log(double(5));
console.log(doubleArrow(5));
console.log(doubleShort(5));

All three produce identical results. The arrow versions are shorter. The "even shorter" version uses two additional rules: when there's exactly one parameter, you can omit the parentheses; when the body is a single expression, you can omit the curly braces and the return keyword.

This compact syntax is what makes arrow functions so popular for callbacks and array methods. Code that would be verbose with traditional function syntax becomes one-liners. But there's more to arrow functions than just shorter syntax — they have one significant behavioral difference around the this keyword that we'll cover in Module 8. For now, focus on the syntax.

The Syntax Variations

Arrow functions have several syntax variations depending on the number of parameters and the body shape. Memorize the variations — you'll need to read all of them in real code.

No parameters: empty parentheses required.

const sayHi = () => "Hi";
console.log(sayHi());

One parameter: parentheses optional.

const square = n => n * n;
const squareWithParens = (n) => n * n;
console.log(square(4));
console.log(squareWithParens(4));

Multiple parameters: parentheses required.

const add = (a, b) => a + b;
console.log(add(2, 3));

Single-expression body: braces and return are implicit.

const triple = n => n * 3;       // returns n * 3 automatically
const greet = name => `Hi, ${name}`;
console.log(triple(7));
console.log(greet("Olena"));

Multi-line body: braces required, return explicit.

const describe = (name, age) => {
  const status = age >= 18 ? "adult" : "minor";
  return `${name} is an ${status}`;
};

console.log(describe("Olena", 35));

Returning an object literal: wrap it in parentheses.

// ❌ This doesn't work — JavaScript thinks {} is the function body
// const makeUser = name => { name: name, role: "user" };

// ✅ Wrap the object in parentheses to disambiguate
const makeUser = name => ({ name: name, role: "user" });

console.log(makeUser("Olena"));

The last one is a gotcha that catches everyone the first time. Without the parentheses, JavaScript reads { as the start of a function body, sees name: name as a label statement, and gets confused. Wrapping the object in () tells JavaScript "this is an expression, not a body."

Why Arrow Functions Won

Arrow functions are the default in modern JavaScript for three reasons:

1. Compactness. When you're passing functions to array methods or as callbacks, the difference between traditional syntax and arrow syntax is significant:

const numbers = [1, 2, 3, 4, 5];

// Traditional function expression
const doubled1 = numbers.map(function(n) {
  return n * 2;
});

// Arrow function
const doubled2 = numbers.map(n => n * 2);

console.log(doubled1);
console.log(doubled2);

The arrow version is shorter and reads more naturally — "map each n to n times 2." For callbacks, that compactness matters.

2. Predictable this behavior. Traditional functions have complicated rules around the this keyword. Arrow functions don't — they inherit this from the surrounding scope. We cover this in Module 8, but for now, know that arrow functions avoid a whole category of bugs that traditional functions can have.

3. Consistency with modern JavaScript style. ES6 and later style guides settled on arrow functions for most cases. Reading modern codebases means being fluent with the syntax.

When NOT to Use Arrow Functions

Arrow functions aren't always the right choice. Four cases where traditional functions are still preferred:

Methods on objects. If you're defining a method that uses this to refer to the object it's attached to, traditional functions work; arrow functions don't.

const user = {
  name: "Olena",

  // Traditional method — 'this' refers to user
  greetTraditional: function() {
    return `Hi, I'm ${this.name}`;
  },

  // Arrow method — 'this' does NOT refer to user
  greetArrow: () => {
    return `Hi, I'm ${this.name}`;
  }
};

console.log(user.greetTraditional());   // "Hi, I'm Olena"
console.log(user.greetArrow());          // "Hi, I'm undefined" (or similar)

For object methods, use traditional function syntax or the modern method shorthand (covered in Module 7). Don't use arrow functions for methods that need this.

Constructors. Arrow functions can't be used with new. We cover this in Module 8 along with this.

Functions that benefit from being hoisted. Arrow functions are always written as expressions, so they're never hoisted. If you specifically want hoisting, use a function declaration.

Functions that need access to the arguments object. Traditional functions have a special arguments object holding all passed arguments. Arrow functions don't. (Modern code rarely uses arguments — rest parameters, covered in Topic 5.4, are preferred — but it's worth knowing.)

Choosing Arrow vs Traditional

graph TD
    A[Need to define a function] --> B{Is this a method on an object<br/>that needs 'this'?}
    B -->|Yes| C[Use traditional function syntax]
    B -->|No| D{Is this a constructor<br/>called with 'new'?}
    D -->|Yes| C
    D -->|No| E{Is this a top-level function<br/>I want hoisted?}
    E -->|Yes| F[Use function declaration]
    E -->|No| G[Use arrow function]

    style C fill:#3b82f6,color:#fff
    style F fill:#7c3aed,color:#fff
    style G fill:#10b981,color:#fff

This diagram shows how to choose between arrow functions and traditional function syntax. If you're defining a method on an object that needs the this keyword to refer to the object, use traditional function syntax. If it's a constructor called with new, also use traditional. If it's a top-level utility function you want to be hoisted, use a function declaration. For everything else — callbacks, array methods, helper functions, most assigned-to-const functions — use an arrow function.

The rule of thumb: arrow functions for callbacks and assigned-to-const functions; traditional functions for methods and constructors.

Multi-Parameter Arrow Variations

Arrow functions support all the same parameter features as traditional functions. We cover these in detail in Topic 5.4, but here are previews:

// Default parameters
const greet = (name = "stranger") => `Hello, ${name}`;
console.log(greet());
console.log(greet("Olena"));

// Rest parameters
const sum = (...numbers) => numbers.reduce((total, n) => total + n, 0);
console.log(sum(1, 2, 3, 4, 5));

// Destructured parameters
const describe = ({ name, age }) => `${name} is ${age} years old`;
console.log(describe({ name: "Olena", age: 35 }));

All three work with arrow functions exactly the way they work with traditional functions. The next Topic covers each in depth.

Common Pitfalls

Warning: The arrow function traps.

Forgetting the parentheses around returned objects. n => { name: n } is a function with a labeled statement, not a function returning an object. Use n => ({ name: n }).

Using arrow functions as object methods that need this. Inside an arrow function, this doesn't refer to the object — it inherits from the surrounding scope. For methods that need this, use traditional function syntax or the method shorthand.

Misreading the no-parameter form. () => "Hi" is a function that takes no parameters and returns "Hi". A common typo is writing just => "Hi" without the parentheses, which is a syntax error.

Why This Matters in Interviews

Interview: Interviewers expect fluency with arrow function syntax. Writing traditional function syntax for every callback signals stale JavaScript knowledge. Using arrow functions appropriately — for callbacks, for array methods, for utility functions — signals modern fluency.

The deeper question that comes up at senior levels: "What's the difference between arrow functions and traditional functions?" The expected answer covers three points — this binding (inherited vs context-dependent), no arguments object, can't be used as constructors. Module 8 covers this in detail.

Topic 5.8 — Interview Lens: Functions and Higher-Order Patterns — covers the deeper interview-prep treatment.

Try It

Exercise: Convert each traditional function into the most compact arrow function syntax possible:

// 1
function isEven(n) {
  return n % 2 === 0;
}

// 2
function add(a, b) {
  return a + b;
}

// 3
function greet() {
  return "Hello, world!";
}

// 4
function describe(name, age) {
  const status = age >= 18 ? "adult" : "minor";
  return name + " is an " + status;
}

// 5
function makeUser(name) {
  return {
    name: name,
    created: Date.now()
  };
}

The fifth one is the gotcha — make sure to handle the object literal correctly. Once you can confidently convert each one to its shortest equivalent arrow function, you're fluent with arrow function syntax.

Back to JavaScript Basic to Advance