Async iterators (for await ... of) in JavaScript

[@ErnestGWilsonII]

Already subscribed with notifications enabled and thumbs up as always! I think this may have broken my brain! He did say put this into PROD right away correct? (kidding) - Beyond the mechanics and the fake database, I'd like to hear real world or additional hypothetical but desired use cases. Is the point to block the event loop less?

[@funfunfunction]

The benefit of having a function return an async iterator instead of just a promise that returns an array is that you can process it as you go. Imagine that you had a pretty big dataset (20GB) or perhaps that it was loading fairly slowly and you wanted to display the results as you were loading rather than wait for the entire dataset to load.

[@ErnestGWilsonII]

Now that is a use case that could really help! I will be keeping this in my back pocket for just such a rainy day! Thank you!

[@snabelaset2]

Just what I was wondering too, this example cleared it up, thank you.

[@MaxDavydov-r2k]

By the way, all readable streams in Node.js 10 are async iterators! seetwitter.com/mikeal/status/993925507967205378

[@SteveGriffith-Prof3ssorSt3v3]

await for of is also supported as of version 10.3 node.green/#ES2018-features-Asynchronous-Iterators-for-await-of-loops

[@JavierPortillo1]

If you come from the future, for await is already supported by node and chrome. You also have to use Symbol.asyncIterator instead of Symbol.iterator.

[@alexandergracilla1394]

I used the Symbol.iterator and my program goes to an infinite loop and it took me a while to figure out why since the browser keep crashing

[@TheSkoranoskorano]

Awesome! ASYNC AUDIO :)

[@funfunfunction]

Hahahhahahha I love you

[@backo5004]

thank you! your videos helped me understand generators and async generators. i love your vibe (and sunglasses)!

[@HcmfWice]

I don't get it. I was trying to do something like this, and the 'for await .. of' just went into an infinite loop (basically the next() function is being called even after it had already returned a {done: true} value. So then I just copied your code from Github, and it also goes into an infinite loop. I have debugged it and the customer value in the body of the 'for await' loop is always undefined. On the other hand, if I do the (await iterator.next()).value thing, then it works correctly. What's going on?

[@HcmfWice]

I replaced Symbol.iterator with Symbol asyncIterator and now it works... Strange. I mean it's strange that it works for you with Symbol.iterator.

[@SteveGriffith-Prof3ssorSt3v3]

+1 for the Gretzky reference!

[@arminrosic]

+1 for supporting a fellow KZbinr ! I love your awesome coding content even more now Steve !!

[@vuufke4327]

I'm gonna miss this channel

[@moy2010]

Gooood monday morning! Finally the Async iterators' video :D. Thanks and kudos, MPJ!

[@The_Nova_Glow]

I Love your intro. IT NEVER gets old.

[@lukejagodzinski]

It probably doesn't change anything about how code works but you should use Symbol.asyncIterator instead of Symbol.iterator to be compliant with the spec, right? Is there any difference between both besides just naming convention?

[@funfunfunction]

I think it's supposed to be asyncIterator, but I had to use the normal iterator in the code to make it work. I think that the Babel plugin I use is not quite interpreting the spec correctly.

[@lukejagodzinski]

Ok thanks :)

[@stephanhouben6973]

Node v10.11. supports async iterators natively and it requires the use of Symbol.asyncIterator. Which also conforms to the spec. Chrome 69 too. So perhaps this could be mentioned in the description.

[@ratias0]

I couldn't make your async example work in repl.it until I replaced [Symbol.iterator] with [Symbol.asyncIterator]

[@FrancoisLecroart]

I didn't understand why it works on the video. I thought that AsynIterator must use Symbol.AsyncIterator to work with for await of.

[@erikw4193]

@@FrancoisLecroart I think it's working in the video because of the babel transpilation. Symbol.asyncIterator is now native javascript as specified in ECMA-262, 9th edition, back in June 2018, one month after this video was released

[@giovannicruz7023]

Great video! What is your font family ?

[@artgreg2296]

Thanks for this one mpj, i think many people was expecting this synthesis

[@marslogics]

Loved it. From future when deno is just releases

[@mokshchadha9151]

I miss this dude

[@8o8inSquares]

I like your hairstyle

[@vcothur7]

3:37 what music is this!?

[@searaig]

super helpful! thanks!

[@theartist8835]

what plugin are you using to have results displayed next to your expressions ?

[@ledz3pp]

The audio seems to be out of sync at times

[@funfunfunction]

Yeah, I've been having som intermittent troubles with this recently. I have not yet been able to identify the source, sorry.

[@egilsandnes9637]

But is the async audio function iterable?

[@kmbd1234]

it's just AsyncAudio();

[@DjalmaAraujo]

Nice video, as usual ;) Hey, what tool is that you use to output the result of the execution with //? Thanks

[@MaxJacobson1]

Djalma Araujo Looking for this as well

[@stephenjames2951]

Quokka I believe.

[@jinsyoommen]

Curious what the semicolon in front of the IIFE does..

