JavaScript Array forEach: Executing a Function on Every Element
Summary: in this tutorial, you will learn how to use the JavaScript Array forEach() method to exeucte a function on every element in an array.
Introduction to JavaScript Array forEach() method
Typically, when you want to execute a function on every element of an array, you use a for loop statement.
For example, the following code shows every element of an array to console:
let ranks = ['A', 'B', 'C'];
for (let i = 0; i < ranks.length; i++) {
console.log(ranks[i]);
}Code language: JavaScript (javascript)
Output:
A
B
C
JavaScript Array provides the forEach() method that allows you to run a function on every element.
The following code uses the forEach() method that is equivalent to the code above:
let ranks = ['A', 'B', 'C'];ranks.forEach(function (e) {
console.log(e);
});
Code language: JavaScript (javascript)
Output:
A
B
C
The forEach() method iterates over elements in an array and executes a predefined function once per element.
The following illustrates the syntax of the forEach() method.
Array.forEach(callback [, thisArg]);Code language: CSS (css)
The forEach() method takes two arguments:
1) callback
The callback function that the forEach() method uses to execute on every element.
The callback accepts the following arguments:
currentElement: is the current array element being processed.index: the index of thecurrentElementin the array.array: the array that calls theforEach()method.
The index and array are optional.
2) thisArg
The thisArg is a value to use as this when executing the callback.
Note that the forEach() function returns undefined therefore it is not chainable like other iterative methods: filter(), map(), some(), every(), and sort().
One limitation of the forEach() method in comparison with the for loop is that you cannot use the break or continue statement to control the loop.
To terminate the loop in the forEach() method, you must throw an exception inside the callback function.
More JavaScript Array forEach() method example
Let’s take a look at an example of the forEach() method that uses a contextObject.
The following illustrates Counter constructor function:
function Counter() {
this.count = 0;
let self = this;
return {
increase: function () {
self.count++;
},
current: function () {
return self.count;
},
reset: function () {
self.count = 0;
}
}
}Code language: PHP (php)
This example shows how to pass the counter object to the forEach() method.
var counter = new Counter();
var numbers = [1, 2, 3];
var sum = 0;
numbers.forEach(function (e) {
sum += e;
this.increase();
}, counter);console.log(sum); // 6
console.log(counter.current()); // 3
Code language: JavaScript (javascript)
How it works.
- First, create a new
Counterobject. - Next, define an array of three numbers.
- Then, declare a variable
sumand assign it a value of zero. - After that, call the
forEach()method on thenumbersarray. In the callback function, add the element to thesumvariable and call theincrease()method of thecounterobject. Notice that thecounterobject is referred to asthisinside the callback function. - Finally, log the value of the sum and current value of the counter in the web console.
In this tutorial, you have learned how to use the JavaScript Array forEach() method to execute a callback on every element of an array.