You Probably Haven't Used This JavaScript Loop

Поділитися
Вставка
  • Опубліковано 20 січ 2025

КОМЕНТАРІ • 14

  • @christian-schubert
    @christian-schubert Рік тому +7

    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
      @cm3462 Рік тому +2

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

    • @artemmakhaydinov3586
      @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
      @christian-schubert Рік тому +1

      ​@@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
      @artemmakhaydinov3586 11 місяців тому

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

  • @brunocastro4193
    @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.

  • @rostyslav5334
    @rostyslav5334 Рік тому

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

  • @FuzeTox
    @FuzeTox Рік тому

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

  • @s2유아마에브리띵
    @s2유아마에브리띵 Рік тому

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

  • @anasouardini
    @anasouardini Рік тому +1

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

  • @shamelnet48
    @shamelnet48 Рік тому

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

  • @offgridvince
    @offgridvince Рік тому

    Cool!

  • @FuzeTox
    @FuzeTox Рік тому

    amazin

  • @suelingsusu1339
    @suelingsusu1339 Рік тому

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