Generators in JavaScript

[@Dalendrion]

Wait. You wrote `return {value: "hardy the dog", done: true}` Is that correct? It works when you call the iterator manually, but how about a for loop? I would expect the following code to print "hardy the dog". But it doesn't! ``` function printlnFunction(element, str) { element.textContent += str + " "; } const println = printlnFunction.bind(undefined, document.getElementById("someDragons")); const iterable = { [Symbol.iterator]: () => { let iterations = -1; return { next: () => { iterations++; switch (iterations) { case 0: return {value: "fluffykins some dragon", done: false}; case 1: return {value: "mark the fine dragon", done: false}; case 2: return {value: "hardy the dog", done: true}; } } }; } }; for (const i of iterable) { println("- " + i); } ```

[@funfunfunction]

Fantastic catch! I'll try set things straight on how exactly one is supposed to set done in upcoming videos.

[@harshshah85]

This is because before it gets the 'value', it check of 'done'. And if its 'done' then the 'value' is NOT read and it just returns to the main function

[@MrMate1212]

Over 4 years ago and this video is still one of the bests about generators :)

[@domski196]

I liked that hardy the dog could participate because JS is weakly typed haha

[@erikgurney306]

I’m not a newb, but no other explanation of generators made me understand and want to look into them more. Good stuff!

[@andrewkiminhwan]

you are certainly the most eccentric coding youtuber i know of! It took me a while to appreciate how much I learn from your style of teaching, thank you for being you!

[@chrsbll]

Occasionally your videos go just a little over my head - however this is by far the best explanation of generators I've seen.

[@CoryTheSimmons]

Definitely interested in learning more about how generators can be used in real-world async situations (to await certain content and populate the DOM accordingly). I've heard generators are more powerful than async/await (i.e. "redux-saga is better than redux-thunk + async/await") but have no idea why and

[@papawattu]

+1

[@RestfulCoder]

I stumbled into generators when using React sagas. Thanks for this detailed explanation of generators, and how they relate to iterators. Great work!

[@Ben-rh7mf]

Great video. I’m looking forward to the async generators and iterators videos. Hopefully those are .next()

[@prox2103]

I second this

[@IAMZERG]

I see what you did there. Well .done

[@oscarcrespo3313]

This video is awesome! I've been trying to understand Redux-Sagas for a while, it all makes sense now!

[@Cobesz]

Please, continue! This is amazing stuff :D

[@Finicky9]

Gooooood monday morning!

[@asimsinthehouse]

Thanks linking me to this mpj! Really cleared up generators!

[@forgettd]

This kind of stuff is what I have subscribed for. Even if I do already know about the stuff, you're talking I won't skip the video. Thank you, mpj, for creating such interesting project. And for being hella attractive too :)

[@Ratstail91]

Thanks! I didn't really know what generators were all about until now.

[@BLACKNIGHTCODING]

Yep, keep going. Let's see how deep the rabbit hole goes!!

[@joemiller1057]

super cool! love learning new JS stuff please continue w/ iterators && generators :)

[@VladimirBrasil]

Beautiful. The "build your own iterator through a factory using the reserved key [Symbol.iterator]" is a very good example of a way to maintain the language flexible enough so everyone can add its own iterator, without changing every part of the language that simply use any of these iterators. I am not sure if this would be called an interface by the old OOP guys. But I am almost sure that this respects a beautiful easy-maintenance principle, the "open-closed principle". Open for adding new capabilities, closed to change current code. Couldn't we use the same technique that the "iterator" technique uses to architect our programs from the beginning? Probably there already is an episode on that, I am sorry for not knowing it yet. Congrats on a very-well-perfect show.

[@trevorasargent]

this is the only explanation of iterators (in any language) that has made and piece of g-- d--- sense to me. you ruuuuule. keep it coming I'm here for asynccccc

[@Kowbinho]

I merely heard about generators but now that I see it moving I begin to see how it could be powerful and at the same time really not rocket science. Thanks for the show !

[@kmylodarkstar2253]

Thanks for all content, hope you have time for breath your mind.

[@yantakushevich1014]

Great series. Give us more!

[@brucedonovan]

Hi! Thanks for yet another great vid! Quick question: Can you 'yield' anything (for example a function or another generator)?

[@funfunfunction]

Yes. You can yield anything. This allows us to do really, really funky things with generators. When Generators arrived on the scene, async / await had not made it into the language, so the main big thing that the community used generators for was to implement async / await.... That said... it's a reeaaaaallly slippery slope though and often results in code that has so many layers of indirection that it's a lot harder to reason about than it would have been without iterators or generators, defeating the purpose of them. Generators are one of those things that are insanely cool and makes you feel incredibly clever, which is a good sign that one should look really critically at the code one produces and ask "is this really clearer?"

