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. |
.png)
