Starting with JS generators

I will show you what a generator is and some simple examples that can help you understand them

Photo by American Public Power Association on Unsplash

What’s a generator?

A generator is similar to a function in terms of syntax. That’s why they are called Generator functions. When used, this function doesn’t immediately execute its code, it’s just returning an object of type Generator. The execution of a Generator is not continuous and there is a set of properties that allow you to interact with noncontinuous behaviours.

Let me see one of those Generator functions

Here we go! This is a function with a * after the function keyword:

function* myFancyGenerator(i) {
  ...
}

This function stops and waits every time there is a yield in the code:

yield 'my value'; // my generator will stop there

Combining those examples you obtain a thing like this:

function* myFancyGenerator(parameter) {
  yield parameter;
}

Using a generator is the tricky part. We need to create an iterator:

const useGenerator = myFancyGenerator(42);

The generator function won’t return the parameter that we have passed to it. Instead it will return an object of type Generator.

Now useGenerator contains an iterator.

console.log(useGenerator);
/* Will log this: */
myFancyGenerator {<suspended>}
 __proto__: Generator
 [[GeneratorLocation]]: VM1814:5
 [[GeneratorStatus]]: "suspended"
 [[GeneratorFunction]]: ƒ* myFancyGenerator()
 [[GeneratorReceiver]]: Window
 [[Scopes]]: Scopes[3]

You can obtain what expected from the function using the .next() property.

.next() will simply return the next yielded value. If we have just one yield the function will return the single yielded value.

function* aNumber(theNumber) {
 yield theNumber;
}
/* Use the generator and put it in a constant */
const sum = aNumber(2);
/* Use the next property */
sum.next(); // output {value: 2, done: false}

We can also have more than one yield. For example:

function* generator(parameter) {
  yield parameter;
  yield parameter + parameter;
}

What will happen if we use .next() two times?

function* sumNumber(theNumber) {
 yield theNumber;
 yield theNumber + theNumber;
}
/* Use the generator and put it in a constant */
const sum = sumNumber(2);
/* First iteration */
sum.next(); // output {value: 2, done: false}
/* Second iteration */
sum.next(); // output {value: 4, done: false}
/* We should try a third time */
sum.next(); // output {value: undefined, done: true}

We have passed the value 2 to the generator. Using the .next() property the first output is an object with the property value: 2 but the generator will also tell you that its job is not finished yet.

The generator knows that there’s another yield remaining, so the done property is false. We tried a second iteration and the returning value is another object { value: 4, done: false }. The value property is evaluated with the result of the sum theNumber + theNumber and the done is still false. To see the end of the generator iterations, you have to use .next another time and the returning object is { value: undefined, done: true }.

A little step further

We have seen the basic usage of a generator but we can push this a little bit further. The last example has a limited number of steps until is finished and not iterable anymore.

What if I told you that a generator can also contain an infinite loop?

function* powNumber(theNumber) {
 let i = 0;
 while (true) {
  yield Math.pow(theNumber, i++);
 }
}

This generator returns the number raised to the power of i that starts from 0. At every iteration the value of i is raised by 1.

Those are the returning object values:

pow.next();
// {value: 1, done: false}
pow.next();
// {value: 2, done: false}
pow.next();
// {value: 4, done: false}
pow.next();
// {value: 8, done: false}
pow.next();
// {value: 16, done: false}
pow.next();
// {value: 32, done: false}
pow.next();
// {value: 64, done: false}
pow.next();
// {value: 128, done: false}
...

This is possible because an iterator preserves the state inside itself, in this case the value of the variable i. Iterating this way it will never return done: true as property because of the number of yield is not limited. This means that you can iterate as many times as you want.

Another common example is the iteration over a list where each step returns the next element in the array.

There are libraries that are using generators in advanced ways, for example, they can handle asynchronous things:

• https://redux-saga.js.org/
• https://github.com/tj/co

Conclusions

Before writing this article I’ve never used a generator in my own code — only with the implementation of sagas. I think it’s worth to know what is going on under the hood and try to use them also in regular code.

A little more performance is always appreciated, especially with a large amount of data to display on the page.

Thank you for reading and if you liked it claps are appreciated! 👏
Until next time, code wisely.