DEV Community

Understanding Generators in ES6 Javascript

Tuan Phung ⚡️ on May 13, 2019

Maybe you have heard about this feature in ES6 or you just didn’t have time to play with it. It is something, that I have learned a few days ago ...

Read full post

Adam Crockett 🌀 • May 14 '19

I understand how they work, but I still have no idea where to use a generator.

Tuan Phung ⚡️ • May 14 '19

I will write another post with examples where generators come in handy

Adam Crockett 🌀 • May 15 '19

Seems people agree. Unrelated: I also hate that you can't restart a generator. Despite the initial spec saying you could.

Tuan Phung ⚡️ • May 20 '19

I finally got some time, so I wrote down one example for the usage of generators, hope that you'll enjoy reading it 👉dev.to/phung_cz/canceling-promises...

RouvenKruse • May 16 '19

The only scenario I can think of is using an asynchronous generator in combination with the "for await ... of" loop (developer.mozilla.org/en-US/docs/W...) when not using libraries such as rxjs.

Adam Crockett 🌀 • May 16 '19

Interesting! I didnt know about for await of and I thought I had mastered async await :/

zee786 • May 15 '19

redux-sagas used a lot of generator functions

Burdier • May 15 '19 • Edited

i did a very simple example:

function* AppleSale()
{
  var apple = 10;
  while(apple)
    yield apple--;
}

let sale = AppleSale();

console.log(`on stock ${sale.next().value}`);
console.log(`on stock ${sale.next().value}`);
console.log(`on stock ${sale.next().value}`);
//output:
//on stock 10
//on stock 9
//on stock 8
}

Tuan Phung ⚡️ • May 20 '19

I finally got some time, so I wrote down one example for the usage of generators, hope that you'll enjoy reading it 👉dev.to/phung_cz/canceling-promises...

Daniel Escoz • May 14 '19

You have an error in your return example: the value you return will be returned by the iterator's next call as a single {value: "Ultron", done: true}, not in two distinct steps.

Also, undefined should be between quotes, it's not a string but a specific value.

Tuan Phung ⚡️ • May 14 '19

Nice catch, just fixed that, thanks ;)

kurisutofu • May 14 '19

I didn't know about generators! interesting!

Tuan Phung ⚡️ • May 14 '19

I hope that you will try them out!

kurisutofu • May 15 '19

I will research them and probably will try to use them!
And I'll wait for the next article you mentioned in this one ;)

Tuan Phung ⚡️ • May 20 '19

I finally got some time, so I wrote down one example for the usage of generators, hope that you'll enjoy reading it 👉dev.to/phung_cz/canceling-promises...

kurisutofu • May 27 '19

I just read it and it was nice but to be honest, I still have trouble grasping how it could be more beneficial than other methods.
It's Monday and I haven't played with it so I'll revisit your article later and it will probably make more sense to me :)

Lars Klopstra ⚡ • May 14 '19

Typo in code snippet: yeild "Spider man";

Tuan Phung ⚡️ • May 14 '19

Fixed, thanks!

Antonio Quintero-Felizzola • May 17 '19

Loved the article! I was wondering if we can use more combinations in the yield part . I don't know, maybe callbacks? Is it possible?

function* avengersGenerator() {
  yield "Hulk";
  yield greeting
  yield "Spiderman";
}

function greeting() {
  console.log("Hi, Tuan!")
}

I have not tested it yet 😓

Tuan Phung ⚡️ • May 18 '19 • Edited

yes, we can! You need to any function there ;)

function greeting() {
  console.log("Hi, Antonio!")
}

function* avengersGenerator() {
  yield "Hulk";
  yield greeting()
  yield "Spiderman";
}

Frank Puffer • May 14 '19

Looking forward to your next post. What you have shown so far can be achieved much more easily with a simple array but I am sure there are better use cases for generators. I guess it gets more interesting when you don't know in advance how many values need to be generated.

Tuan Phung ⚡️ • May 20 '19

I finally got some time, so I wrote down one example for the usage of generators, hope that you'll enjoy reading it 👉dev.to/phung_cz/canceling-promises...

Cuong Bui • May 14 '19 • Edited

Thanks guy for sharing. Hope you write an article, how to apply generator for real usecases. Thanks again! And we can keep contact because I see your Vietnamese name :D

Tuan Phung ⚡️ • May 14 '19

Hey, haha sure, feel free to follow me on dev.to :D

Tuan Phung ⚡️ • May 20 '19

I finally got some time, so I wrote down one example for the usage of generators, hope that you'll enjoy reading it 👉dev.to/phung_cz/canceling-promises...

Rohov Dmytro • May 14 '19

Nice post, but I am wondering where to apply generators in real world.

What I got is that async / await syntax «abstracts» this stuff or it is not the case?

Tuan Phung ⚡️ • May 14 '19

Yep, will write about it in my next post ;)