[@brucedonovan]

Thanks MPJ!

[@lutaseb]

When i used iterators with java, usually you had a hasNext() method returning if the iterator was done or not, my question then is, it looks like it s good to return your last iterator value with the flag done set to true (and undefined furthr on), am i right? I mean, what's the usual way of using an iterator then ? btw, those 2 last viddeos are the best you ve ever done to me! Awesome!

[@funfunfunction]

GREAT question. Looking at the Mozilla developer documentation on the topic (developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#The_iterator_protocol), it seems like one is actually not allowed to have the value property set to a non-object: "The next method always has to return an object with appropriate properties including done and value. If a non-object value gets returned (such as false or undefined), a TypeError (“iterator.next() returned a non-object value”) will be thrown."

[@osakaandrew]

Isn't it interesting that it also mirrors the behaviour of for loops. If you run a plain for loop with a condition like `i < 100`, then even though inside the loop the value of i never is more than 99, its value after the loop has completed is 100, not 99 (and this is what the spec says should happen). I never found that behaviour normal, but now I see that it is at least consistent.

[@lutaseb]

hummm i just went to look at the doc u mentionned, it just says "The next method always has to return an object with appropriate properties including done and value", which just says you have to return {done, value} objects, but id does not specify if the last values sent back could be {value: "last", done: true} or {value:"last", done: false}, followed by {value: undefined, done: true}, since we don't have the hasNext() methods in java that allows you to know in advance if the iterator is over, i m still wondering. Personnaly in this case i would go for the last value as {value:"last, done: true}

[@matthiasmuller5211]

I think the question was if it's possible to move the logic, whether another dragon shall be created, into the iterator call BEFORE the one where it's actually created and return done: false only if there will be another dragon. This way the consumer of the iterator knows whether he will get a dragon before he actually calls it (that's basically the information, that the java hasNext() method contains).

[@yasinyaqoobi]

That was actually my first question too when I came across generators. If u look into stackoverflow you will find how we added a hasnext method. I think this should have been added in the core.

[@iorbit]

"But Hardy the dog is not a dragon!? We don't mind. This is a weakly typed language!" ^ why I love this show

[@kondovwrites]

I've been using generators lately in the context of redux-saga, quite useful. Looking forward to more content on similar topics!

[@jedrzejsadowski6810]

Hi. Would be great to hear about yield* in the next video. It was really mind-blowing for me when I learnt about it :D

[@prox2103]

Amazing job MPJ!!! It finally makes sense :)

[@hpgildwel]

I know this is probably a style thing, but why not use a switch statement in the rewrite case? Its cleaner.

[@naseer142]

why can't we use for-in loop for the dragonArmy object ?

[@coconutbunch]

Good Tuesday Morning, I have been following your tutorials or rather to say fun learning sessions for a while now. There is always a new feature or shortcut or how-to-dos, i learn, eg: quokka here(I never even had an idea of its existence). Teaching is art and you have nailed it. Generators is one of the best addition to ES6. And I would excited to learn how can they work async. Also I would appreciate if you can share on design aspects/Best use cases with Node.js, angular.js,react.js ... other popular frameworks. Thank you very much. :)

[@ShingoSAP]

Really cool man! Very interesting on async Iterators and Generators!

[@Alessandro-nq3tm]

We want asynchronous generators !!! When we want them ? Nooww :)

[@BowlineDandy]

... now!!

[@sr_aman]

Yesss!

[@nathancornwell1455]

You totally missed any opportunity to say "We want them .next( ) ! "

[@MissECylon]

Why do we need the Math.random() function? And that has to be set as bigger than any specific number? I don't understand that conditional line. :/

[@smackjaxcodes4791]

"And then we yield...Mark..." Awesome :)

[@vandhuymartins9481]

Great video as always :) Thank you MPJ!

[@krypto7264]

There you go 4:41, a drawback of Quokka

[@rikilamadrid]

after I saw the intro i was almost expecting you to take a sip out of the mug as a beginning of the lesson...

[@MitraNami]

shouldn't we write 'Math.random()

[@youngsuit]

fun fun function headspace the crocodile hunter 30% good content, 70% sexy accent

[@michal3833]

thank you your videos are so well explained and funny!

[@cannabanana5929]

What is the extensionn being used to show the results/value of func or variable?

[@funfunfunction]

Its mentioned in the epsiode right after I show it for the first time :) also linked in the epsiode desc.

[@gayusjuliuscaesarsalad]

