Difference between forEach and for loop in Javascript
This article describes the difference between a forEach and for loop in detail. The basic differences between the two are given below.
For Loop: The JavaScript for loop is used to iterate through the array or the elements for a specified number of times. If a certain amount of iteration is known, it should be used.
Syntax:
for (initialization; condition; increment) { // code to be executed }
Example:
Javascript
<script> for (let i = 1; i <= 5; i++) { document.write(i + "<br/>" ); } </script> |
Output:
1 2 3 4 5
forEach loop: The forEach() method is also used to loop through arrays, but it uses a function differently than the classic “for loop”. It passes a callback function for each element of an array together with the below parameters:
- Current Value (required): The value of the current array element
- Index (optional): The index number of the current element
- Array (optional): The array object the current element belongs to
We need a callback function to loop through an array by using the forEach method.
Syntax:
numbers = [1, 2, 3, 4, 5]; numbers.forEach(function(number) { // code to be executed });
For every single element of the array, the function will be executed. The callback should have at least one parameter which represents the elements of an array.
Example 1: This example shows the forEach method with a callback function.
the
Output:
1 2 3 4 5
Example 2: This example shows the use of the index parameter in the forEach method.
Javascript
numbers = [1, 2, 3, 4, 5]; numbers.forEach((number, index) => { console.log( 'Index: ' + index + ', Value: ' + number); }); |
Output:
Index: 0, Value 1 Index: 1, Value 2 Index: 2, Value 3 Index: 3, Value 4 Index: 4, Value 5
For Loop | forEach Loop |
It is one of the original ways of iterating over an array. | It is a newer way with lesser code to iterate over an array. |
It is faster in performance. | It is slower than the traditional loop in performance. |
The break statement can be used to come out from the loop. | The break statement cannot be used because of the callback function. |
The parameters are the iterator, counter, and incrementor. | The parameters are the iterator, index of item, and array to iterate. |
It works with the await keyword. | The await keyword cannot be used due to the callback function. It may lead to incorrect output. |