6.5 Generator Functions

Hi folks, in this lesson we're going to take a look at another type of function that we can use in JavaScript. A generator function. This type of function is very powerful, but is very different from regular JavaScript functions. Defining a generator function is really easy. We need to use the function keyword with this type of function. We just need to add an asterisk after it. In almost all respects, it's just like a regular function, it can have a name, and it can accept parameters. With a regular function, however, once it starts, it executes all of the statements it contains and then returns. All further activity of the function stops, unless the function gets invoked again, in which case it basically starts again. Generator functions, on the other hand, do not run to completion. They can return a value, pause, and then be resumed at any time later. And they pick up exactly where they left off and continue processing, sometimes returning many values before they actually end. Regular functions are blocking, while they are running, no other code can run. With generator functions we can pause them. And this allows other codes to run. And we can then come back and resume the generator function later on. So generator functions are only blocking while they are actually running, not all the time. The way that we pause a generator, is with the yield keyword. We can use yield by itself, or we can use it to return a value. A bit like the return keyword. And like with the return keyword, if we don't specify a return value, it will return an implicit undefined. So let's update our generator function now to make use of the yield keyword. And just so that you can be sure that the generator function does pause after this statement, let's add a console log directly after it Another difference between regular functions and generator functions is that we don't actually invoke generator functions like we do regular functions. We invoke the generator in order to get an iterator. And it is the iterator which actually invokes the generator. We still need to pass the parameter that the generator function is invoking when we invoke it to get back the iterator. We looked at iterators earlier in the course and we saw that they should have a next method. So in order to invoke the generator function, we need to invoke the next method of the iterator that invoking the generator returned. So at this point, we have invoked the generator in order to get back the iterator and we've invoked the next method of the iterator. So the generator function should now have started running. Let's just check the output in the browser quickly. We can see that we don't see that log message that we added after the yield keyword. So what's actually happened is when we invoked the next method, the generator function ran until it encountered the yield statement, which happened to be the first statement inside the function in this example. And then it paused. As soon as the x multiplied by x value was yielded, the function paused. So let's just wrap a console log around where we invoke the next method. So now we can see that invoking the next method resulted in an object being returned. And like the object that is returned with other iterators, it contains a value and a done property. So the value contains whatever the yield keyword returned, which in this case is the number 25. And is also has this done property saying false. And what that means is that even though the generator function has been invoked, it still contains more expressions which can be evaluated. So let's invoke it once again. So now we see the log message that was added after the yield keyword. So we can see that the generator function was paused after it yielded. And that when we invoke the next method a second time, we saw the log message that came after the yield expression. And this time in the object that gets returned from invoking the next method, we can see that done is true and this means that there are no more expressions to evaluate within the generator function. So if we invoke the next method again, nothing will happen. If we want to run the generator again, we'll need to get a new iterator and start again basically. So one of the key points of this example so far is how we can pass a value back from the generator. And we do that, as we saw, using the yield expression. But what about sending new values into the generator? This is also possible and is another fundamental aspect to generators. So let's just go back and modify the original generator functions slightly. And let's also log this new variable to the console in the log statement. And let's also make a change to how we use this function. So when we first get the iterator, we can continue passing 5 in. But let's use the next method of the iterator to pass a different value into the generator when it get resumed. So this time we can see that something interesting has happened. So this time we passed the value of 10 into the generator using the next method the second time we invoke next. And we can see that the output is now changed. So when the generator runs and evaluates the first yield expression, it will still return 25 like it did before. But when we pass 10 in the second time the next method is invoked, the yield expression will be replaced with this new value. So when we invoke the generator, we still pass 5 in. And so, 5 is the value of x when the generator function first begins to run, but then when we invoke the next method and pass 10 in, the yield expression, inside parenthesis, will be replaced with this value that we pass in. So, y then becomes 10 multiplied by 5. As well as using yield, we can can also use return at the end of the generator. And when the iterator for the generator is used with the next method, the value returned will be the value property in the object returned by the next method. Another point to know is that a value passed to the next method, the first time next method is used, is discarded. And it's not available inside the generator, the reason for this is because the generator hasn't yet evaluated a yield expression the very first time it gets invoked. So in this lesson, we learned about generator functions. And so that they are a powerful type of new function that can be paused and resumed, instead of running to completion and blocking other code. We saw that we define a generator using the star character after the function keyword. We learned that we can pause a generator using the yield keyword. And that we can pass a value out of the function using this yield keyword. We also saw that generator functions are used with an iterator. We invoke the generator once to get its iterator and we then use the iterator's next method to start or resume the generator. We also saw that we can pass values into a generator when resuming it using the next method. And that these values will be inserted as the result of the yield expression that the generator previously paused at. In the next lesson, we're going to look at closures in JavaScript. Thanks for watching.