Learn JavaScript Generators In 12 Minutes 

At 8:30, rather than using a for-loop, you can use the _yield*_ keyword because it lets you yield over iterables such as arrays, strings, etc. Hence the code at 8:30 can be succinctly written: function* generator(array) { yield* array; } Side note: An arrow generator function does not exist.

Generators are useful when it's expensive to do each step of the yield. E.g., if you're hitting an API endpoint on each yield and you don't know how many results users will want, you can delay those API calls until they're actually needed.

I personally never had a need to use a generator in JS. Still interesting content .

Just on Tuesday, I had an interview, and the interviewer asked me about generators. Unfortunately, I forgot about them, but passed the interview. Great stuff to revise, thanks!)

Very interesting tutorial. 👍🏻👍🏻 I think at 8:05 it should have been while (object.next().done === false) Or simply while (!object.next().done)

this is exactly what i am looking for ..I once saw this in redux saga but never truly understood how they work and proper use case.. but you explained it very simply and help to find use case and wow just clicked in mind that I need exactly something like this

I've been DYING for you to make EXACTLY this! Thanks!

I found only 3 useful use cases for generators: - iterators - multiple returns from function (events, progress ...) - chunk huge workload over multiple animation frames

Incredible video as always, can't wait to see you reach 750K soon! :)

Tks só much! Best tutorial

As usual, great and simple explaination. Thank you

Kyle saves the day again! Thank You!... Just trying to get into Redux-Saga, so that was really helpful.👍

I've used generators some time ago. Mainly for learning purposes. Some Use cases for me were (mainly implementing Symbol.iterator so that I can use for of loop and rest operator): 1. If you want your object to have a working iterator, so that you can use for of loop in your object. Example: const company = { employees: ["kat", "manuel", "kris"], [Symbol.iterator]: function* employeeGenerator() { let curEmp = 0; while (curEmp < this.employees.length) { yield this.employees[curEmp]; curEmp += 1; } for (const emp of company) { console.log(emp); // "kat", "manuel", "kris" } 2. You can also use a spread operator if you implement symbol.iterator with a generator function. const someIterable = {}; someIterable[Symbol.iterator] = function* () { yield 1; yield 2; yield 3; }; console.log([...someIterable]); // you can spread the object like this 3. You can also parametrize your generator function and, for example, iterate over your iterable with some phrase: function* countFruit(phrase) { const fruits = ["apple", "banana", "peach"]; let curIndex = 0; while (curIndex < fruits.length) { yield phrase + fruits[curIndex]; curIndex += 1; } } const fruitIterator = countFruit("A nice: "); console.log(fruitIterator.next()); // A nice apple... console.log(fruitIterator.next()); // A nice banana... console.log(fruitIterator.next()); // A nice peach...

A single take, to the point, nails the explination in an understandable way. Are you actually a robot? Your content is always the go-to when I'm having trouble with a pluralsight module.

This is the heart and soul of LINQ and delayed execution. I need to write a LINQ-like package. That would be so much fun!

Very clear! Thank you so much man!

You can make a separate video comparing generators to the components from popular JS frameworks. All of them are of the same nature - a function with an internal state.

I happened to see it with React's Redux, But only now have I got to know real use cases. Thanks a lot for useful info

Interesting... I learned something new today.

Thank you sir, your contents are always helpful. Keep the good work, well done

Very well explained. Thank you making such useful and informative videos

I love ur videos it really helps Thank u so much for these tutorials

I feel like it's best used for large scale applications with many interdependent systems waiting on a signal to continue to their next step in an infinite or very long cycle. This seems like a niche but very powerful tool that can't be easily replaced and I'm sad I can't figure out any other common use cases that map/acc already don't fill since it looks fun to implement.

I have used generator in a situation where I wanted to merge two arrays and do some mapping action on it. Generally you would need an extra variable to hold the result and pass it to the caller. But with generator you don't have to. Yield the line where this transformation happens and where it is called you can do a array.from

This might come handy in creating something like a mock API for testing your system or as a placeholder.

Thx for video, explanation for fancy Reflect would be amazingly usefull :)

Great explanation, thank you.

JavaScript also includes the yield* keyword which allows recursive generator functions. I've used this before with graph traversal. Here is an example of a simple binary tree class with a recursive preorder generator: class TreeNode { constructor(value) { this.value = value this.left = null this.right = null } *preorder() { if (this.left !== null) { yield* this.left.preorder() } yield this.value if (this.right !== null) { yield* this.right.preorder() } } } const root = new TreeNode(4) root.left = new TreeNode(2) root.left.left = new TreeNode(1) root.left.right = new TreeNode(3) root.right = new TreeNode(6) root.right.left = new TreeNode(5) root.right.right = new TreeNode(7) console.log(...root.preorder())

Thanks so much for the video. It's really good.

