Basics of Generator functions in JavaScript
In this article, I will be showing you the basics of generator functions in JavaScript and how you can use them to improve your code.
What is a generator function?
Introduction
Generator function.
A generator is a function that can stop midway and then continue from where it stopped. In short, a generator appears to be a function, but it behaves like an iterator.
So let's code!
We will be creating a generator function in this example.
function* generatorFunction() {
yield 1;
yield 2;
yield 3;
}
Basically, yield is the return of a generator function in our case this function will be giving us 3 values of 1 & 2 & 3, next we need to retrieve a generator from this function like the following.
const generator = generatorFunction();
if we log our generator it will be giving us a generator object
as you can see there is a next method that going to allow you to retrieve the values that you provided with yield but in an object that has {value: “the value”, done: “if the function is done or not”.}
so here we will be logging this next() 4 times and let's see what happens.
const generator = generatorFunction();console.log(generator.next());
console.log(generator.next());
console.log(generator.next());
console.log(generator.next());
as we can see the yield ends at 3 so the 4'th log will have an undefined value and done will be true.
Since our generator object implements the iterator and the iterable protocol
so I will be logging our generator object once again
if you need to know more about iterable protocol click here
A generator function simplifies the use of an iterator like the following
for (const n of generatorFunction()) {
console.log(n);
}
And the result will be 1 & 2 & 3.
Q&A
If something doesn’t work as expected or needs more details, just drop a comment below :) Happy coding!
This has been developed by myself at eDonec.