Async Generators - Javascript In Depth

We take a look at Async Generators in Javascript together. This builds on the concept of synchronous generators that we looked at earlier and allow us to work with promises in generators in a consistent and easy way. We also compare these new async generators to regular generators that return promises.
We see how we can use the new for-await-of loop to easily loop through async generator objects as well.
This is part of a series where we go over Javascript in depth to learn programming concepts as well as web development: • Javascript In Depth
Chapters:
00:00 Introduction
00:29 Iterable Recap
01:06 For..Of Loop Recap
01:31 Generator Recap
02:10 Generator For Of Loop
03:02 Generators and Promises
04:02 Generator Promise Code Example
17:04 Async Generator Syntax
18:06 Async Generator Code Example
25:00 Infinite Async Generators
33:16 Async Generator Return Keyword
34:20 Async Generator Yield Delegation
35:55 Next Steps
📦 Github Repository with the notes and exercise code+solutions: github.com/Nooder/javascript-...
💬 Come join us on Discord to chat with a like-minded community about tech and learning: / discord
🏅Support the channel and content through Super Thanks, Channel Memberships, or on Patreon: / techwithnader

[@fabioescobar5463]

You are very clear in explaining bro! You anticipated all the mistakes I was going to make LOL

[@TechWithNader]

Thanks Fabio! Haha, that's good to hear! This is quite a tricky topic so I hope it was useful 😊

[@shivamgupta3652]

Exactly

[@tomboolery]

Generators seem ridiculously powerful, with async generators even more so. I can’t wait to progress and see how we’re going to be using them in tandem with APIs (the idea that we can input into .next() to influence yield returns got my mind racing). Thanks again Nader you’re helping so many people ✌🏼

[@TechWithNader]

Hey Tom - Definitely super cool, haha! It's an important and fancy concept that underpins a lot of underlying stuff in JS and even other languages 😊

[@shivamgupta3652]

Other youtubers finish these topics in 5 minutes. But your way of teaching is totally different that a student cannot forget the concept. Every person should persue through your course who wants to learn JS

[@TechWithNader]

Thanks Shivam! That pretty much sums up my approach to teaching, so I'm glad it's coming across and you're finding it helpful! I was curious to know if people would be ok with such long-form content on KZbin 😃

[@shivamgupta3652]

@@TechWithNader well everyone who learns programming should know, good things take time, especially programming so i would not mind if they will be more longer

[@TechWithNader]

💯 couldn’t agree more!

[@Abulkhair1995]

your chanel grows more I wish...

[@Kiran-khadka]

Wow! Your tutorial are great 🖤 Love your content 💓 I wish if you have started earlier so that I should not have to jump between tutorial to know what's actually is happening! Because you cleared all the concepts as possible so that beginner like me felt comfortable with the Concepts relates to topic 🖤 Wow wow wow👀

[@TechWithNader]

Thanks Kiran! That means a lot to me 😊 I’m glad you’re learning so much and clearing up concepts you wanted to know more about. Let me know if you have any ideas or feedback for other topics 😊

[@DannyGorelik]

That's very nice thank you for the explanation :) But how can i mock these functions for testing?

[@TechWithNader]

Hey Danny! Good question - it really depends on the testing library/framework you're using. It would be similar to testing any other Promise-based functionality. Lots of them allow you to "await" the tests and verify their results before moving on to other non-related tests 😊

[@jeremiahabiola994]

Nice video man.

[@jeremiahabiola994]

Please after this series make a video on api. Json and ajax. They are confusing..

[@TechWithNader]

I totally agree and that is the plan! Do you think it would be more helpful to have that first or front-end and react first?

[@jeremiahabiola994]

I guess the front end. Cause making videos on apis won't be complete without knowing the front end, with the exception of backend devs sha. But it will be a very long series 🤧🤧

[@jeremiahabiola994]

@@TechWithNader It depends on your plan.. I feel combining the two might be stressful... Html ,css.. A lot to cover especially in css.

[@jeremiahabiola994]

@@TechWithNader I feel you should focus more on the backend

[@dsstudios178]

Theres a weird thing going on. Code similar to what you used: function* foo_gen() { yield new Promise((resolve, reject) => { setTimeout(() => { resolve("Finished!"); }, 3000); }); } for await (const promise of foo_gen()) { console.log(promise); } Gives same error for me in node, but in the browser's console this gives no error and returns "Finished!" after the 3 seconds. Why? We can also replace foo_gen() with a `new Promise()` but it will error if it isnt in a array?? [new Promise()] This feels very strange...

[@dsstudios178]

I found somewhat of an answer for people curious. chrome seems to have a `top-level await` that makes this work, its likely node doesnt have this. So this top level await will await any value passed to the for...of loop's variable. This means when we pass a promise: `for await ( const promise of new Promise(...))` we error, as a promise is an Object, not iterable. But if we did: `for await ( const promise of [new Promise(...)])` Its in an iterable array now and now `promise = new Promise(...)` which will be awaited. This works with the generator function for the same reason, when the `for await (const yielded_promise of generator())` runs, like we know by know, the loop will run generator.next() and assign the yield value to the `yielded_promise` variable. So once again we will await this value :D Please note, this seems to not be in node, but in the google console. Also it will technically await ANY value, `await 5;` for example. Someone feel free to correct me, hope im on the right track about this, but for now imma stick to normal node.js

[@TechWithNader]

Interesting finds! What was your original error, in Node? Deno which is another newer runtime also has a 'top level await' feature, which can be nice if used correctly haha 😊

[@ShivamSharma-dq4pu]

30:50 you say that for await (const promise of asyncGeneratorObject) { console.log(promise); } will not work for normal generator but i try to ran at but it ran just fine. const normalGenerator = function* () { let i = 0; while (true) { yield new Promise((resolve, reject) => { setTimeout(() => { resolve(i); i++; }, 1000); }); } }; const normalGeneratorObject = normalGenerator(); const asyncGeneratorExecuter = async () => { for await (const promise of normalGeneratorObject) { console.log(promise); } }; asyncGeneratorExecuter(); this is working fine