A function as an argument: forEach

Picture a conveyor belt in a factory. Boxes ride along the belt one after another, and a worker stands by it. A box reaches the worker, the worker does the job on it, and the belt brings the next one. The worker does not walk around the warehouse counting boxes: the conveyor takes care of the supply.

An array and its methods work the same way:

• the array is the belt with the elements;
• an array method is the conveyor that feeds the elements one by one;
• you bring the worker: a function the method calls for each element.

Until now, printing each element of an array took a loop with a counter, a condition and an index. The forEach method walks the elements itself and calls a function passed to it for each one:

const nums = [3, 5, 8];

function show(n) {
    console.log(n);
}

nums.forEach(show);
// 3
// 5
// 8

Let's go through the example line by line:

1. const nums = [3, 5, 8]; is an array of three numbers, our belt.
2. function show(n) describes the worker: it gets one number and prints it.
3. nums.forEach(show) puts the worker at the belt. The method calls show three times: with 3, with 5 and with 8.

The counter, the condition and the indices stay inside the method, so there is no loop boundary to get wrong.

A function is a value too

A function name without parentheses is the function itself, a value like a number or a string. It can be stored in a constant and passed to another function as an argument. Parentheses after the name mean a call: show(3) runs the function body right now.

On the conveyor you see the difference at once:

• show is the worker, who can be put at the belt;
• show(3) means the worker has already handled the number 3, and all you hold is the result of the work.

A function passed as an argument so that it is called later is called a callback. A function that takes another function is called a higher-order function. In the example, forEach is a higher-order function and show is a callback.

Interviewers often ask what a callback is. The answer fits in one sentence: a function passed as an argument so that someone else calls it.

A callback right in the call

A callback is often written right in the call, as an arrow function. Then it needs no name of its own:

const words = ["red", "green"];

words.forEach((word, i) => {
    console.log(i, word);
});
// 0 red
// 1 green

On each call forEach passes the callback three arguments:

1. the element itself, here word;
2. its index, here i;
3. the whole array, which is rarely needed.

That is why the program prints 0 red and then 1 green. If the index is not needed, one parameter is enough: a function ignores extra arguments.

The callback is called in order, from the first element to the last. The next line of the program runs only after the last call.

What forEach returns

forEach collects nothing. It calls the callback for an action, such as printing, and always returns undefined. The value the callback returns is lost:

const result = [1, 2, 3].forEach((n) => n * 2);

console.log(result); // undefined

The callback here returns 2, 4 and 6, but the conveyor puts these numbers nowhere. The worker stamps each box, and there is no crate by the belt for finished goods.

A callback can change a variable outside it. The call nums.forEach((n) => { total += n; }) adds each element to the variable total, declared with let before the call. That way a result does appear, but it has to be collected by hand.

forEach cannot be stopped

Here the conveyor analogy stops working. A real worker can press a button and stop the belt, but forEach has no such button.

Stopping forEach halfway is not possible: break and continue inside a callback give a SyntaxError, and the method always reaches the end of the array. When the walk must stop, write for…of.

Common mistake

The function is passed with parentheses:

function show(n) {
    console.log(n);
}

[1, 2].forEach(show()); // ✗

TypeError: undefined is not a function

The parentheses call show at once, before forEach, and with no argument, so the program first prints undefined. That call returns undefined, and forEach gets exactly this value instead of a function. Pass the name without parentheses: [1, 2].forEach(show).

Key points

• forEach walks the array itself and calls the function passed to it for each element.
• A function name without parentheses is the function itself, and parentheses call it; a method gets the name without parentheses.
• A callback is a function passed as an argument; a higher-order function takes such a function.
• forEach always returns undefined and goes to the end of the array.