Arrow Functions

Arrow Syntax

Basic Syntax

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

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

One Parameter

// Parentheses optional for single parameter
const square = x => x * x;
const square2 = (x) => x * x; // Also valid

No Parameters

// Parentheses required
const sayHello = () => 'Hello!';

Implicit Return

// Single expression: implicit return
const double = x => x * 2;

// Multi-line: explicit return needed
const process = (x) => {
  const result = x * 2;
  return result;
};

Returning Objects

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

// Without parentheses (wrong)
const createUser2 = (name, age) => { name, age }; // undefined

Arrow Functions with Arrays

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

const doubled = numbers.map(n => n * 2);
const sum = numbers.reduce((a, b) => a + b, 0);
const evens = numbers.filter(n => n % 2 === 0);

Lexical this

The Problem with Regular Functions

const person = {
  name: 'John',
  greet: function() {
    setTimeout(function() {
      console.log(`Hello, ${this.name}`); // undefined!
    }, 1000);
  }
};

person.greet(); // "Hello, undefined"

Arrow Functions Fix This

const person = {
  name: 'John',
  greet: function() {
    setTimeout(() => {
      console.log(`Hello, ${this.name}`); // "John"
    }, 1000);
  }
};

person.greet(); // "Hello, John"

How Lexical This Works

// Arrow function inherits 'this' from enclosing scope
const person = {
  name: 'John',
  greet: () => {
    // 'this' is NOT person (it's the outer scope)
    console.log(this.name); // undefined
  }
};

// Use regular method for object context
const person2 = {
  name: 'John',
  greet() {
    console.log(this.name); // "John"
  }
};

Class Example

class Timer {
  constructor() {
    this.seconds = 0;
  }
  
  start() {
    // Arrow function inherits 'this' from class
    this.interval = setInterval(() => {
      this.seconds++;
      console.log(this.seconds);
    }, 1000);
  }
  
  stop() {
    clearInterval(this.interval);
  }
}

Callback Example

// Before ES6
const button = document.querySelector('button');
button.addEventListener('click', function() {
  this.classList.add('active');
});

// With arrow function (wrong for event handlers)
button.addEventListener('click', () => {
  this.classList.add('active'); // 'this' is not the button!
});

// Arrow functions in array methods (correct)
const numbers = [1, 2, 3];
numbers.map(n => n * 2); // Good

When to Use

Use Arrow Functions For

// Array methods
const doubled = numbers.map(n => n * 2);
const evens = numbers.filter(n => n % 2 === 0);

// Callbacks with lexical this
setTimeout(() => console.log('done'), 1000);

// Promise chains
fetch(url)
  .then(res => res.json())
  .then(data => console.log(data));

// Functional programming
const compose = (f, g) => x => f(g(x));

Don't Use Arrow Functions For

// Object methods (when you need 'this')
const obj = {
  name: 'John',
  greet() { // Good
    console.log(this.name);
  },
  greet: () => { // Bad
    console.log(this.name); // undefined
  }
};

// Event handlers (when you need the element)
button.addEventListener('click', function() {
  this.classList.add('active'); // Good
});

// Constructors
class User {
  constructor(name) {
    this.name = name;
  }
}

// Prototypes
function Person(name) {
  this.name = name;
}
Person.prototype.greet = function() {
  return `Hi, ${this.name}`;
};

Summary

Use Arrow	Don't Use Arrow
Array methods	Object methods
Callbacks	Event handlers
Promises	Constructors
Functional programming	Prototype methods

Arrow Functions as Arguments

// Good pattern
function fetchData(callback) {
  const data = getData();
  callback(data);
}

fetchData(data => console.log(data));