DEV Community

Cover image for 9-ES6++: Generators
Hasan Zohdy
Hasan Zohdy

Posted on

 

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;
}
Enter fullscreen mode Exit fullscreen mode

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();
Enter fullscreen mode Exit fullscreen mode

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 }
Enter fullscreen mode Exit fullscreen mode

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
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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++;
  }
}
Enter fullscreen mode Exit fullscreen mode

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 }
Enter fullscreen mode Exit fullscreen mode

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;
  }
}
Enter fullscreen mode Exit fullscreen mode

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
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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]
Enter fullscreen mode Exit fullscreen mode

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

Packages & Libraries

React Js Packages

Courses (Articles)

Top comments (1)

Collapse
 
fruntend profile image
fruntend

Π‘ongratulations πŸ₯³! Your article hit the top posts for the week - dev.to/fruntend/top-10-posts-for-f...
Keep it up πŸ‘

Visualizing Promises and Async/Await 🀯

async await

☝️ Check out this all-time classic DEV post