JavaScript Generators and how it works

What is Generator

• Generator in ES6 is a new way of working with functions and iterators.
• It appears to be a function but behaves like an iterator which simplifies the task of writing iterators.
• It is different from a normal function in a way that it can stop midway and then continue from where it stopped.
• In layman’s terms, It is similar to the way we put marker/bookmark to a page of the book we read. Then later we resume reading the book from that particular page instead of start reading all over again. Here we acted as a generator function.
• It can generate a series of results instead of a single value.

Generator Syntax

• Creating a generator is similar to normal function with some differences that it requires a * between function keyword and function name.
• It allows any number of spaces or no spaces in between.
• It uses a yield keyword to pause and resume the execution.
• Since it is just a function, we can use it anywhere like normal function i.e. inside objects and class methods.
• Basic syntax:

Yield in Generator

• yield keyword is used to return the data and pause the execution of the generator.
• Every time generator encounters a yield, it halts the execution at that point and returns the value specified.
  Then resumes the execution on calling the next() method on Generator object until it finds the next yield.
• In the context of Generator, we do not say that it returned a value. We say that it has yielded the value.
• Using return inside a Generator will set done property to true after which it cannot generate any more values.
  All the codes after the return statement will not execute.
• Syntax:

next() in generator

• Generator returns an object on which we can call next().
• Every invocation of next() will return an object containing returned value and status of generator execution.
• value property will contain the value and done property will be true or false mentioning generator’s execution status.
• When done becomes true, generator stops and won’t generate any more values.

• Sample code: ( jsfiddle link: generator example )

• Below example shows the different state of a generator during its execution of how it gets suspended when it is yielded, resumes on next() call and then gets closed after all execution:

• If we use return then it will not execute any code present after the return statement.
  Sample code: ( jsfiddle link: generator with return statement )

• We can also pass values to next().
  Sample code: ( jsfiddle link: next() with value passed )

Why use Generator

• Implementing Iterables:
  Implementation of an iterator in JavaScript requires things to do manually like:
  - Manually create an iterator object.
  - Manually implement next() method.
  - Manually make return object of next() in the format: { value: Any, done: true|false }
  - Manually save the state.
  - Below sample code shows how hard it is to manually implement everything in an iterator and how easy it is with Generator which handles most of the things on its own.

With Iterator

With Generator

• Lazy execution:
  Generator helps to delay the evaluation of an expression until its value is required.
  So If we don’t need a value, it won’t exist and is calculated only we need it.
• Memory efficient:
  It is memory efficient because we generate only the values that are required.
  We need to pre-generate all the values in case of normal functions and keep them in case we use them later but generators can defer the computation of any expressions/codes until we need it.

Limitations

• Generators are one-time access only. Once you’ve exhausted all the values, you can’t iterate over it again.
  To generate the values again, you need to make a new generator object.
• Generators do not allow random access as possible with arrays. Since the values are generated one by one, accessing a random value would lead to computation of values till that element. Hence, it’s not random access.

I hope you will get some idea of JavaScript Generator and its basic functionalities from this post.

Happy coding!!!