The generator type in JavaScript is often left undiscussed. This is because there are few scenarios when you would actually want to use it. However, that does not negate the usefulness of the feature — Because when these scenarios do eventually crop up, you’ll be glad to have generators under your belt.

Like most things in programming, the Generator type is just a tool; In this case, a specialist tool.

Let’s have a look at an example of a Generator in action and then walk through each step and see how it’s working:

Here is a Generator defined. You’ll notice it’s very similar to a regular function except for the fact that we have a * and a yield keyword. * tells JavaScript that this is a generator function. We’ll discuss what yield does in a minute. First let’s show an example of the generator in action:

Our someGenerator returned an iterator, giving us access to a next method. Each time we call next, our function will run our code until it encounters a yield statement. When we encounter a yield statement we will pause execution until next is called again. When the someGenerator finishes executing, the next time we call next we will recieve an object that has a key of done with a value set to true.

Pretty neat right? Well the returned iterator actually allows us to do more than just that. We also get access to for…of statements as well as other iterator methods such as the spread operator:

Now we know the basics on using generators, let’s see some use cases. A common use case would be maintaining state for an id generator that is based on an index. Say we have a map/object of items and we want to expose a function that allows a user to add an item to this map — Each item should have a unique ID based on the order in which it was inserted. We can achieve the ID generation through generators:

Another example would be in abstracting UX flow into a single function. Imagine we have a UX design; A user clicks on a button, then we do some calculations, then after the calculations are done we want to show another button, then after clicking that button we do some more calculations, then we refresh the window.

We could put this all into a single function but it may get pretty confusing. Instead, because we know the order in which our UX design flows, we can use generators:

Here we have successfuly isolated our UX design and our logic. This makes for easier testing, readability and consequently, maintainability. Each time we finish our calculations, we show the next stage in the UI.

Conclusion

It’s not often you need generators but when you do, you’ll be glad you had them — They help asbtract iteration and provide a clean solution to when lazy evaluation of ordered values is needed.