Arrow Functions

Arrow functions offer a more compact syntax compared to traditional function expressions. They are often called “fat arrow” functions because they use the => token to separate the parameters from the function body.

An arrow function expression is a compact alternative to a traditional function expression. Here is a basic example of an arrow function:

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

5

Notice that the function keyword is entirely gone. We simply define the parameters in parentheses, followed by the arrow =>, and then the block body.

Implicit Returns

If an arrow function has a single expression as its body, the return keyword and curly braces can be omitted. In a concise body, only an expression is specified, which becomes the implicit return value.

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

Step through the visualizer above to see how the expression a + b evaluates and returns directly, without needing a block body.

Visualizing the Difference

Below is a diagram showing the structural differences between explicit block bodies and implicit returns.

Single Parameters

If an arrow function has only one parameter, the parentheses around the parameter can be omitted. Parentheses are optional when there’s only one parameter name, which makes the syntax even cleaner.

const double = n => n * 2;
console.log(double(4));

8

Edge Cases: Returning Objects

To implicitly return an object literal, it must be wrapped in parentheses. If you just use curly braces, the JavaScript engine interprets them as a block body, not an object literal!

See if you can spot the common mistake. Returning an object literal requires wrapping the braces in parentheses like => ({}) so the engine doesn’t treat the braces as a block body.

const makeUser = name => { user: name };
console.log(makeUser('Alice'));

undefined

Because the curly braces were treated as a block body, the function executed the label statement user: name and then implicitly returned undefined because it lacked a return statement.

To fix this, wrap the object literal in parentheses:

const makeUser = name => ({ user: name });
console.log(makeUser('Alice').user);

Alice

The this Binding

Arrow functions do not have their own bindings to this or super, and should not be used as methods. Instead, they inherit this from the enclosing scope.

const obj = {
  id: 42,
  counter: () => {
    return typeof this;
  }
};
console.log(obj.counter());

undefined

In the example above, the arrow function inside the object inherits this from the global scope (which is undefined in ES modules or strict mode). If it were a traditional function expression, this would be bound to obj.

Because they lack their own this, arrow functions cannot be used as constructors and will throw a TypeError if invoked with new.