9-ES6++: Generators

Generators

In ES6 we have a new type of function, which is called generator. A generator is a function that can be paused and resumed, which means that a generator can produce a sequence of values

Creating a generator

To create a generator, we use the function* syntax:

function* generator() {
  yield 1;
  yield 2;
  yield 3;
}

Here we defined a generator called generator, that generator contains three yield statements. A yield statement is used to pause the generator and return a value.

Using a generator

To use a generator, we call it like a normal function:

const gen = generator();

Then we can use the next() method to get the next value from the generator:

console.log(gen.next()); // { value: 1, done: false }
console.log(gen.next()); // { value: 2, done: false }
console.log(gen.next()); // { value: 3, done: false }
console.log(gen.next()); // { value: undefined, done: true }

As we can see, the next() method returns an object with two properties, value and done. The value property contains the value that was returned from the generator, and the done property is a boolean that indicates if the generator has finished or not.

Using a generator with a for...of loop

We can use a generator with a for...of loop to get all the values from the generator:

for (const value of generator()) {
  console.log(value); // 1, 2, 3
}

Using a generator with the spread operator

We can use a generator with the spread operator to get all the values from the generator:

console.log(...generator()); // 1 2 3

What is the purpose of using generators?

Generators are useful when we want to produce a sequence of values, for example, we can use a generator to produce a sequence of numbers:

function* numbers() {
  let i = 0;
  while (true) {
    yield i++;
  }
}

Here we defined a generator called numbers, that generator contains an infinite loop, and in each iteration we yield the value of i and then increment it.

Now we can use the numbers generator to get a sequence of numbers:

const gen = numbers();
console.log(gen.next()); // { value: 0, done: false }
console.log(gen.next()); // { value: 1, done: false }
console.log(gen.next()); // { value: 2, done: false }
console.log(gen.next()); // { value: 3, done: false }

It will keep producing numbers forever.

Real World Example in Javascript

Let's see a real world example of using generators in Javascript. We will use generators to create a range function, that will produce a sequence of numbers:

function* range(start, end) {
  for (let i = start; i <= end; i++) {
    yield i;
  }
}

Here we defined a generator called range, that generator contains a for loop, and in each iteration we yield the value of i.

Now we can use the range generator to get a sequence of numbers:

for (const value of range(1, 5)) {
  console.log(value); // 1, 2, 3, 4, 5
}

But why not using a normal function?

We can use a normal function to produce a sequence of numbers:

function range(start, end) {
  const result = [];
  for (let i = start; i <= end; i++) {
    result.push(i);
  }
  return result;
}

Here we defined a function called range, that function contains a for loop, and in each iteration we push the value of i to the result array.

Now we can use the range function to get a sequence of numbers:

console.log(range(1, 5)); // [1, 2, 3, 4, 5]

So why not using a normal function instead of a generator? The answer is that generators are lazy, which means that they don't produce all the values at once, they produce the values only when we need them.

Which means that if we have a very large sequence of numbers, we can use a generator to produce the numbers one by one, instead of producing all the numbers at once.

This will reduce the memory usage, and will make our code more efficient.

🎨 Conclusion

In this article, we talked about generators, and how to use it and why we should use it.

☕♨️ Buy me a Coffee ♨️☕

If you enjoy my articles and see it useful to you, you may buy me a coffee, it will help me to keep going and keep creating more content.

😍 Join our community

Join our community on Discord to get help and support (Node Js 2023 Channel).

📚 Bonus Content 📚

You may have a look at these articles, it will definitely boost your knowledge and productivity.

General Topics

• Event Driven Architecture: A Practical Guide in Javascript
• Best Practices For Case Styles: Camel, Pascal, Snake, and Kebab Case In Node And Javascript
• After 6 years of practicing MongoDB, Here are my thoughts on MongoDB vs MySQL

Packages & Libraries

• Collections: Your ultimate Javascript Arrays Manager
• Supportive Is: an elegant utility to check types of values in JavaScript
• Localization: An agnostic i18n package to manage localization in your project

React Js Packages

• useFetcher: easiest way to fetch data in React Js

Courses (Articles)

• Node Js 2023 Course: Node With Typescript, The Ultimate Guide
• React Js: Let"s Create File Manager With React Js and Node Js