I first heard about generators in Python and the concept seems quite nice (although haven't done much Python since to use them yet). Should allow for less resources tied up at once and cleaner code since you don't need to call a function from a function (since it just returns the latest result to whatever called it who can then do what it wants with it).

Thanks a lot, very clear explanation

Oh, you didn't talk about the coolest part that is you can loop through the generator values with a for loop and collect the values with the spread operator

Thanks, It really helped a lot.

Great video! Appreciate it!

after C# with those IEnumerable, IEnumerator and yield which under the hood creates its own enumerator this is so easy )

Great video. Thanks!

Brilliant explaination

using it for frontend pagination could be an option actually

Good explanation 👍🏼

i don't know why this channel is not growing😕 man, good work really appreciate

Great explanation.

To make it more obvious (to me) that yield can do two operations (return a value and insert a value via .next) would be like "const increment = yield id || 1; id += increment" Great video. 👌👍👏

Good video as always!

What a perfect explanation

After many youtube videos I watch explaining about generator, this one most accurate! Finally i can move on 😂

Seriously Awesome content

You are amazing bro!

For the example array, you could simply `yield* arr` or any other iterable for that matter l, including other generators

just a nitpit suggestion: if you turn up the ‘release’ parameter on your gate, the vocal audio would sound much smoother.

Great content! :)

Hello Kyle, can we have a video in how to create a custom debugger for javascript ?, That'll be more interesting... ✌🏼 And also love your content ❤️

your channel is the best bro

A cool use for these would be to return different class names or other animation/styling behaviours, where excessive code is not needed. Simple just yield return another class when clicked on something.

got to use this at work and it just fit the solution

Very nice!

I think it has a lot of benefits for example if you want to create multiple steps bar component that contains step 1, step 2, ...etc

Kyle you are the best!

Very good tutorial

Best youtube channel for Js

Nice explanation

Great content, one question though, why you don't use semicolons? Lack of semicolons would work in all js scripts?

Great content..

Awesome video! but there is some problem with your microphone or the controller IG

HI, I'm following your videos lately, and I liked them a lot. I wonder if you can make a new video about "generator composition" because its idea is not very clear to me. Thank you.

Thanks a lot.

Lovely content❤️❤️❤️❤️❤️

It would be useful if you do a video on co npm module. I saw thatused in many places, but it is hard to understand

You can also function* gen(){ yield...... } let g = gen() arr = [...g] console.log(arr) or console.log([...g)

Thanks!

i think we can use generators also for submiting form. First validate the input fields after call next and send request to api

So, basically what Tim Corey said on his video few days ago about Yield in C#

The best tutorials

Could you please make a video on Symbol.asyncIterator and how they are useful?

ECMA needs a more universal standard . We’re working on it but thanks babel for getting up ahead

I want to make a blog site eventually and use a CMS to manage the site which one do i pick contentful strapi or ghost which is the best one

Is there any difference between creating a generator function and creating an object that implements the iterator protocol? Or is it like async await and .then, .catch that they are syntactically different but allow you to do the same thing?

thank u so much

you forgot about one thing. you can spread generators like so [...getenaror()]. Or your can spread all objects witch have Symbol iterator in it like so [...{ [Symbol.iterator]: generator }]

At 7:30, unfortunately when you express Object.next() to check the done property, you're releasing the value and won't have access to it again inside the while loop without some assignment.

SIR THANK YOU FOR EXISTING

Awesome. Thanks. But I didn't understand at 10:33 how passing a value to yield affected the response of the same iteration.

Thanks bro

at 10:17 how do we go below our line of code then back above to yield the new id ?

So I can see the value with generating id's and with iterating over arrays. Any other real-world use cases? I'm asking because offhand I can't think of any.

Is this only aplicable for JS or is it possible in TypeScript as well, say Angular? What would the syntax be?

Amazing explanation! But I am confused why do we need not to do strict comparison? I mean the code from the video works fine (I am talking about the generateId() example) but when I write it down with a strict comparison, e.g. increment !== null I yield only 1 and the rest is undefined and done. Why is that?

The infinite loop like you showed it could be written as a closure instead of a generator too, right?

Should we use it in backend for creating id's ?? Any pros/cons ??

Thanks mr Kyle (i dont know if you noticed each time my comments on your vid) but this time you did not cover "yield delegation" neither async generator...

Thanks

Can this replace recursive function call?

As Douglas Crockford said, everything you can do with generators, can be easily done with just functions, if you understand how to use closure

very good

Make a video about symbol type in JS please 🙏

Nice, What is prototype in JS

I imagine myself using this in a 3 step checkout shopping cart using an api for example

exactly the same as 'yield return' in C# which creates an object of type IEnumerable

So when you’re passing a number to next(), you don’t need to add parameters to the generator function for it to take that number as an argument?

It would have been nice to have an example of while(!generator.next().done) {} where you still access the value. It is not obvious how to do that, except something like: while(!(result =generator.next()).done) { value =result.value; ... } That seems cumbersome

Hi Kyle, do you have certification for your courses?, basically a certificate of completion