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 😅
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.
@@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...
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.
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 😅
@christianschubert5449 Thanks for telling us about top-level await - this is a big deal! Thanks also @dcode for pinning this!
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.
@@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...
@@christian-schubertfor... of resolve promises due to scope it creates for each iteration?
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.
What if it rejects the promise, it will just throw an error, as I understand?
but I think we can do that with js async generators isn't it?
thank you so much! this is very useful for FE developer.
I'm waiting for this to expand laterally so we can also have "forAwaitEach" etc, etc.
In minute 6, how can all this data be combined into one object
Cool!
amazin
🌹🌹🌹🙏🙏🙏👍👍👍👌👌👌🖖🖖🖖