Understanding Generators in JavaScript
By: Mehdi Aoussiad
Tags: Javascript Tips, JavaScript, Web Development, Programming, Coding

Understanding Generators in JavaScript

Photo by Nubelson Fernandes on Unsplash

Introduction

Generators look like a normal function, but it allows us to pause the execution of the function and continue it later. Maybe you have heard about this feature in ES6 or you just didn’t have time to play with it. However, it is something that you need to understand.

In this article, we will learn about the generators in JavaScript with some practical examples. Let’s get right into it.

Generator functions

Generator functions provide a powerful alternative: they allow you to define an iterative algorithm by writing a single function whose execution is not continuous.

So below you can see an example of the generator and we will break it down to see how it works:

function* avengersGenerator() { // Declaring the generator

yield "Hulk"; // Pausing the execution

yield "Thor";

yield "Iron man";

return "Ultron"; // Example of finishing the generator

yield "Spiderman";

}



const iterator = avengersGenerator(); // Creating iterator



iterator.next(); // Iterating on the generator

Generators look similar to a normal function, the only difference is that we have to define an * (asterisk) after the keyword function .

function* avengersGenerator() {

...

}

The keyword “yield”

We can yield the function, which basically would stop the execution of the function when it gets to the first yield .

Here is an example:

function* avengersGenerator() {

yield "Hulk" // The execution would pause here.

yield "Iron man" // When we resume we would start here.

}

As you can see, the keyword yield is used to stop the execution of the function.

Creating the iterator

On the iterator, we can simply call our function. So by this, we will prepare our generator for action.

Here is an example:

const iterator = avengersGenerator();

So, the iterator is very important for generators. Specifically, an iterator is any object which implements the Iterator protocol by having a next() method that returns an object with two properties:

The property value which is the next value in the iteration sequence. And the property done which is true if the last value in the sequence has already been consumed. If the “value” is present alongside “done”, it is the iterator's return value.

The next method

This enables us to continue the execution of the function. Also, this method provides us with the object with the yielded value and whether the generator has yielded its last value, as a boolean.

Here is an example:

iterator.next(); // [1] Object {value: "Hulk", done: false}

iterator.next(); // [2] Object {value: "Thor", done: false}

iterator.next(); // [3] Object {value: "Iron man", done: false}

iterator.next(); // [4] Object {value: undefined, done: true}

Return / Exiting

Once a return is being called, it would finish the generator. It basically sets the done property to true .

Here is an example:

function* avengersGenerator() {

yield "Hulk";

return "Ultron"; // Example of finishing the generator

yield "Thor"; // Sad Thor and Spiderman wouldn't be called

yield "Spiderman";

}



iterator.next(); // [1] Object {value: "Hulk", done: false}

iterator.next(); // [2] Object {value: "Ultron", done: true}

Conclusion

As you can see, generators are quite a cool thing to play with, or at least to know what it does. Make sure that this is just an introduction for generators, I encourage you to learn more from the MDN documentation.

Thank you for reading this article, I hope you found it useful.

More Reading