[@funfunfunction]

When you're going semicolon-less and you're starting a line with a [, ( or a ` you should always prepend it with a ; because otherwise the interpreter might otherwise interpret it as calling the previous line as a function. Contrary to popular belief, this is the ONLY gotcha of the semicolon-less style. There is a rule in eslint (beforeStatementContinuationChars) that checks this for you so that you don't have to remember it.

[@vidhill]

He never uses semicolons at the end of his lines, IIFEs are one of those cases where not using semicolons can cause weird behaviour, so it's there, -just in case

[@dusnoki]

Interesting stuff. Gonna see if I can use this but it looks a lot like Promise.all(), not sure what the benefits are at the moment.

[@funfunfunction]

Great question - what you're asking is - why just not return a promise that returns an array with the complete dataset? Lazy processing. What you need to imagine is a larger dataset / and or a slower access point. I.e. it takes a little while to load each item, or the data set is so large (or infinite!) that it's impractical or impossible to load it all into memory before starting processing. The advantage than an iterator gives over an array is communication back and forth between the consumer and the producer - the consumer can ask for more data gradually instead of waiting for it all at the same time.

[@dusnoki]

Thanks for the detailed reply man :) Will keep this in mind if I stumble upon a use case like this. Keep up the great work, Cheers :)

[@Alessandro-nq3tm]

The only advantage that I can imagine to use iterators over simple loops is when you must stop the iteration and resume it after using .next() OR if you have a reeeeeeaally large dataset

[@igortobert7015]

hey! whats'up! tell me what ide you are using that it gives such hints at the end of the line? much thnx. seems like VS Code, but what a package do you using?

[@funfunfunction]

Its quokka - quokka.funfunfunction.com

[@cesarcastano]

Very fun und helpful. Please use dark mode. Can't read with white backgrounds

[@jhuluan-jyun2594]

Hello MPJ I have a question, I want to run the async code concurrently, so I wrap it in Array.from like this Array.from(customers), since it is a promise array, should be able to use Promise.all fetching data concurrently, but it somehow breaks! By the way, Awesome video as always:D

[@funfunfunction]

You cannot run async code synchronously - the point of providing an async interface is because it happens asynchronously.

[@Eupolemos]

The "mellow" mood didn't do anything negative for the vid :)

[@tadeutupinamba9417]

What the name of the plugin that returns instantelly the result of the line?

[@kapros_p]

I think this is it: quokkajs.com/

[@zf0666]

What's the point of the the async iterator if you always await it anyway?

[@funfunfunction]

I dont understand your question. The whole point of asyncronous programming is so that we can await it.

[@zf0666]

I thought await is to make asynchronous code behave like synchronous code. If we wait for each get to finish it's 500 delay, what is the advantage of making the iterator async in the first place? Maybe I don't understand, but if we use await every time we call an asynchronous function isn't it the same as using synchronous code?

[@funfunfunction]

No, if we wanted syncronous code we’d just make the code syncronous in the first place, not make an async api and then use a tool to make it sync again. Syncronous code freezes your application completely allowing no other execution of any code whatsoever until something has completed. This is one of the biggest misunderstandings of the async keyword, if it made code sync it would have been named sync, not async. When we await inside an async function, the async function is paused and other code is allowed to execute while the async function is awaiting an operation. It *visually flows* like syncronous code, but it doesn’t turn code sync, because that would be stupid. Async APIs are async for a reason - if they were suitable to be sync they would be sync.

[@morleee]

Hi MPJ, when I run your example with the for await loop, it enters into an infinite loop. I was under the impression that the for await loop would be able to log the result of the promise on every iteration but it doesn't seem like it does.

[@morleee]

I happened to watch the async generator video after this, and I saw Symbol.asyncIterator was used. When switching to an asyncIterator for this example, the for await loop works as expected. Though i'm confused as to how it works in your example in the video (using just Symbol.iterator).... I'm on Node 10.3.0 FYI

[@funfunfunction]

I think it's because Quokka runs babel on the code, and I thiiink babel has some weird behaviour with asyncIterator vs just Iterator.

[@morleee]

Thanks for the response! Great videos by the way :)

[@mattd6908]

Great episode as always, have you thought about doing an ep or two on RxJS? I know you have briefly covered observables and don't typically go down the path of libraries / frameworks but being that a lot of your content is based on async, I think it would be valuable to a lot of people. It's an intimidating library that I think people don't even give a chance due to that.

[@funfunfunction]

I’m honestly an anti-fan of Rx to be honest, and don’t want to push it. I think its an overrated library that makes a simple concept such as observables super unapproachable and hard to deal with. It’s intimidating because it’s grown indiscriminately and I think people are perfectly right to be afraid of it. I also don’t subscribe to their philosophy of sprinkling observables all over the codebase - the observable pattern should be used with great restraint.

[@mattd6908]

Fair enough, appreciate you taking the time to reply. Keep up the great work!

[@kwabenaboadu]

Hey MPJ. Nice video. Just a quick suggestion. Node has util.promisify which can be used to wrap setTimeout in a promise. Thanks

[@funfunfunction]

Yeah, but this way, the viewer will understand what is happening and won’t be distracted. Especially for the case of setTimeout, where util.promisify has a special workaround to handle the unorthodox call signature of setTimeout, which is doubly surprising.

[@kwabenaboadu]

Fun Fun Function Again thanks for the videos.

[@MuratKeremOzcan]

Could you do this with forEach ?

[@funfunfunction]

You need to elaborate this question a bit because it doesn't make sense for me. forEach is a method on an array, not sure what you mean. Did you watch the first video?

[@MuratKeremOzcan]

Fun Fun Function can you asynchronously iterate over an array of promises using forEach, instead of for of? What is the difference?

[@funfunfunction]

No, forEach, unlike (for await ... of) is sync. Also, forEach is a method exclusive to arrays. Iterators is a general interface that arrays happens to use, you might have streams that are iterable, for example.

[@MuratKeremOzcan]

Fun Fun Function thank you, you saved me a few days

[@Cazineer]

Fun Fun Function Maps and Sets have forEach as well, so no, forEach is not exclusive to arrays.

[@Joshfw27492]

There's a library called interactive extensions for javascript which has async iteration baked in. I'd imagine this is the dual cousin of RXJS but instead of modelling push based data sources it models conventional pull based data sources. I'm yet to see strong documentation or any examples elsewhere on google. github.com/reactivex/ixjs

[@ktquez]

What screen recording software does this effect on the mouse, does anyone know?

[@funfunfunction]

See behind the scenes and gear video

[@alanlal5625]

You have so many cool glasses ❤️❤️... Would love to see your collection in your video some day..

[@asimsinthehouse]

Great video as always! For the next video, what about Async Generators! That would be interesting

[@ABHISHEK0058]

Thanks man .. just saw two previous videos .. and now this ... got lucky i guess

[@andreyshedko6155]

Hi MPJ! Why module.export? What's wrong with import and export? P.S. I love your videos!

[@funfunfunction]

They are still ultra buggy in node, at least when I tried a month ago or so.

[@putinninovacuna8976]

It's kinda like streambuilder in Flutter with the iterator

[@Higoki1]

Awesome intro. Very funny.

[@spacewad8745]

I see you've switched to a lighter text editor theme. Is it good for your eyes? I am really curious.

[@funfunfunction]

All research I've seen suggests that dark text on bright background is easier to read for humans. That said, many programmers anecdotally report that they have less strain with bright on dark. Not sure why this is - it might be because programmers often have astigmatism which makes bright on dark easier to read. It might also be because programmers work in insufficient lighting conditions which make a bright screen straining due to contrast between environment and screen.

[@mdoerkse]

Is it the future yet?

[@ZiX2345]

Hi MPJ. Nice hair. Good explanation, thanks!

[@serafim2867]

Hi, pls send music from this video to some cloud, I really get tired trying to find it =)

[@brisketbaron]

I love it when you parrot the opinions of the usual suspects. You need more props though. hats!

[@amarbalu109]

Awesome.

[@jsonkody]

Thats exactly how I feel now after yesterday trip on top of nearby mountain ;)

[@afiefsholichuddin]

Did you forget to use generator function? :D

[@funfunfunction]

No, we’re not there yet. We need to understand async iterators before we introduce things that meta-programs them.

[@MrAidooyaw]

U sound like Cpt Jack Sparrow. I like that 😊

[@chanlito_]

😱that white background... Pls use dark

[@funfunfunction]

You sure do know how to make a strong case when arguing.

[@ph10m]

I prefer green with pink text * emoji goes here *

[@noxabellus]

Up until you started actually typing it, I was like "Wait, WTF is Bauble?"

[@funfunfunction]

Oh, thats interesting. Can I ask what your background is?

[@javierRC82857]

Why is not high contrast? Why are the letters small? Please. I normally see your videos in my phone.

[@funfunfunction]

Dark text on white background is the highest contrast you can get (black on yellow being the highest). Sorry about the small letters though, I forgot myself this time.

[@javierRC82857]

Fun Fun Function Yes. I was referring to the dark theme of black background and yellow letters. Thanks, very good videos.

[@funfunfunction]

You misunderstand. The highest possible contrast of colors that you can achieve is dark letters on yellow background. The inverse is pretty bad. www.viget.com/articles/color-contrast/

[@igortobert7015]

async function (sound, video) :D PS video in frame not sync with sound and desktop video

[@maxlin2905]

Lucky! I am from the ”future”

[@greendsnow]

what's he talking about?

[@yashkalwani2674]

The pain what you did to so much of caffeine and such a beautiful coffee filter made me pause the video come to comments section and make this comment. Please, do not do that again. Its painful.

[@johnfridja]

i pressed like just for the silly intro

[@f1945]

you look like german garmendia.

[@anison1111]

you should do TV shows not programming

[@keologii]

Please remove the music from all of your videos