Arrow Functions

Arrow functions, added in ES6, are a shorter way to write function expressions — and unlike every other function syntax in JavaScript, they don't get their own this.

Basic syntax

const add = (a, b) => a + b;

That's equivalent to:

const add = function (a, b) {
  return a + b;
};

A single expression body implicitly returns its value — no return keyword, no curly braces needed. With multiple statements, you need braces and an explicit return:

const add = (a, b) => {
  const sum = a + b;
  return sum;
};

Parameter shorthand

A single parameter doesn't need parentheses; zero parameters need empty ones:

const double = n => n * 2;
const greet = () => "Hello!";

Returning an object literal

Because { } after => is read as the start of a function body, returning an object literal directly needs parentheses to disambiguate:

const makeUser = name => ({ name, active: true });

Without the parentheses, { name, active: true } would be parsed as a function body containing a labeled statement, not an object — a common mistake worth remembering.

Arrow functions and this

This is the real behavioral difference, not just shorter syntax: arrow functions don't have their own this. They capture this from the surrounding (lexical) scope at the point they're defined, rather than from how they're called.

const timer = {
  seconds: 0,
  start() {
    setInterval(() => {
      this.seconds++; // `this` is the `timer` object, inherited from start()
      console.log(this.seconds);
    }, 1000);
  },
};

If that callback were a regular function instead, this inside it would be undefined (in strict mode) rather than timer, because a regular function's this depends on how it was called — and setInterval calls it with no receiver. This makes arrow functions the natural choice for callbacks that need access to the surrounding object, which is exactly where this used to be a common source of bugs before arrow functions existed.

The next lesson goes deeper into this — how it's determined for regular functions, and the tools (call, apply, bind) for controlling it directly. First, though, a related concept that also depends on lexical scope: closures.