In this article, I have explained forEach loop in javascript. This loop works only with Arrays, Maps and Sets.



First, an example for those who came here to take a glance at the syntax quickly.

['apple', 'banana', 'orange'].forEach((fruit) => { console.log(fruit); }); //apple //banana //orange

Syntax

array.forEach(function(currentElement, index, arrayInstance), thisValue)

Parameters

currentElement: Current array element.

index: Current iteration index.

arrayInstance: An instance of the actual array.

thisValue: Default value of ‘this’ in function scope.

Description of forEach loop in javascript

Javascript forEach() loop works with Arrays, Maps or Sets. An iteration always starts from index zero and moves towards higher index.

This loop accepts two parameters, a mandatory callback function and an optional ‘this’ value reference.

The callback function accepts 3 parameters. First one is currentElement ( from the above example). It represents the current array element at any point of the iteration and this is a mandatory parameter.

Example of currentElement parameter:

['apple', 'banana', 'orange'].forEach((fruit) => { console.log(fruit); }); //apple //banana //orange

The second parameter of the callback function is index (from the above example). It is an optional parameter which contains the index value of the current element.

Example of index parameter:

['apple', 'banana', 'orange'].forEach((fruit, index) => { console.log(index); }); //0 //1 //2

The third parameter arrayInstance (from the above example) is another optional parameter. It contains an instance of the set /map /array object, on which the forEach() loop is running.

Example of arrayInstance parameter:

['apple', 'banana', 'orange'].forEach((fruit, index, arr) => { console.log(arr); }); //["apple", "banana", "orange"]

forEach() loop takes a second optional parameter thisValue (from the above example). It provides an option to set a default value of ‘this’ object inside the callback function.

Example of thisValue with callback function:

var obj = {a:1, b:2, c:3}; Object.keys(obj).forEach(function(item){ console.log(this[item]); }, obj); //1 //2 //3

An exception occurs in case if the callback is an arrow function. Reason being, the arrow function body contains lexical ‘this’ reference. Which is ‘this’ reference from the closure that contains the forEach() function. Hence, no other outer parameter can override the value of ‘this’ inside an arrow function. See the below example.

Example of thisValue with arrow function:

var obj = {a:1, b:2, c:3}; Object.keys(obj).forEach((item)=>{ console.log(this[item]); }, obj); //undefined

Performance

In conclusion, forEach loop in Javascript is a very convenient feature. While speaking of performance, this loop is much slower than the usual for loop in javascript. Below are the steps that each loop performs in the background.

For loop

The index variable is set to an initial value that is provided during declaration. On every iteration, checks whether or not to exit the loop Runs the code written inside the loop body. After every iteration increases the index value. Back to step 2

forEach() loop

Declares the callback function On every iteration, checks if there is a next element to process. Calls the callback function for the next element. A new execution context is created for each iteration. Run the callback function body. Return to step 2

The modern browsers optimize forEach() function calls and in certain cases this function runs even faster.

One drawback of forEach() loop is that, there is no way to stop or break a forEach() loop. Hence, the below code is useless:

arrayOfItems.forEach(function() { // do something return false });

For these kind of requirements, we can use .map() function.