A Quick Guide to JavaScript Generators
Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp
Share on email

A Quick Guide to JavaScript Generators

JavaScript Generators are a fairly new addition to JavaScript, yet they have already proven themselves extremely powerful. This post will give you an overview of what generators are and how they can help make your code more robust by alleviating some common errors.

Generators allow you to write asynchronous code that looks synchronous, and the best part is that it’s easy! You need to wrap your code in a generator function and yield when you want control back from the iterator. We don’t block our main thread this way while waiting for something like AJAX requests or timeouts, which is really important!

✍️ Here’s a simple analogy ✍️

Imagine you are reading an action book, and suddenly your doorbell rings. This is the pizza guy. You get up. However, before you do, you set a bookmark on the last page you read. Once you return, you start the book from the page where you set the bookmark. You don’t start it from scratch. In a sense, you acted as a function of a generator.

👇 How does it Work? 👇

🧵 Calling a generator does not execute the function completely as soon as it’s called. It will return an iterator object that can be used to use the function.

🧵 So this function can be executed part by part, where the yield expression decides these parts.

🧵 To execute these parts, the .next() is used on the iterator. When .next() is called, the function resumes execution until the next yield is found, or the function completes, or a return statement is executed.

🧵 Every time you execute the .next(), the generator returns an object that The value here is the value sent by the yield and the done indicates if the generator has run completely.

// 🎯 Create generator using JavaScript 🎯
function* myGenerator() {
    console.log('invoked 1st time');
    yield 1;

    console.log('invoked 2nd time');
    yield 2;

    console.log('invoked 3nd time');
    yield 3;

// 🎯 Assign generator to a variable 🎯
const myGeneratorValue = myGenerator();
console.log(myGeneratorValue.next()); //👉'invoked 1st time' { value: 1, done: false }
console.log(myGeneratorValue.next()); //👉'invoked 2nd time' { value: 2, done: false }
console.log(myGeneratorValue.next()); //👉'invoked 3nd time' { value: 3, done: false }

// 🎯 This call doesnt return yield because the generator has finished 🎯
console.log(myGeneratorValue.next()); //👉{ value: undefined, done: true }

Conclusion 🎁

The JavaScript Generators are a new addition to the language that offers a unique way of working with asynchronous code. In this guide, we’ve covered one of the most important concepts in generators, how they work and why you might want to use them. Hopefully, by now, you have an idea of what generator functions do and when it’s appropriate for your project! Thanks for reading, happy coding!

Recent Snippet

How to use reduce over an array of objects

To get the maximum or the minimum value from an array, we can use Math.max() and pass as arguments the numbers from which we want to pick.

How to get the highest or the lowest value in an array

To get the maximum or the minimum value from an array, we can use Math.max() and pass as arguments the numbers from which we want to pick.