Arrow functions have been the most compact way to write functions in JavaScript since 2015 – and the most common in modern code. This chapter covers the syntax variants and one key behavioral difference from regular functions.

Basic syntax

// Function expression:
const doubleA = function (value) {
  return value * 2;
};

// Arrow function, equivalent:
const doubleB = (value) => {
  return value * 2;
};

console.log(doubleA(21), doubleB(21)); // 42 42

Shorthand forms

Arrow functions allow several shortcuts, depending on the number of parameters and body length:

// A single parameter: parentheses optional
const double = value => value * 2;

// Exactly ONE expression as the body: braces and 'return' are dropped (implicit return)
const isIncome = amount => amount > 0;

// No parameters: empty parentheses REQUIRED
const currentYear = () => 2026;

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

The key difference: arrow functions have no own this

Regular functions get a NEW this on every call, depending on HOW they were called (details in chapter 17). Arrow functions, on the other hand, have NO own this – they inherit this from their SURROUNDING context ("lexical this"). The following example demonstrates the difference directly on the budget app:

const account = {
  balance: 1500,
  transactions: [100, -50, 200],

  // Regular function as a method: 'this' correctly points to 'account'
  showBalanceRegular: function () {
    console.log(this.balance); // 1500 - 'this' is 'account'
  },

  // Arrow function as a method: 'this' does NOT point to 'account'!
  showBalanceArrow: () => {
    console.log(this.balance); // undefined - 'this' comes from the SURROUNDING context, not 'account'
  },
};

account.showBalanceRegular(); // 1500
account.showBalanceArrow();   // undefined

Arrow functions as callbacks: where they shine

const amounts = [2400, -850, -120, -60];

const expenses = amounts.filter(amount => amount < 0);
console.log(expenses); // [-850, -120, -60]

More on filter() and other array methods typically paired with arrow functions in chapter 11.

Another limitation: no own arguments object

Regular functions have access to an automatic arguments object (all passed arguments, regardless of declared parameters). Arrow functions do NOT have this – the modern replacement is rest parameters (...args) from chapter 8 anyway, which work in BOTH function forms.