You Probably Haven't Used This JavaScript Loop

In this video we're going to have a look at the for await... of loop in JavaScript which is used for when you want to perform a sequence of asynchronous operations in order.
This is typically used when each iteration depends on another one, as it waits each subsequent promise to be fulfilled before executing the next.
In this simple example, I'll show you how it can be used for retrieving data using the Fetch API.
For your reference, check this out:
developer.mozilla.org/en-US/d...
🏫 My Udemy Courses - www.udemy.com/user/domenic-co...
🎨 Download my VS Code theme - marketplace.visualstudio.com/...
💜 Join my Discord Server - / discord
🐦 Find me on Twitter - / dcodeyt
💸 Support me on Patreon - / dcode
📰 Follow me on DEV Community - dev.to/dcodeyt
📹 Join this channel to get access to perks - / @dcode-software
If this video helped you out and you'd like to see more, make sure to leave a like and subscribe to dcode!
#dcode #javascript

[@christian-schubert]

You're onto something here.
This also works without awaiting the for...of loop as the loop will iterate over the iterable's values programmatically anyway.
In other words:
for (const user of usersToFetch) {
const result = await user;
console.log(result);
}
will also work just fine (although admittedly less elegant 🤪).
HOWEVER!, in this regard, it behaves ENTIRELY differently to forEach, map, etc. as these are higher order functions which will in essence accept pending Promises as what they are and move on to the next value!
Should you ever be running out of content ideas, this would be a VERY interesting topic to cover IMHO.
--
Also, would probably be worth mentioning that top level awaits are now a thing with Javascript modules so there's FINALLY no more need to always wrap your entire codebase in an async function wrapper 😅

[@cm3462]

@christianschubert5449 Thanks for telling us about top-level await - this is a big deal! Thanks also @dcode for pinning this!

[@artemmakhaydinov3586]

Acording to MDN, for await... of looks for [Symbol.asyncIterator] method to cycle through it, and if it doesnt find it, in just use [Symbol.iterator] but wraps returns of next(), return() and throw() inside iterator into resolved or rejected promises. Author uses an array in video and it doesn't contain [Symbol.asyncIterator], so loop just cycling through an array syncronously, fill microtask queue with promises, handling in parallel sequence and await for result, just like regular for... of with await inside it.

[@christian-schubert]

​@@artemmakhaydinov3586 Hey, no, this is not how it works.
As I have explained, higher order functions will "run through the loop" if you will, not resolving pending promises. for...of on the other hand will.
Maybe to clarify this a bit - even though array.map() / array.forEach() and for .... of ... behave in similar ways (and yield comparable results), they are technically not the same thing. As the name suggests, higher order functions run functions on each iterable, hence e.g. break / continue do not apply (as there is no loop to "jump out" of).
This is not the case with for.../ for...in.../ for...of.../ while / do...while...

[@artemmakhaydinov3586]

@@christian-schubertfor... of resolve promises due to scope it creates for each iteration?

[@brunocastro4193]

Awesome video! It's a bit repetitive at times, but I guess that's necessary. Tip: 8:02 -> You don't need to do ctrl-c then ctrl-v. Just press shift+up or down. Saves a little time when we're working long hours.

[@user-tk2mx9vl2h]

thank you so much! this is very useful for FE developer.

[@offgridvince]

Cool!

[@FuzeTox]

amazin

[@anasouardini]

I'm waiting for this to expand laterally so we can also have "forAwaitEach" etc, etc.

[@rostyslav5334]

What if it rejects the promise, it will just throw an error, as I understand?

[@FuzeTox]

but I think we can do that with js async generators isn't it?

[@shamelnet48]

In minute 6, how can all this data be combined into one object

[@suelingsusu1339]

🌹🌹🌹🙏🙏🙏👍👍👍👌👌👌🖖🖖🖖