The forEach() method calls a function and iterates over the elements of an array. The forEach() method can also be used on Maps and Sets.
JavaScript forEach
The syntax of the forEach() method is:
array.forEach(function(currentValue, index, arr))
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
forEach with Arrays
The forEach() method is used to iterate over an array. For example,
let students = ['John', 'Sara', 'Jack'];
// using forEach
students.forEach(myFunction);
function myFunction(item) {
console.log(item);
}
Output
John Sara Jack
In the above program, the forEach() method takes myFunction() function that displays each element of a students array.
Updating the Array Elements
As we have seen in the above example, the forEach() method is used to iterate over an array, it is quite simple to update the array elements. For example,
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"]
forEach with Arrow Function
You can use the arrow function with the forEach() method to write a program. For example,
// with arrow function and callback
const students = ['John', 'Sara', 'Jack'];
students.forEach(element => {
console.log(element);
});
Output
John Sara Jack
for loop to forEach()
Here is an example of how we 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);
for...of with Sets
You can iterate through the Set elements using the forEach() method. For example,
// 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
forEach with Maps
You can iterate through the Map elements using the forEach() method. For example,
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