Why should we use a forEach loop
To use a for loop, we need to define the number of times the loop will run, unlike forEach loop, which does not need any counter. When we use a forEach loop, we essentially say “do this to every element of this collection” whereas, in the loop, we explicitly state the number of times the loop will run. This can cause errors and make the code extremely difficult to read as array indexing starts at 0.
Note: We will use the browser console to demonstrate examples performed in this post. To open up the browser console:
- Use the F12 key in Chrome and other chromium-based browsers.
- Use CTRL + SHIFT + K keyboard shortcut keys for Mozilla.
- Use Option + ⌘ + C keyboard shortcut keys in Safari (if developer menu does not appear, then open Preferences by pressing ⌘ +, and in Advanced tab check “Show Develop menu in menu bar”).
Syntax of forEach loop in JavaScript
Replace the array with the actual name of your array.
Parameters:
- value: Required; Stores the value of the current element.
- Index: Optional; Stores the index of the current element of the array.
- arr: Optional; Holds the array object that contains the current element.
- thisValue: Optional; This parameter is used as this value of the function. undefined is used as the default this value if this parameter is not given.
undefined is the return value of forEach method.
How to use a forEach loop in JavaScrip
Now we will use the forEach loop to output each element of an array named numbers on the console as an example:
numbers.forEach(function (value)
{
console.log(value) ;
})
In the example given above, first, we declared an array named numbers and assigned it six elements. Then we used the forEach loop to loop through each item present in the array. We then declared and defined a function inside the forEach loop that prints the element’s value in the current iteration of the loop onto the console.
We can also declare and define the function outside of the loop and just call the function from the body of the loop:
numbers.forEach(pr);
function pr(value)
{
console.log(value);
}
The forEach loop is not executed for the empty elements of the array. If we add another element to the array as mentioned above by using the array.length property and run the program again, the output will remain the same:
numbers.length = 7;
console.log("The Length of the array is " + numbers.length);
numbers.forEach(pr);
function pr(value)
{
console.log(value);
}
Now we will try to perform different actions on the elements of the array. First, let’s try to write a function that prints the square of each element of the array on the console:
numbers.forEach(pr);
function pr(value)
{
let square = value * value;
console.log(square);
}
Now let’s try to output the sum of all the elements of the array to the console:
let sum = 0;
numbers.forEach(pr);
function pr(value)
{
sum = sum + value;
}
console.log(sum);
Conclusion
The forEach loop is a control flow statement that is used to loop through items in a collection. It proves useful when we need to perform different actions on each element of the loop individually.
In this post, we took up the forEach loop. We learned what it is and how to use it. Moreover, we also compared it with the more common for a loop.
