ES6 | Array forEach() Method

When working with arrays, it’s widespread to iterate through its elements and manipulate them. Traditionally this can be done using for, while or do-while loops. The forEach will call the function for each element in the array.

Syntax:

array.forEach( callback, thisObject )

Parameter: This method accept only two parameter mentioned above and described below:



  • callback: This allow the function to test the each and every element in the array.
  • thisObject: This will be called when the calllback function is executed.

Return: It returns the newly created array.

Without forEach() Loop: The first line declares and initialize a number array called array_1 with values [2, 3, 4, 5, 6]. To double every element of this array a for loop is used which runs from zero (because the index of an array starts from zero) to one less than the length of the array. Now on the third line, each element is extracted from the array and is multiplied by 2, hence doubling the values.

Programe 1:

filter_none

edit
close

play_arrow

link
brightness_4
code

<script>
var array_1 = [2, 3, 4, 5, 6];
for(var i = 0; i < array_1.length; i++) {
    array_1[i] *= 2;
}
document.write(array_1);
</script>

chevron_right


Output:

4, 6, 8, 10, 12

With forEach() Loop: In ES6 a more easy to understand and use method is introduced for Arrays which is forEach(). Let’s see how it works for the same above situation.
Program 2:

filter_none

edit
close

play_arrow

link
brightness_4
code

<script>
var array_1 = [2, 3, 4, 5, 6];
array_1.forEach(function(number, i) {
    array_1[i] *= 2;
});
  
document.write(array_1);
</script>

chevron_right


Output:

4, 6, 8, 10, 12

Same as previous, the first line declares and initialize a numbers array called array_1 with values [2, 3, 4, 5, 6]. Then on array_1 forEach method is called which iterates over the array and takes a callback function as an argument. Now the callback function accepts three arguments,

  • currentValue – Which is a required argument, this corresponds to the value of the current element.
  • index – It is an optional argument, this is the corresponding index value of the current element.
  • array – It is also an optional argument, this is the original array, here array_1.

So, we make use of the second argument that is index and follow the exact same algorithm as before to double the value.

Program 3: Here we just use the currentValue argument using which we printout each of the values from names array to the console.

filter_none

edit
close

play_arrow

link
brightness_4
code

<script>
var names = ['Arpan', 'Abhishek', 'GeeksforGeeks'];
  
names.forEach(function(name){
    document.write(name + "<br/>");
});
</script>

chevron_right


Output:

Arpan
Abhishek
GeeksforGeeks


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.