What are the differences between for...of and forEach() loops in JavaScript?
Rashid D
In JavaScript,for...of andforEach() are two different ways to iterate over arrays and iterable objects. While both provide similar functionality, they have some differences in terms of syntax and behavior. Here's a detailed comparison:
1. Syntax:
The syntax offor...of loop andforEach() method differ:
-for...of loop:
1
2
3
4
for (const item of iterable) {
// Code to execute for each item
}
-forEach() method:
1
2
3
4
array.forEach(function(item) {
// Code to execute for each item
});
2. Applicability:
-for...of loop:
Thefor...of loop can iterate over any object that is iterable, including arrays, strings, sets, maps, and other custom objects that implement the iterable protocol. It provides a convenient way to iterate over values directly.
-forEach() method:
TheforEach() method is specifically available for arrays. It can only be used to iterate over array elements. It executes a callback function for each element of the array.
3. Loop Control:
-for...of loop:
Thefor...of loop does not provide built-in control statements likebreak orcontinue. Once the loop begins, it iterates over each item until the end of the iterable or until the loop is terminated using other means.
-forEach() method:
TheforEach() method does not support traditional loop control statements either. If you need to prematurely terminate the loop, you have to throw an exception or usereturn to exit the current callback function.
4. Access to Index:
-for...of loop:
Thefor...of loop does not provide direct access to the index of the current item. If you need the index, you would need to manually keep track of it using a separate variable.
-forEach() method:
TheforEach() method provides an optional second parameter that represents the index of the current item in the iteration. You can access this index directly within the callback function.
5. Return Value:
-for...of loop:
Thefor...of loop does not return a value. If you need to collect values during the iteration, you would need to create a separate array or variable and push or assign values to it within the loop.
-forEach() method:
TheforEach() method does not return a value either. It simply executes the provided callback function for each element of the array.
6. Loop Control Flow:
-for...of loop:
Thefor...of loop allows early termination using thereturn statement or by throwing an exception. It provides more flexibility in controlling the loop flow.
-forEach() method:
TheforEach() method always iterates over all elements of the array. It cannot be terminated prematurely unless an exception is thrown or if the callback function exits the current function scope.
To summarize, the main differences betweenfor...of andforEach() loops in JavaScript lie in their syntax, applicability, loop control options, access to the index, return value, and loop control flow. The choice between them depends on the specific use case, the type of object being iterated, and the desired functionality.