Monday, home from school -> first watch some FUNFUNFUNCTION!!! :D 👍

[@max8hine]

Generators and Promise / Async Function in Async action?

[@MJ-ke1xe]

Im just here for all the different types of glasses

[@int21]

This what I call quality content 👏 question what will be a real life applications for generators + yield?

[@snø_music0]

What does it mean when you put "*" after function? Like this function* stuffs(){}

[@funfunfunction]

That is what makes the function a generator instead of a normal function. I.e thats the core magic of the video. :)

[@LiorCHAMLA]

Gooood monday morning !

[@luluozer]

You can copy a line by just doing copy with the cursor on that line. So if you want to duplicate a line you can easily command c command v it and it’ll be doubled. Means you don’t need to select the each time. Will save you a few seconds 😃

[@funfunfunction]

Thanks! You're right, but I intentionally stay away from hotkeys etc. in the videos as much as I can. Any time I use a tool etc in the videos I need to also spend time explaining it, and even when I do that, it distracts from the subject at hand.

[@ggcadc]

I presented about generators to my local Javascript meetup and couldn't find any real solid use cases for them. I mean, they are useful in some cases but there seem to be better solutions in most of those cases. Id love to see something where the generator is the BEST solution to the problem.

[@funfunfunction]

I did not see one either until I saw async iterators being used to stream process data in ObservableHQ (beta.observablehq.com/@mbostock/introduction-to-asynchronous-iteration), then they arge bloody magnificent. We're going to be looking at that coming up, but we need to work ourselves up to that point first.

[@madflanderz]

For me the best part of using generators (like redux-saga) is, that it makes it super easy to test different parts of your generator logic without the pain of mocking functions etc. Before redux-saga i used redux-thunk and to test this you need a lot of dependency injection. With redux-saga it feels much easier and straight forward.

[@rinatvaliullov3247]

Cool, thanks, mpj! Can you record video about regural expressions in JS?

[@yurioliveira6603]

Good pace, nice code!

[@cagmz]

11:19 very subtle, mister.

[@livethetube]

Where would you use it?

[@funfunfunction]

When you want to make things iterable.

[@Joroze95]

Please teach about RXJS and Observables!

[@GeorgeMadiarov]

I'm a bit too dumb and still dont get it, can you make a video with real-life example with fetch/axios or other case scenarios?

[@funfunfunction]

We haven’t started talking about async scenarios yet, so you couldn’t possibly get that scenario, don’t worry. We’ll get to it.

[@jakubrpawlowski]

Add in description an affiliate link to buy that dotted notebook please.

[@funfunfunction]

Oh thats an idea. Its a lechturm 1917

[@RutgerWillems]

Link in description links to this video, not the Iterator one.

[@funfunfunction]

thanks!

[@codingpoet-ksp9468]

A complement to the previous iterators episode and this episode with async iterators: gist.github.com/p10ns11y/d341ad364bd0d6e89df91342e5fc7aa5

[@solmazk7418]

Please make a video about how view engines work.Specially with nodejs

[@funfunfunction]

Not sure what you mean when you say view engine, sorry.

[@ANANANTN]

👍👍 async iteration & generators

[@jihadkhorfan]

async generators with some API calls plz

[@a.rnaseef6489]

How this is different from async/await...

[@funfunfunction]

Generators is what is used under the hood to make async/await. Async/await is a very specific implementation of generator - before async / await existed in the language many used generators to implement it. But Generators are more general - async/await is limited to returning one single result, a generator can keep yielding, so it can be used to implement streams.

[@a.rnaseef6489]

cool, thanks mate. :)

[@skyecairo6997]

I like this hair style. It's 90's David Bowie cool.

[@martinalcala4823]

Implementation of python's range in JavaScript! const range = function*(start = 0, end, step = 1) { if (!end) { end = start; start = 0; } while(true) { const value = start; start += step; if (value >= end) return; yield value; } }; // 0, 1, 2, 3, 4 for (const x of range(5)) { console.log(x); }

[@fort1Z]

Do you use generators in production?

[@funfunfunction]

Generators has been around for several years now and can be safely used in production, and is by many people.

[@irockalonso]

what is this text editor ?

[@funfunfunction]

Its vs code

[@irockalonso]

I think the video is excellent !. it's cool to wake up every morning with more of this... thank you very much!

[@hobbyhub-91]

and he is using quokka plugin

[@beauremus]

Async all the things!

[@grumpycoder4592]

They should be called "Iterator Generator Functions"

[@SolidousMdz]

+Fun Fun Function aaaaaaannd... thank you.

[@ABHISHEK0058]

