[ES6] 14. Generator -- 1. yield & next()

Generators in ECMAscript 6 are first-class coroutines that produce encapsulated suspended execution (暂停执行) contexts.

Yield values and iterate over them until no more values exist in the generator.

 

You use generator by adding a * after function keyword:

function* greeting(){
   console.log(`You should call next()`);   
}

greeting(); // Nothing happens

When you call greeting(), you will find nothing happens. 

 

For better understaning what happened, let console out what greeting() returns:

function* greeting(){
    console.log(`You called 'next()'`);
    yield "hello";
}

let greeter = greeting();
console.log(greeter); //{next: [Function], throw: [Function]}

What you can see is greeter is actually an object. It didn't invoke:

console.log(`You should call next()`);  

 

Call the next():

function* greeting(){
    console.log(`You called 'next()'`);
}

let greeter = greeting();
let next = greeter.next();
console.log(next); // {value: undefined, done: true}

When calling the next(),

 console.log(`You called 'next()'`);

are invoked, and the value of the next is undefined and done = true.

 

Why value is undefined?:

Because we didn't call any yield statment.

Why done is ture?:

Because it has gone thought all yield statmens (0 = gone thought)

 

So let us add yield statment:

function* greeting(){
    console.log(`You called 'next()'`);
    yield "hello";
}

let greeter = greeting();
let next = greeter.next();
console.log(next);  // {value: "hello", done: false}

From the output we see, value has been chaned to "hello", but done is false.

So why done is false?:

Because we should call next() to make sure we have gone thought all the yield statmenets.

 

So let us add next() again:

function* greeting(){
    console.log(`You called 'next()'`);
    yield "hello";
}

let greeter = greeting();
console.log(greeter); //{next: [Function], throw: [Function]}
let next = greeter.next();
console.log(next); // {value: "hello", done: false}
let done = greeter.next();
console.log(done); // {value: "hello", done: true}

 

Example:

function* greeting(){
    console.log(`Generators are "lazy"`);
    yield "How";
    console.log(`I'm not called until the second next`);
    yield "are";
    console.log(`Call me before "you"?`);
    yield "you";
    console.log(`Called when "done"`);
}

let greeter = greeting();
let next = greeter.next(); // Generators are "lazy" {value: "How", done: false}

 You can see that it stop at the first yield. It won't go to next until you call next();

 Meaning that you can put stuff in here (after the first yield) that's not created until you explicitly need it.

If add next() three more times, all statments will be output.