Generators in Javascript

Do you know what lies under the hood of Async-Await ?

It is the generator function. Yes you heard it right it is the generator function !!!

What are generators in Javascript?

Generators are functions that can be exited and later re-entered. Their context(variable bindings) will be saved across re-renders.

Lets understand this in detail...

Calling a generator function does not execute it's body immediately, an iterator object for the function is returned instead. When the iterators next() method is called, the generator function's body is executed until the first yield expression which specifies the value to be returned from the iterator.

The next() method returns an object with a value property containing the yielded value and a done property which indicates whether the generator has yielded it's last value.

{ value: yield value, done: if last yield then true else false}

Calling the next() method with an argument will resume the generator function.

Not clear. That's perfectly fine. Let's go through a simple example to understand this better.

function * generator (i) {
yield i;
yield i+10;
}
const gen = generator(10);

console.log(gen.next().value); //output: 10
console.log(gen.next().value); //output: 20

Now lets see the working of this code:-

• When the generator function is called with 10 as it's argument the entire generator function is not executed.

• The execution stops at the line where it finds the first yield expression.

• Now to obtain the value of the yield expression we use next() method which returns an object with the value property and done property which sets to true only for the last yield expression in a generator function. So gen.next().value returns a value 10 and the value of done is false.

• Now the generator function is paused at this line. To re-enter and continue the execution of generator function we need to again invoke the next() method.

• So when we again execute the gen.next.value(), the yield i+10 expression will be evaluated and the value of 10+10 (i+10) will be assigned to the value property of next() method and the done property will be set to true now because there are no further yield expressions in the generator function.

You might be wondering how the function remembers the value of i=10 when the function re-entered. Recall what I mentioned in the beginning of the article!!! Generator function's context(variable binding) will be saved across re-renders. I hope now this statement is clear.

Summary:-

In simple terms generator function is nothing but a normal function with pause-play feature. The yield keyword can be considered as a pause button and the next() method can be considered as the play button.

Application:-

Generators combined with promises are a very powerful tool for asynchronous programming which in fact is the basis for async-await.

So that's it for this blog. I hope you have learnt something new. Cheers!!!