forEach

Learn side-effect loops with .forEach.

The forEach method

The forEach method calls a function for each element of an array and produces a side effect. Unlike map it does not return a new array; the result is undefined.

The syntax is array.forEach(fn). Here fn is the function called for each element. Typical uses are printing, saving to a file, or updating a counter. For transformations use map; forEach is only for side effects.

Example: ['apple','pear','banana'].forEach(f => console.log(f)) prints each fruit on its own line. Since forEach returns undefined, assigning it to a variable makes no sense.

forEach versus map

It is easy to confuse forEach and map. Both let you walk each element; the difference is the return value. map returns an array and is for transformations. forEach returns undefined and is for side effects.

If you do not use the array map returns, forEach is the better fit. Conversely, assigning forEach's result or chaining it is wrong, because the result is undefined.

Example: [1,2,3].forEach(n => console.log(n)) prints each number. [1,2,3].map(n => n * 2) returns [2,4,6]. Which method to pick depends on whether you will use the result.

Exercise Print the scores

Define an array of scores [85, 72, 90]. Use forEach to print each score as "Score: X" (X is the score) with console.log. You can use a template literal: `Score: ${n}`.

Show example solution

const scores = [85, 72, 90];
scores.forEach(n => console.log('Score: ' + n));

Test yourself

Match the forEach parts

array.forEach(fn)

The call
fn

Function called per element
side effect

What forEach produces
undefined

What forEach returns
What does forEach return?
- true
- A new array
- undefined
- Number of elements
Show answer

undefined — forEach returns undefined, not an array.

Print the list

const fruits = ['elma','armut','muz'];
fruits.forEach(f => console.____(f));

Show answer

const fruits = ['elma','armut','muz'];
fruits.forEach(f => console.log(f));

Next lesson: Summary - Array methods

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies