JavaScript array forEach() method is used to iterate through an array. The forEach() method accepts a callback function and an optional thisArg. The callback function is called for each element of the array. Inside the callback function, you get access to the current processing array element. It is interesting to note that even though you can update the current processing element of the array but that change is not reflected in the original array because the forEach() method does not return any new array. So, you use the forEach() method for looping through array elements.
Note: The forEach() method is one of the array iteration methods and does not modify the original array.
The forEach() method has the following syntax:
array.forEach(callback, thisArg);
The callback function passed to the forEach() method has the following form:
function callback(currentElement, index, originalArray){
//code
}
It is recommended that you use the arrow function as a callback function.
(currentElement, index, originalArray) => {
//code
}
The callback function accepts three parameters:
currentElement parameter points to the current element that is being processed.index parameter is the index value of the current element. It is optional.originalArray parameter is the array on which you call the forEach() method. It is optional.The thisArg parameter is optional. When you use this value inside the callback function, then this will point to the value passed to the thisArg parameter.
let numbers = [1, 2, 3, 4, 5];
numbers.forEach((currentElement) => {
console.log(currentElement);
});
Output
1 2 3 4 5
In this example, you can see that the forEach() method iterates through each element of the array.
let numbers = [1, 2, 3, 4, 5];
numbers.forEach((currentElement) => {
currentElement = currentElement + 10;
});
console.log(numbers);
Output
[1, 2, 3, 4, 5]
In this example, you can see that 10 is added to each element of an array, but that updated value is not reflected in the original array. Also, you cannot return any value from the callback function.
Prior to the forEach() method, for loop is used to iterate through array elements.
let numbers = [1, 2, 3, 4, 5];
for(let i=0; i<numbers.length; i++){
console.log(numbers[i]);
}
Unlike other iteration methods such as map(), filter(), reduce(), and others, the forEach() method returns undefined. Because of this, you cannot chain forEach() method with other iteration methods.
You cannot terminate the forEach() method in between because you cannot use break or continue statement inside the forEach() method.
In the first example, you will learn how to sum array elements using the forEach() method.
let numbers = [1, 2, 3, 4, 5];
let sum = 0;
numbers.forEach((currentElement) => {
sum = sum + currentElement;
});
console.log(`Sum of array elements is ${sum}.`);
Output
Sum of array elements is 15.
In the second example, you will see how to access the index value of an array element inside the callback function of the forEach() method.
let fruits = ["Apple", "Mango", "Banana", "Pineapple"];
fruits.forEach((currentElement, index) => {
console.log(index + ": " + currentElement);
});
Output
0: Apple 1: Mango 2: Banana 3: Pineapple
The last example shows how to use this value inside the forEach() method. Suppose you want to sum all the array elements that are between the values entered by the user. In this situation, thisArg parameter is useful. You know that this keyword inside the callback function points to the value passed to the thisArg parameter. So, you will pass the range object as the value to thisArg parameter.
let range = {
lower: 100,
upper: 150
};
let numbers = [120, 52, 77, 133, 105];
let sum = 0;
numbers.forEach(function (currentElement){
if(currentElement >= this.lower && currentElement <= this.upper){
sum = sum + currentElement;
}
}, range);
console.log(`Sum is ${sum}`);
Output
Sum is 358
If you want to use this keyword inside the callback function, then don't use the arrow function as a callback function; otherwise, your code won't work.
Let's rewrite the same code using the arrow function.
let range = {
lower: 100,
upper: 150
};
let numbers = [120, 52, 77, 133, 105];
let sum = 0;
numbers.forEach((currentElement) => {
if(currentElement >= this.lower && currentElement <= this.upper){
sum = sum + currentElement;
}
}, range);
console.log(`Sum is ${sum}`);
Output
Sum is 0
