🏹 Arrow Functions and Lexical this

What Are Arrow Functions?

Arrow functions, added in ES6 (2015), give you a compact way to write a function and — crucially — a different rule for the this keyword. A traditional function decides its this at call time, based on how it is invoked. An arrow function has no this of its own at all; it borrows the this from the surrounding code where it was written. That one difference is the whole reason arrow functions exist.

💡 An analogy: A traditional function is like a contractor who asks "whose job site am I on today?" every time they clock in — the answer depends on who called them. An arrow function is like a tattoo: it permanently carries the context of the place it was created, and nothing you do later can change it.

Syntax, Form by Form

The arrow syntax scales from extremely terse to fully explicit. Start by comparing it directly to a function expression:

// Traditional function expression
const traditional = function (a, b) {
  return a + b;
};

// Arrow function with a block body
const arrow = (a, b) => {
  return a + b;
};

// Arrow function with an implicit return (no braces, no return keyword)
const concise = (a, b) => a + b;

console.log(traditional(2, 3)); // 5
console.log(arrow(2, 3));       // 5
console.log(concise(2, 3));     // 5

Every variation is just a combination of two choices: parentheses around the parameters, and braces around the body.

// 1. No parameters — empty parentheses are required
const sayHello = () => 'Hello, world!';

// 2. One parameter — parentheses are optional (many teams still keep them)
const double = x => x * 2;

// 3. Multiple parameters — parentheses required
const sum = (a, b) => a + b;

// 4. Block body — braces require an explicit return
const area = (w, h) => {
  const result = w * h;
  return result;
};

// 5. Returning an object literal — wrap it in parentheses,
//    otherwise the braces look like a function body
const makePoint = (x, y) => ({ x, y });

// 6. Destructured parameters work as expected
const greet = ({ title, name }) => `Hello, ${title} ${name}!`;
console.log(greet({ title: 'Dr.', name: 'Smith' })); // "Hello, Dr. Smith!"

The Problem with this

Before arrow functions can look clever, you need to feel the pain they solve. In a traditional function, this is decided by how the function is called, not where it is written. That leads to the single most common beginner bug in JavaScript: a callback that silently loses its object.

const user = {
  name: 'Alice',
  greetLater() {
    // Here `this` is `user`, because greetLater was called as user.greetLater()
    console.log('outer this.name =', this.name); // "Alice"

    setTimeout(function () {
      // But this INNER function is called by the timer, not by `user`.
      // In a browser, `this` is now the global object (or undefined in strict mode).
      console.log('inner this.name =', this.name); // undefined
    }, 100);
  }
};

user.greetLater();

Before ES6, developers worked around this with two well-known tricks. You will still meet both in older code, so recognize them:

const user = {
  name: 'Alice',

  // Workaround 1 — capture `this` in a variable (often named self or that)
  withSelf() {
    const self = this;
    setTimeout(function () {
      console.log(self.name); // "Alice"
    }, 100);
  },

  // Workaround 2 — bind the inner function's `this` explicitly
  withBind() {
    setTimeout(function () {
      console.log(this.name); // "Alice"
    }.bind(this), 100);
  }
};

Lexical this to the Rescue

An arrow function skips the whole call-time this mechanism. It simply uses the this of the scope it was written in. Rewrite the timer example and the bug disappears — no self, no .bind():

const user = {
  name: 'Alice',
  greetLater() {
    setTimeout(() => {
      // The arrow has no `this` of its own, so it uses greetLater's `this`,
      // which is `user`.
      console.log(this.name); // "Alice"
    }, 100);
  }
};

user.greetLater();

When to Use — and When Not To

Great fits for arrow functions

• Callbacks that need the enclosing this (event handlers set up inside a class or object)
• Array methods — map, filter, reduce, forEach
• Short, single-expression helpers
• Promise chains and async handlers
• Class fields that need a bound handler

// Callback that keeps the class's `this`
class Counter {
  count = 0;
  constructor(button) {
    button.addEventListener('click', () => {
      this.count++;                 // `this` is the Counter instance
      console.log(`Count: ${this.count}`);
    });
  }
}

// Array pipeline
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(n => n * 2);        // [2, 4, 6, 8, 10]
const evens = numbers.filter(n => n % 2 === 0); // [2, 4]

