Saturday, August 30, 2025
HomeLanguagesJavascriptES6 | Array forEach() Method

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 callback 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.
Program 1:  

javascript




<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>


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:  

javascript




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


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.  

javascript




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


Output: 

Arpan
Abhishek
neveropen
RELATED ARTICLES

Most Popular

Dominic
32249 POSTS0 COMMENTS
Milvus
80 POSTS0 COMMENTS
Nango Kala
6617 POSTS0 COMMENTS
Nicole Veronica
11792 POSTS0 COMMENTS
Nokonwaba Nkukhwana
11838 POSTS0 COMMENTS
Shaida Kate Naidoo
6731 POSTS0 COMMENTS
Ted Musemwa
7012 POSTS0 COMMENTS
Thapelo Manthata
6689 POSTS0 COMMENTS
Umr Jansen
6701 POSTS0 COMMENTS