ES6 introduced something cool called generator functions 🎉 Whenever I ask people about generator functions, the responses are basically: "I've seem...
For further actions, you may consider blocking this person and/or reporting abuse
This visualization series is so good. I can totally relate to the context! Thank you for doing all the hard work 😁
PS: Like I said earlier, "better than my college professors!" 😛
Very nice explanation and visualizations of the code. Well done. But I am still missing valid use cases where to use the generator functions in "real" applications, because your last example can also simple and efficient realized by using the es5+ features (flatMap and find):
Maybe I have to explicitly search for some use cases and dive a little deeper into this topic, until I finally have the "ahhhhh" effect :)
Your example works when we already have the all data available (to give
bookclubsa value) and for datasets that aren't too big. However, we would be storing the entirebookclubsarray in memory, which is something we sometimes want to avoid when working with a lot of data which might be useless.A good example for which I often use generators is decoding a stream. In your example, we'd have to wait before we've received the entire stream before we can start decoding it (in order to give
bookclubsa value). By iterating over smaller pieces of the stream, and decoding these smaller pieces, we can already start decoding it right from the beginning instead of having to wait. If you're looking for a specific piece of data that may be right at the beginning of the stream, it means that we don't have to callnextagain and don't have to use more memory in order to store the rest of our data, which would be useless.(Although this is a micro-optimization which doesn't matter in most cases, I'm also not sure about performance of
flatMapwhen working with larger, deeply nested datasets.)const findbook = (bookID) => {
for(var i=0; i<members.length; i++)
for(var j=0; j<member[i].Books.length; j++)
if(members[i].Books[j].id == bookID)
return members[i].Books[j];
}
findbook("ey812");
Shouldn't the return statement just finish execution if/when book is found?
I think so, for loop seems the same flow with generator function for above book club example.
Ok now i got the point, makes sense. Thanks! 👍
My understanding is if we use flatMap will flatMap the whole block of dataset? then find the book.id===id?
But if we use generator yield* iterateClubMember(bookClub.clubMembers)
Then if seems will like recursive first jump to index 0 of clubMmebers, and same step
yield* iterateBook(clubMember.books)
go in the index 0 index 0 books, if found books id===id, return?
The worse situation is we yield till end of the whole dataset, the perfect case is the id is 0 index of the 0index for clubMmmber, and got the book.
Am I correct?
This is the most insane kung fu magic ever. Thank you for explaining this. Very useful. The visual animations are very good too, definitely think you would be struggling to explain it without the animations to assist :)
Teach them
reduce, teach themreduce!Wow, awesome work with all these animations (and emojis) 🆒! It really helps me understanding the concept. I think there would be no way of understanding it without visuals. Keep on that great work!
You know, I have read all the previous Visualized articles and I was like, "This is really great content" but I never commented until now.
This is by far the best content I have encountered about generators. In the past, I'd read everything I encounter about generators and be like, "someday it will all come together and I will get it".
This article wiped all that content out and gave me insightful and actionable knowledge.
Keep up the great work and your ability to distill the information, amazing!!!!
Thank you so much!
Hey love this series! This was one topic I had trouble diving into. Thanks!
Also, I think the last example has a small mistake. If the book you're looking for is the very last book, then the while loop will end before checking it.
Just a heads up that the Markdown we use here supports syntax highlighting, and is generally more accessible than inserting an image of code. Images of text are an issue for people using screen readers, for example, and their content won't get picked up by the site's search facility.
You can add code blocks with 3 backticks:
More details in our editor guide!
Love this series and more importantly your blog posts. From someone, who is relatively new to the dev world these posts are a god send. I'd love to know what you make the animations in, would love to use it for similar stuff in my own blog posts. 🔥
Ma'am, you are the GOAT! I'm telling you! You helped my brain cells.
Wow! The topic I avoided so long. Thank you, Lydia
I was doing a little exercise recently that this would've helped me very much on. Now I'll be able to simplify what I wrote very much. Thanks!
And yeah, I realize I'm reading this article late, but it's still just as helpful. This is pretty awesome. I bet there are a number of things I could refactor in a simpler way using these concepts...
Why not using break?
I have the same question. Still in the stage of "oh gosh no I've read so many blog posts about generator functions and I still don't get them"!
What do you use to create those amazing animations?
This is going to help to solve Project Euler problems, thank you!
hi, I didn't understand everything you wrote starting from ". It's actually because they implement the iterator protocol: the [Symbol.iterator]. Say that we have the following values (with very descriptive names lol 💁🏼♀️) :"
Very nice series! Continue like this. I can say now that i understand generators :) TY!
Thanks for the article. I really like your approach. 👍
I had already found the previous posts but I didn't have an account at the time.
Thank you for writing such wonderful posts!
This is great and it inspires me ❤️
For me "yield" is a nothing more then a fancier "return" statement.
And in your generator example I would use one of
find(),some(),filter(),reduce(),map().clubsshould bebookClubsHmm but in my opinion, you normally don't iterate through a very big data sets which is loaded either in stream or in whole, and resides in a JS object like bookClubs, that jobs is delegated to a SQL distributed query engine, that way you can do it much much faster. Or there are other use cases that iterating inside JS is a must?
I think there's maybe a minor correction, where you state that a Generator's return value is an iterator object since it follows the iterator protocol as they implement the @@iterator method stored in their key [Symbol.iterator] ... so, technically, an object follows the iterator protocol when they implement the next() method, and it follows the iterable protocol when it implements the @@iterator method.
By the way, I couldn't figure out when exactly can we call an object and iterator. What if an object implements just the next() method, or just the @@iterator method, will it be an iterator? Also, would it make sense to have just one of those methods ... I guess I'll keep reading more on it.
Anyways, thanks so much for posting such timeless, incredibly valuable, and easier to digest study materials :)
Hi Lydia
Does the iterators have more performance than array.filter/reduce on searching for data in a huge array? I mean, which one is the best, an interatior funcion or filter/reduce?
One thing how did you added those coding gifs ?
hi please give me the source code of this
This is so fun! Thank you!
Love it! Great explanation and gifs :)
Thanks for the detailed explanation of such confusing knowledge.
Looking forwards to more such visualization tut and the best part is demonstrating with real-world cases for us.
Thanks.
These are so cool @lydiahallie - how u dothis?
great style for real y'all.
These GIFs are amazing, thanks so much for this great content😋
with many thanks
hi
you said: ", a generator function returns an iterator " so why do you also say that " [Symbol.iterator] has to return an iterator"? I don't understand, please clarify for me.
Animations on point!
I'm sure many have asked before but why not just for each and then break; ?
everything looked good, except that symbol part
a lot of learning
Great explanation! Your visualizations are the best :D