Poor fits — reach for a regular function instead

// 1. Object methods that use `this` — AVOID arrows
const person = {
  name: 'Alice',
  bad: () => console.log(`Hi, I'm ${this.name}`),      // this is NOT person → undefined
  good() { console.log(`Hi, I'm ${this.name}`); }      // this IS person → "Alice"
};
person.bad();  // "Hi, I'm undefined"
person.good(); // "Hi, I'm Alice"

// 2. Constructors — arrows cannot be called with `new`
const Person = (name) => { this.name = name; };
// new Person('Bob'); // TypeError: Person is not a constructor

// 3. When you need the `arguments` object — arrows don't have one.
//    Use a rest parameter instead:
const sumAll = (...args) => args.reduce((total, n) => total + n, 0);
console.log(sumAll(1, 2, 3)); // 6

Real-World Patterns

Data transformation pipelines

Arrow functions make chained array methods read almost like a sentence:

const users = [
  { id: 1, name: 'John',  age: 28, role: 'developer' },
  { id: 2, name: 'Jane',  age: 32, role: 'designer' },
  { id: 3, name: 'Bob',   age: 45, role: 'manager' },
  { id: 4, name: 'Alice', age: 24, role: 'developer' }
];

// Names of developers under 30
const youngDevs = users
  .filter(u => u.role === 'developer')
  .filter(u => u.age < 30)
  .map(u => u.name);

console.log(youngDevs); // ['John', 'Alice']

// Group users by role with reduce
const byRole = users.reduce((groups, u) => {
  (groups[u.role] ??= []).push(u.name);
  return groups;
}, {});

console.log(byRole);
// { developer: ['John', 'Alice'], designer: ['Jane'], manager: ['Bob'] }

Promises and async/await

// Modern async/await style — the arrow keeps the code flat and readable
const fetchUserPosts = async (userId) => {
  const userRes = await fetch(`https://api.example.com/users/${userId}`);
  if (!userRes.ok) throw new Error(`HTTP ${userRes.status}`);
  const user = await userRes.json();

  const postsRes = await fetch(`https://api.example.com/users/${user.id}/posts`);
  if (!postsRes.ok) throw new Error(`HTTP ${postsRes.status}`);
  const posts = await postsRes.json();

  return { user, posts };
};

Currying and composition

Because an arrow can return another arrow, chained single-argument functions become elegant:

// Currying: one argument at a time
const add = a => b => c => a + b + c;
console.log(add(1)(2)(3)); // 6

const addTen = add(10);    // partial application
console.log(addTen(5)(5)); // 20

// Compose: apply functions right-to-left
const compose = (...fns) => x => fns.reduceRight((acc, fn) => fn(acc), x);

const double = x => x * 2;
const increment = x => x + 1;
const square = x => x * x;

const transform = compose(square, increment, double);
console.log(transform(5)); // square(increment(double(5))) = ((5*2)+1)^2 = 121

Hands-on Exercise

class Ticker {
  constructor() {
    this.seconds = 0;
    setInterval(function () {
      this.seconds++;
      console.log(`${this.seconds}s elapsed`);
    }, 1000);
  }
}

new Ticker(); // logs "NaNs elapsed", "NaNs elapsed", ...

const orders = [
  { id: 1, status: 'shipped',   total: 42 },
  { id: 2, status: 'pending',   total: 99 },
  { id: 3, status: 'shipped',   total: 15 },
  { id: 4, status: 'cancelled', total: 30 }
];
// Target result: 57

// Part A — swap the traditional function for an arrow so `this` stays the instance
class Ticker {
  constructor() {
    this.seconds = 0;
    setInterval(() => {
      this.seconds++;
      console.log(`${this.seconds}s elapsed`);
    }, 1000);
  }
}

// Part B
const shippedTotal = orders
  .filter(o => o.status === 'shipped')
  .reduce((sum, o) => sum + o.total, 0);

console.log(shippedTotal); // 57

Quiz

Summary & What's Next

📚 Further Reading

• MDN — Arrow function expressions
• MDN — the this keyword
• javascript.info — Arrow functions revisited

🚀 What's Next?

You saw destructured parameters sneak into a few arrow examples above. Next we'll slow down and give destructuring the full treatment — pulling values out of objects and arrays cleanly, with defaults, renaming, and nesting.