Arrow Functions

By the end of this lesson, you will be able to write JavaScript arrow functions for concise callbacks and understand how they differ from traditional function expressions.

What it is

An arrow function is a compact way to write a function in JavaScript. It uses the => token instead of the function keyword. The basic mental model is: parameters on the left, function body on the right. If the body is a single expression, the value is returned automatically. If the body is a block, you must use return.

Related terms: function expression, callback, lexical this, implicit return, and concise body. Arrow functions also do not have their own arguments object.

Why it matters

• It reduces boilerplate for short functions, especially in array methods like map, filter, and forEach.
• It captures this from the surrounding scope, which is useful in callbacks inside a class method or outer function.
• It makes one-line transformations easier to read, such as const double = (x) => x * 2;.
• It encourages pure, small helper functions when used carefully.

Syntax or steps

The smallest useful pattern is a single parameter with an expression body:

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

With no parameters, use empty parentheses:

const greet = () => "Hello";

With multiple parameters, parentheses are required:

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

With a block body, braces and an explicit return are required:

const classify = (n) => {
  if (n > 0) return "positive";
  return "non-positive";
};

To return an object literal directly, wrap it in parentheses:

const makeUser = (name) => ({ name });

Example

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

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

console.log(doubled); // [2, 4, 6, 8]
console.log(evens);   // [2, 4]
console.log(total);   // 10

Part by part:

• numbers.map((x) => x * 2) creates a new array by applying the arrow function to each item.
• numbers.filter((x) => x % 2 === 0) keeps only values where the expression is true.
• numbers.reduce((sum, x) => sum + x, 0) combines values into one total, starting at 0.
• Each arrow function uses an implicit return because the body is a single expression.

Common mistakes

• Forgetting return in a block body. const add = (a, b) => { a + b; }; returns undefined. Fix: use return a + b; or remove braces.
• Returning an object literal without parentheses. const user = () => { name: "Ada" }; is parsed as a block, not an object. Fix: const user = () => ({ name: "Ada" });.
• Using arrow functions as object methods when you need dynamic this. Arrow functions do not bind their own this. Fix: use a normal function for methods that rely on this.
• Trying to use an arrow function with new. Arrow functions cannot be constructors. Fix: use a traditional function or class.

When to use it

Compare arrow functions with traditional function expressions:

Practice

Guided exercise: write an arrow function named square that returns the square of a number, then use it with map on [1, 2, 3].

const square = (x) => x * x;
const result = [1, 2, 3].map(square);
console.log(result); // [1, 4, 9]

Challenge: write an arrow function that takes a string and returns its length, then use it to find the longest word in ["cat", "elephant", "dog"].

Solution hint: use const length = (word) => word.length; and words.reduce((a, b) => length(a) >= length(b) ? a : b).

Quick check

Question: Why does const makePoint = () => { x: 1 }; not return an object?

Answer: The braces are treated as a function body block, not an object literal. Wrap the object in parentheses: const makePoint = () => ({ x: 1 });.

Summary

Arrow functions are concise JavaScript functions that are especially useful for callbacks and small transformations. Their key difference is lexical this and implicit return for expression bodies. Use them for short, non-method functions, and choose traditional functions when you need dynamic this, constructors, or prototypes.