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 thecurrentElement
in 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
Counter
object. - Next, define an array of three numbers.
- Then, declare a variable
sum
and assign it a value of zero. - After that, call the
forEach()
method on thenumbers
array. In the callback function, add the element to thesum
variable and call theincrease()
method of thecounter
object. Notice that thecounter
object is referred to asthis
inside 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.