JavaScript forEach

JavaScript forEach method is used over arrays to iterate and apply a function to each element.

This method was introduced starting with ECMAScript 5 (ES5), along with other features.

The syntax is as follows: array.forEach(function(currentValue, index, array), thisValue).

Where the function is required, therefore mandatory, while thisValue is optional and represents the value to pass to the function as this value. If not specified, undefined is passed as thisValue .

The function specified as an argument to the forEach method has 3 parameters:

currentValue which is required and represents the current value of the array element;
index is optional and represents the index of the current element of the array;
array, optional, represents the array to which the element under consideration belongs.

JavaScript forEach – Difference with the for loop

We loop an array with the for loop and then the foreach.

So, suppose we have an array of numbers and print them using a for loop:



var numbers = [13, 25, 8, 9, 12, 9];

for (let i = 0; i < numbers.length; i++){
  console.log(numbers[i])
}

Now we print the same result using forEach this time.



var numbers = [13, 25, 8, 9, 12, 9];

numbers.forEach(function(number){
  console.log(number);
});
}

We passed a function with the currentValue which in our case represents the element contained in the array.

What if I also want to print the index with the forEach loop?

Just add the second parameter of the function or the index, which represents the index of each element.



var numbers = [13, 25, 8, 9, 12, 9];

numbers.forEach(function(number, index){
  console.log('index ' + index + ' number: ' + number);
});

Finally, we use the last parameter which is the array itself to print it out.



var numbers = [13, 25, 8, 9, 12, 9];

numeri.forEach(function(array){
  console.log(array);
});

JavaScript forEach – first example

Let’s now take some examples of the application of the forEach loop.

Banner pubblicitario

Having as input an array of numbers, we add separately the elements of even place from those of odd place, using the forEach loop.

So let’s create an array of numbers and check the odd or even position using the modulo operator.



let sumEven = 0, sumOdd = 0;
let numbers = [13, 25, 8, 9, 12, 9];

numbers.forEach(sumEvenOdd);

function sumEvenOdd(element, index) {
  if (index % 2 == 0){
     sumEven += element;
  }
  else {
     sumOdd += element;
  }
  document.getElementById("sum-even").innerHTML = sumEven;
  document.getElementById("sum-odd").innerHTML = sumOdd;
}

Upon entering the calculation made in the html page.

So for example in two different divs we insert the different calculated sums:

<div id="sum-even"></div>
<div id="sum-odd"></div>

The same algorithm could also be solved with a for loop. Let’s implement it to see the difference in use of the two loops.



let sumEven = 0, sumOdd = 0;
let numbers = [13, 25, 8, 9, 12, 9];

for(let i = 0; i < numbers.length; i++){
  if (index % 2 == 0){
    sumEven += numbers[i];
  }
 else {
    sumOdd += numbers[i];
 }
 document.getElementById("sum-even").innerHTML = sumEven;
 document.getElementById("sum-odd").innerHTML = sumOdd;
}

JavaScript forEach – second example

In this second example we will also use the third parameter, which is the array to which the element refers.

Given an array of numbers, for each element add a random number.

So let’s create a function where we add a random number to each element.

Here is the complete algorithm:



let numbers = [65, 44, 12, 4];

numbers.forEach(addRandom)

function addRandom(element, index, array) {
  array[index] = element + Math.floor(Math.random()*9);
}

document.getElementById("random").innerHTML = numbers;

In the html we then write the div where to display the result: