JavaScript Array forEach: Executing a Function on Every Element

Created with Sketch.

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 the currentElement in the array.
  • array: the array that calls the forEach() 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 the numbers array. In the callback function, add the element to the sum variable and call the increase() method of the counter object. Notice that the counter object is referred to as this 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.

Leave a Reply

Your email address will not be published. Required fields are marked *