JavaScript Array forEach – Loop Through an Array

JavaScript Array.forEach(); Through this tutorial, i am going to show you how to use JavaScript array forEach() with the help of definition, syntax, parameters and examples.

JavaScript array.forEach()

The JavaScript forEach() method calls a function and iterates over the elements of an array.

Note that:- The js forEach() method can also be used on Maps and Sets.

Syntax of JavaScript array.forEach()

The following represents the syntax of the forEach() method; as shown below:

array.forEach(function(currentValue, index, arr), thisValue)

Here,

function(currentValue, index, arr) – a function to be run for each element of an array
currentValue – the value of an array
index (optional) – the index of the current element
arr (optional) – the array of the current elements.

Example 1 – JavaScript forEach with Arrays

Here, i will take first example using the forEach() method; To iterate forEach loop over an array; as shown below:

let students = ['Mack', 'Lee', 'John'];

// using forEach
students.forEach(myFunction);

function myFunction(item) {

    console.log(item);
}

Output

Mack
Lee
John

Example 2 – Updating the Array Elements

Next example for update the array elements using the javaScript forEach() array method; as shown below:

let students = ['John', 'Sara', 'Jack'];

// using forEach
students.forEach(myFunction);

function myFunction(item, index, arr) {

    // adding strings to the array elements
    arr[index] = 'Hello ' + item;
}

console.log(students);

Output

["Hello John", "Hello Sara", "Hello Jack"]

Example 3 – forEach with Arrow Function

Let’s see third example using arrow function with the forEach() method to write a program; as shown below:

// with arrow function and callback

const students = ['John', 'Sara', 'Jack'];

students.forEach(element => {
  console.log(element);
});

Output

John
Sara
Jack

Example 4 – for loop to forEach()

Here is an example of how you can write a program with for loop and with forEach().

Using for loop

const arrayItems = ['item1', 'item2', 'item3'];
const copyItems = [];

// using for loop
for (let i = 0; i < arrayItems.length; i++) {
  copyItems.push(arrayItems[i]);
}

console.log(copyItems);

Output

["item1", "item2", "item3"]

Using forEach()

const arrayItems = ['item1', 'item2', 'item3'];
const copyItems = [];

// using forEach
arrayItems.forEach(function(item){
  copyItems.push(item);
})

console.log(copyItems);

Example 5 – for…of with Sets

To iterate through the Set elements using the forEach() method. As shown below:

// define Set
const set = new Set([1, 2, 3]);

// looping through Set
set.forEach(myFunction);

function myFunction(item) {
    console.log(item);
}

Output

1
2
3

Example 6 – forEach with Maps

To iterate through the Map elements using the forEach() method; as shown below:

let map = new Map();

// inserting elements
map.set('name', 'Jack');
map.set('age', '27');

// looping through Map
map.forEach (myFunction);

function myFunction(value, key) {
    
    console.log(key + '- ' + value);
}

Output

name- Jack
age- 27

Conclusion

In this tutorial, you have learned how to use the JavaScript Array forEach() method and to call a callback on each element of a javascript array.

JavaScript Array forEach – Loop Through an Array