Arrow Functions

Arrow Functions

What it is

Arrow functions provide a shorter syntax for writing functions and lexically bind the this value. Introduced in ES6 (2015), they’re ideal for callbacks and short functions.

Before this feature

Traditional function expressions were verbose and had issues with this:

// Verbose syntax
const numbers = [1, 2, 3];
const doubled = numbers.map(function(n) {
  return n * 2;
});

// 'this' binding issues
function Timer() {
  this.seconds = 0;

  // 'this' is lost in callback
  setInterval(function() {
    this.seconds++; // 'this' is undefined or window!
  }, 1000);

  // Workaround: save 'this'
  const self = this;
  setInterval(function() {
    self.seconds++;
  }, 1000);
}

After this feature

Arrow functions provide concise syntax and fix this binding:

// Concise syntax
const doubled = numbers.map(n => n * 2);

// Multiple parameters
const add = (a, b) => a + b;

// No parameters
const getRandom = () => Math.random();

// Block body (explicit return)
const greet = name => {
  const message = `Hello, ${name}!`;
  return message;
};

// Lexical 'this'
function Timer() {
  this.seconds = 0;

  // 'this' refers to Timer instance
  setInterval(() => {
    this.seconds++;
  }, 1000);
}

// Object literals (must wrap in parentheses)
const createUser = (name, age) => ({ name, age });

// Array methods
const users = [
  { name: "Alice", age: 25 },
  { name: "Bob", age: 30 }
];

const names = users.map(u => u.name);
const adults = users.filter(u => u.age >= 18);
const totalAge = users.reduce((sum, u) => sum + u.age, 0);

Why this is better

• Concise: Shorter syntax, especially for one-liners
• Lexical this: this from enclosing scope (no more self = this)
• Implicit return: Single expressions return automatically
• Readable: Great for functional programming patterns
• No binding: Can’t use call(), apply(), or bind() to change this

Key notes / edge cases

• Can’t be used as constructors (no new)
• No arguments object (use rest parameters instead)
• Can’t be used as methods if you need this to refer to object
• Must wrap object literals in parentheses
• Single parameter doesn’t need parentheses
• Always anonymous (can’t name them)

// Can't use as constructor
const Person = (name) => { this.name = name };
const alice = new Person("Alice"); // TypeError!

// No arguments object
const sum = () => {
  console.log(arguments); // ReferenceError!
};
// Use rest instead
const sum2 = (...args) => args.reduce((a, b) => a + b);

// Method definition caveat
const obj = {
  count: 10,
  // BAD - arrow function
  increment: () => {
    this.count++; // 'this' is NOT obj!
  },
  // GOOD - regular method
  decrement() {
    this.count--;
  }
};

// Wrap object literals
const makeUser = name => { name: name }; // ERROR! thinks it's a block
const makeUser2 = name => ({ name: name }); // Correct

Quick practice

1. Convert to arrow function: function double(x) { return x * 2; }

   Answer

   const double = x => x * 2;
   // or
   const double = (x) => x * 2;

2. Filter even numbers from [1, 2, 3, 4, 5, 6] using arrow function

   Answer

   const evens = [1, 2, 3, 4, 5, 6].filter(n => n % 2 === 0);

3. Why can’t arrow functions be used as constructors?

   Answer

   Arrow functions don't have their own `this` binding and can't be called with `new`. They inherit `this` from the enclosing scope.