Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Lessons:7Length:40 minutes
  • Overview
  • Transcript

3.2 Generators

Generators allow us to control the flow of our code with the yield keyword. We’ll create a Fibonacci number generator that contains an infinite loop (while (true)). This is usually a big no-no, but using the yield keyword, we can decide elsewhere when an iteration of the loop should run and we can pull numbers from the generator one at a time.

Related Links

1 lesson, 02:53

Free Lesson

2.Getting Started
2 lessons, 14:42

Free Lesson
Babel on the Client

Babel on the Server

3.Experimenting With ES6
3 lessons, 18:09



Other Cool Stuff

1 lesson, 04:28


3.2 Generators

Hi, my name is Jason Green. And welcome to this short course on Full Stack ES6 with. In this lesson, we're going to take a look at ES6 generator functions and the yield keyword. Now, I'm going to admit, it took me a while to get my head around generator functions. But basically they allow us to halt the execution of a function in an asynchronous fashion, and let it resume at a later time. When you call a generator function, you won't actually be invoking the function body, but you'll get back a generator object. So, generator functions are defined with this asterisks after the function keyword. And you'll basically get back an object that has a couple of methods and some properties. You can place the yield keyword throughout your code and calling the generator next method will move from one yield to the next. So there are a lot of uses for this and some people have gotten really clever with it as well and created whole frameworks out of it. But let's just look at a simple example. If you go back to our project, and don't forget to run gulp, and run the sever as well. We're going to create a generator function for the Fibonacci sequence. We can put it into the portable code because it should be able to run in both the server and the client. Now the Fibonacci sequence is a simple mathematical algorithm that continually returns the sum of the previously calculated two values. So we start off with value 1, as 1, and number 2 as 1 as well. Then we create a while loop, while true. Now this might already be setting off alarm bells for you. How can we create an infinite loop like this in JavaScript? Is it not gonna crash our server or the browser? And that's the cool thing about generators. We can create a function that will infinitely calculate new values for us, but we have total control of it and of when new values are created and of when new loops are executed. So var current can =l n2 and then n2 = n1, so the second value becomes the first value for the next calculation. n1 + = current. Var reset = yield current, and then if reset n1 = 1 again and n2 = 1 again. Now I'll show you how this reset business works later. The most important thing we need to be aware of is this yield command and where it sits. So when we call next on this Fibonacci generator, it's going to hit the first yield and we'll be able to retrieve the value. Let's not forget to put the asterisk up here. And to export it, we're going to export Fibonacci. And we're actually going to call this Fibonacci generator. Because remember, invoking a generator function will return a generator object. So whoever we're exporting this Fibonacci generator to, it'll be ready to go and they won't have to invoke it first. Let's head over to our client, main js. We can get rid of this square class stuff from last lesson. Var fibonacci = iso.fibonacci. So, if we console.log fibonacci.next, let's see what it does. So, when we go to run that it says, regeneratorRuntime is not defined. A quick search of this arrow showed me that we need to include the Babel JS polyfill in order to run generators in the browser. So it says here, if you're using Browserify all you need to do is include the require babel/polyfill in the entry point of your application. Save that, save that. And it should be built again. And now, when we run the application, you see its console logging, object value one. Done. Let's run that a few more times. So, you see that each time we run that generator function, it's returning different incrementing values from the Fibonacci sequence. The other thing you'll see is that it's returning another value, done. And that's coming back as false. In the current example we have, this will never return true for that value because it will always have more yields to run. Now, we can actually pass values into the generator. In fact, if I pass true here that value will come back from this yield and be set on reset. So now if I run the generator, you'll see that after the third execution, we're actually resetting the value back to one and the sequence starts again. Generators are interesting things and they're currently being used in frameworks like koa to write synchronous style code in Node and avoid callbacks. Koa is a server-side framework, and using wrapper functions for all of the usual asynchronous operations, such as request and file access, it allows you to write synchronous-style middleware such as this where you can yield the next function, but I'll let you check that our in your own time. But that's all for this lesson. Check back in for the next lesson where we'll be having a look at a couple of smaller ES6 features such as block scope, destructuring and arrow functions. Ciao.

Back to the top