Should one use for-of or forEach when iterating through an array?
JavascriptEcmascript 6Javascript Problem Overview
Also, is this a style question or a functional question? Is it a matter of preference or is one better? I'm trying to understand the purpose of for-of.
Usually I use,
let iterable = [10, 20, 30];
iterable.forEach((val) => {
console.log(val);
})
But I see that this new syntax is available.
let iterable = [10, 20, 30];
for (let value of iterable) {
console.log(value);
}
Can one provide an example of a best use case for for-of that might illuminate when one should use it?
Javascript Solutions
Solution 1 - Javascript
I recommend to always use for … of in ES6.
- It works on any iterable
- It supports all kinds of control flow in the loop body, like
continue,break,return,yieldandawait.
Also I personally find it more readable, but that comes down to preference. Some people think forEach is a more functional style, but that's wrong - it has no result value and is all about doing side effects, so an imperative-looking loop fits that purpose better.
Performance is not a concern, in modern engines all loop styles are equivalent.
Solution 2 - Javascript
This is a very interesting question which has been discussed in many other sites. I'll post the basics of what I have read.
>ForEach exclusively belong to the royal family of Arrays. The forEach method was introduced with lineage to the prototypal inheritance of Array object! Needless to say, the forEach clause works only with those data structure which are Arrays. The method basically iterates over the elements of the array and executes a callback function [basically some executable function/ fun activity].
>The for-of loop is adequately new to the JS world and packs in super-powers! Voilaaaaaaa! The for-of loop creates a loop iterating over iterable member objects. The list is an extensive one such as
- Array
- Map
- Set
- String
- TypedArray
- Other W3C classes
>You need to know that this bad-ass boy emerged with the birth of ES6 in 2015. So, it offers plenty of flexibility in usage
Performance
In performance, for...of is faster than forEach. Results can be found here
forEach is 24% slower than for...of
Update
There are several other iterable classes in the W3C specification, like FileList, as I mentioned above. And in recent drafts of W3C (around when ES6 was released), collections like HTMLCollection and NodeList now implement forEach() as well, not just Array anymore. By @Patrick Roberts
Source Links: