Maybe you have heard about this feature in ES6 or you just didn’t have time to play with it.
It is something, that I have learned a few days ago and it’s super cool.
Let me explain it to you in a few steps.
So Generators looks like a similar function, but it allows us to pause the execution of the function and continue it later.
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
yeild "Spider man";
}
const iterator = avengersGenerator(); // Creating iterator
iterator.next(); // Iterating on the generator
Generators look similar to a normal function, the only difference is we have to define an *
(asterisk) after the word function.
function* avengersGenerator() {
...
}
We can yield
the function, which basically would stop the execution of the function when it gets to the first yield
.
function* avengersGenerator() {
yield "Hulk" // The execution would pause here.
yield "Iron man" // When we resume we would start here.
}
On iterator, we can call. So by this, we will prepare our generator for action.
const iterator = avengersGenerator();
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.
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}
Once a return is being called, it would finish the generator. It basically sets the done
property to true
.
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: "Utron", done: false}
iterator.next(); // [3] Object {value: "undefined", done: true}
In my opinion, generators are quite a cool thing to play with or at least to know what it does.
In the next post, I will explain, how generators helped me to solve one case at my work thanks to the possibility to cancel the promise when needed with generators in ES6.
#es6 #javascript