Welcome one, welcome all! How is it going? I hope that you're in good health and doing well. If you decided to click on this link, that must mean that you are interested in learning about generators. If that's the case, let's not waste anymore time and get straight to it shall we?
So first things first, what exactly is a generator? A generator is a special type of function in JavaScript that has the ability to stop midway through execution, and then continue from where it stopped. For example, imagine reading one of your favorite novels, and inserting a bookmark at your stopping point, and being able to resume where you left off. The next day you pick up your book and turn to the bookmark you left and start reading exactly where you left off at. That is essentially what generators are in a nutshell.
ECMAScript 2015, or more popularly known, ES6, first introduced generators into JavaScript. Generators can be very closely compared to iterators. Iterators is a programming practice that programmers use to loop over a data structure and manipulate each value in some way.
Iterators makes use of the Symbol.iterator method. A symbol is a primitive data type that was also introduced by ES6. The Symbol.iterator method returns an object that has a next property and a done property. The next property is a method that provides a way to get to the next value in the iteration; the done property is used to check if the iteration is complete by checking if the done property is either true or false.
Generator functions behave very similarly to Iterators in the fact that a generator function will return an object with a next property and a done property just like iterators. The difference is the fact that generators, like mentioned before, have the ability to stop mid way through execution. Let's go check out how that's possible. Take the following code example below.
function *generator() {
yield 'I can';
yield 'Stop this function';
yield 'also start';
yield 'this function';
yield 'whenever i want';
}
const gen = generator();
console.log(gen.next().value) // will log 'I can'
console.log(gen.next().value) // will log 'Stop this function'
console.log(gen.next().value) // will log 'also start'
console.log(gen.next().value) // will log 'this function'
console.log(gen.next().value) // will log 'whenever i want'
console.log(gen.next().value) // will log 'undefined'
console.log(gen.next().done) // will log true
First thing to note, is the asterisk being used when defining the function generator. This is the first indicator that a generator function is being defined. Second thing to note, is the use of the keyword yield. Yield is the reason why generators are able to stop a function's execution mid way through execution. It's similar to the return keyword, however yield remembers its place during execution so when the next method is called, it can pick up exactly where it left off. Unlike return, that just stops execution altogether. We can assign the generator function to a variable, and call said function when needed. You know the generator function is completed when the value of next.().value is undefined. You can also confirm if a generator function has completed by checking if the value of next().done is true.
Utilizing generators in your code has many practical use cases, such as, testing your code, handling asynchronous operations, and making your code more efficient. (By having the ability to stop a function midway through execution.)
That wasn't too bad right? Now you know what generator functions are, and how you can use them in your code. Hopefully, you can apply what you learned today the next time you code. Let me know if I fulfilled that favor, of teaching you guys about generators. Until next time!
Top comments (0)