Awesome man

[@TarrenHassman]

Stolkholm is a perfect place for anyone using react.js, because the only reason they might be using it is if they have stolkholm syndrome.

[@r-i-ch]

Want to learn ALL OF THE THINGS!

[@spyrospapaioannou5724]

Thanks for the video, you inspired me to make some snippets and learn the iterators-generators better. Great Work! My observation is that the function "someDragons" makes your case when you use ".next" to consume the values. If I am not mistaken, It would not work when you try to consume the returned value by a "for of" loop, as you showed at the start of the video. A generator function meets both requirements, by having the [Symbol.iterator] property. I think it would be useful to add to the iterator object the following: [Symbol.iterator]: function() { return this; } codesandbox.io/s/jzj0y8pwo9

[@PSTRNC]

Your JUST is so funny i YAST cant stop smirking

[@ZekeLnez]

Didn't you make a video before talking about generators being kind of pointless? Or was that someone else?

[@ZekeLnez]

Found it. kzbin.info/www/bejne/l6XImI2nra2esJY

[@funfunfunction]

Yeah, I made a previous video on generators where I was not very excited about them. I was mostly because at that point, all the community did was to implement a poor mans async / await, and all the tutorials was about that, and I find the value of async / await over promises, even when implemented natively, to be pretty limited. However, lately, I've been using observablehq.com a lot, and when you use async iterables when processing large amounts of data it becomes insanely nice.

[@ZekeLnez]

Fun Fun Function fair enough. That makes sense. And thanks for the reply! As a side note, I've been a developer for about 15 years and I also came from a background of C# and Java. But I've always kind of hated JavaScript and other loosely typed scripting languages (though I've worked almost exclusively with it for three years now due to requirements of my job). But after listening to your musing on your opinion of JavaScript having come from a background of C#... I'm wondering if my dislike is coming from the stereotype of JavaScript not being a "real" programming language. As I dive deeper into it at work and grow even more comfortable with it. I completely agree with you. I feel far more productive with it. At the end of the day I consistently have something to show for it whereas with C# I could go a few days and only have laid the groundwork for a future awesome feature... thanks again for sharing your thoughts and wisdom. I watch every week.

[@marijanikolic4546]

That sexy voice is still there I hear... :D Will there be more videos about functional programming? Or maaaaybe something about ReasonML? :) Thanks for keeping learning and confusion fun :)

[@alvechy]

10:03 :D you're the best

[@Blast-Forward]

5:06 20:40

[@goodev]

You are awesome

[@venil82]

Not covered, yield can return value passed from outside world

[@piotr-ciazynski]

This video is much much better and clearer than your previous video about generators, here: kzbin.info/www/bejne/l6XImI2nra2esJY I think the video which you made two years ago is more about how async/await work under the hood using generators, not about generators itself, right? But this year is much better, you clearly explained what iterators are, and then you explained what generators are, without bothering about promises. Thanks!

[@funfunfunction]

Yep. Two years of learning both for myself and the community. When it arrived on the scene people basically used them to implement async/await.

[@MrPlaiedes]

I dig this episode a lot but while(true) feels wrong, even if just for explaining iterators..

[@funfunfunction]

It's not just for explaining them - it's really how you do it. It's feels a bit weird, yes, but in a world that is pausable it makes a lot of sense.

[@jonathanfoster746]

Hurt your hand?

[@funfunfunction]

yeah, have no idea how

[@ulissemini5492]

who else saw "dragon army" and thought of enders game?

[@GalaxiaDeFavio]

Hey

[@ognjetina]

what the hell bite you on your hand...

[@ognjetina]

actually I don't wanna know...

[@funfunfunction]

I have no idea, to be honest :)

[@glitch3dout]

First

[@mrgerbeck]

I prefer a more functional style. Simply define a function returning a function that returns your items

[@funfunfunction]

That would not be an accurate translation to functional style. The functional variant of a generator would be a stream, i.e. a function where you pass in a callback function that gets called for every item in the stream. I have an episode on streams here (kzbin.info/www/bejne/i3WVlY2tbs57ecU) You might ask - why not just return the items - i.e. process all the items at once? There might be many reasons, but the most common one where we use a stream or generator is if we can't process everything at once in memory, for example, if we're processing a 400GB dataset.

[@mrgerbeck]

I mean something like this, it does maintain state in this simple example so its not "pure" const getSuperHeroes = ( era, offset = 0 ) => async () => fetchSuperHero( era, offset++ ) const nextOldSchoolSuperHero = getSuperHeroes(OLD_SUPERHERO_COLLECTION) const foo = await nextOldSchoolSuperHero()