ZetCode

JS foreach

last modified October 18, 2023

In this article we show how to create foreach loops in JavaScript.

C language popularized the classic for loop, where a counter is used to create a loop.

The foreach loop iterates over a collection of data one by one. In each loop, a temporary variable contains the current element.

JavaScript has forEach method and the for/of form to loop over iterables.

JS forEach method

In the first example, we use the forEach method to go over the elements of an array.

foreach.js
let words = ['pen', 'pencil', 'falcon', 'rock', 'sky', 'earth'];

words.forEach(e => console.log(e));

console.log("----------------------");

words.forEach((word, idx) => {
    console.log(`${word} has index ${idx}`);
});

The example loops over elements of an array of words.

words.forEach(e => console.log(e));

In the first loop, we print all elements.

words.forEach((word, idx) => {
    console.log(`${word} has index ${idx}`);
});

In the second loop, we print element with its index.

$ node foreach.js
pen
pencil
falcon
rock
sky
earth
----------------------
pen has index 0
pencil has index 1
falcon has index 2
rock has index 3
sky has index 4
earth has index 5

In the next example we use the forEach method to loop over a map.

foreach2.js
let stones = new Map([[1, "garnet"], [2, "topaz"],
    [3, "opal"], [4, "amethyst"]]);

stones.forEach((k, v) => {

    console.log(`${k}: ${v}`);
});

We have a small map of stones. In each loop, the pair is destructured into a key and a value.

$ node foreach2.js
garnet: 1
topaz: 2
opal: 3
amethyst: 4

JS for/of

The for/of statement iterates over a sequence of values from an iterable object.

for_of.js
let words = ['pen', 'pencil', 'falcon', 'rock', 'sky', 'earth'];

for (let word of words) {

    console.log(word);
}

In the example, we go over the array of words using for/of statement.


In the next example we go over a map.

for_of2.js
let stones = new Map([[1, "garnet"], [2, "topaz"],
    [3, "opal"], [4, "amethyst"]]);
  
for (let e of stones) {

    console.log(e);
}

console.log('------------------------');

for (let [k, v] of stones) {

    console.log(`${k}: ${v}`);
}

We have two for/of loops.

for (let e of stones) {

    console.log(e);
}

In the first loop, we go over elements.

for (let [k, v] of stones) {

    console.log(`${k}: ${v}`);
}

In the second loop, we destructure each element into key and value items.

$ node for_of2.js
[ 1, 'garnet' ]
[ 2, 'topaz' ]
[ 3, 'opal' ]
[ 4, 'amethyst' ]
------------------------
1: garnet
2: topaz
3: opal
4: amethyst

Source

JS forEach

In this article we have used foreach loops to go over elements of iterables in JavaScript. We have utilized the forEach method and the for/of statement.

Author

My name is Jan Bodnar and I am a passionate programmer with many years of programming experience. I have been writing programming articles since 2007. So far, I have written over 1400 articles and 8 e-books. I have over eight years of experience in teaching programming.

List all JavaScript tutorials.