Arrow function syntax

Learn the => shorthand for functions and how it differs from a classic function.

An arrow function is a shorter way to write a function expression. The => arrow separates parameters from the body.

Classic form:

const square = function(n) {
  return n * n;
};

Arrow form:

const square = (n) => n * n;

In a single-line body you do not write return; the value comes back automatically. This is called implicit return.

Arrows as callbacks

Arrow functions shine as callbacks. They pair well with map and filter from the basics.

Classic:

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

With an arrow:

const doubled = nums.map((n) => n * 2);

The arrow shrinks the callback to one line and improves readability.

Convert the square function below into an arrow function. It should return the square of n with a single-line (implicit return) body.

Show example solution

const square = (n) => n * n;

Complete the blank with the arrow

const double = (n) ____ n * 2;

Show answer

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