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:

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 😅

[brunocastro]

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.

[s유아마에브리띵]

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

[anasouardini]

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

[rostyslav]

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?

[shamelnet]

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