What are the differences between JavaScript's forEach() and for...of loops?
Rashid D
In JavaScript, bothforEach() andfor...of loops are used to iterate over iterable objects, such as arrays. However, they have some differences in terms of syntax, behavior, and supported features. Here are the main differences betweenforEach() andfor...of loops:
1. Syntax:
-forEach():
- TheforEach() method is available on arrays and is invoked on an array object.
- It takes a callback function as an argument and calls the callback for each element in the array.
- The syntax is as follows:
1
2
3
4
5
array.forEach(function(element, index, array) {
// callback function body
});
-for...of:
- Thefor...of loop is a language construct introduced in ES6 and can be used to iterate over any iterable object.
- It provides a more concise syntax compared to traditionalfor orwhile loops.
- The syntax is as follows:
1
2
3
4
5
for (const element of iterable) {
// loop body
}
2. Iteration:
-forEach():
- TheforEach() method calls the provided callback function for each element in the array.
- It ensures that the callback function is called for every element, even if some elements areundefined or have been deleted.
-for...of:
- Thefor...of loop iterates over the elements of an iterable object, such as an array, string, orMap.
- It assigns each element in the iterable to a variable, allowing direct access to the element during each iteration.
- It skips elements that areundefined,null, or have been deleted.
3. Break and Continue:
-forEach():
- TheforEach() method does not supportbreak orcontinue statements within the callback function.
- If you need to exit the loop prematurely or skip to the next iteration, you have to use alternative approaches, such as throwing an exception or usingreturn to exit the current iteration.
-for...of:
- Thefor...of loop supportsbreak andcontinue statements, allowing you to control the loop flow.
- You can usebreak to exit the loop prematurely andcontinue to skip to the next iteration.
4. Access to Index:
-forEach():
- TheforEach() method provides access to the index of the current element as an argument in the callback function.
-for...of:
- Thefor...of loop does not provide a built-in mechanism to directly access the index of the current element. If you need to access the index, you can use additional variables or theentries() method to obtain index-value pairs.
5. Return Value:
-forEach():
- TheforEach() method does not return a value. It performs an operation on each element but does not produce a new array or a result.
-for...of:
- Thefor...of loop does not inherently produce a new array or a result. However, you can use it with other mechanisms, such as theArray.from() method or the spread operator, to generate a new array or transform the iterable into a different data structure.
Consider the specific requirements of your code when choosing betweenforEach() andfor...of loops. If you need to perform an operation on each element without breaking or skipping iterations,forEach() provides a straightforward and concise syntax. If you require more control over the loop flow, access to the index, or
the ability to generate a new array,for...of can be a more suitable choice.
