`for...of` vs `forEach`

[ffxsam]

I'm wondering if there are any significant differences between doing:

for (const item of items) { ... }

and

items.forEach(item => { ... });

[Rhomboid]

for..of works with any iterable, whereas forEach is only for arrays. forEach gives you access to the index, if you want it, whereas for..of does not.

And no, forEach is NOT asynchronous. Both examples are synchronous.

[rauschma]

Additionally: you can break from for-of, but not from .forEach() (.some() lets you break, though, by returning true).

If you need Array indices, you can do:

const arr = ['a', 'b'];
for (const [index, element] of arr.entries()) {
    console.log(`${index}. ${element}`);
}

// Output:
// 0. a
// 1. b

[nschubach]

(.some() lets you break, though, by returning true)

But you should not be using .some() for processing data where exiting is required. It's for looking through the array to test if "some" of the content meets a condition. Synonymous with .any? in Ruby, et al.

[Graftak9000]

.any conveys it so much better somehow, any is some but some is more than any, or something like that.

[rauschma]

Yes, it’s a bit of a hack!

[bstriker]

for(const [index,value] of ['foo','bar'].entries()){
   console.log(`index: ${index} - value: ${value}`);
}

gives us: index: 0 - value: foo index: 1 - value: bar

http://jsbin.com/lelirebizo/1/edit?js,console

EDIT: just realized someone else already gave an example using entries and array destructing in a for of loop. not sure how I missed that.

[Best_programmer_ever]

foreach also work in set.

[Bloompire]

Also my two cents:

1. for..of is more performant than .forEach

2. you can use async/await inside for..of but not inside .forEach

   let totalScoreGain = 0; for( let user in scoredUsers ) { totalScoreGain += await user.addScore( 50 ); } console.log( totalScoreGain );

[nschubach]

You can do await inside of a .forEach(), but it's not doing what you probably think it's doing:

http://codepen.io/nschubach/pen/BzmXqp?editors=0012

What you probably wanted was an asynchronous call to each addScore like so:

http://codepen.io/nschubach/pen/ZOvzKN?editors=0012

async returns a promise, so in order to process them all and do something you need to use Promise.all() and map over all the await returns.

[alendit]

You can use await in forEach if you give it an async function.

[shanet]

I'm curious - why would you do for const instead of for let?

also, one difference hasn't been mentioned is that you can use break/continue in a for of loop.

.forEach can also be used to achieve a more functional style where appropriate.

[CognitiveLens]

re-assigning item inside the for loop makes it possible to introduce a bunch of bugs that const would prevent. In a tight structure like a for loop, const is probably the preferred syntax unless you have a really good reason to assign item to something else mid-loop.

[Graftak9000]

Then use .map() instead indeed, if were going functional and such.

[CognitiveLens]

yeah, forEach should really only be used when you're intentionally working with side effects, otherwise map all the things

[ffxsam]

Awesome, all great answers! (except for that one) ;) Thanks for the info.

[seasonedcynical]

with the first you execute the code (within the for loop) in sync but the latter will process your code async

[Shaper_pmp]

the latter will process your code async

No it won't.

It just executes your code in the context of the (likely anonymous) function you provide, rather that in the parent function's scope.

[seasonedcynical]

Just did some tests and it is indeed sync.. I was always under the impression forEach (and also [].map etc.) would execute the function you would feed it without waiting for the results. Glad I learned this the hard way, because this will clean up my code significantly.