Javascript Generators - THEY CHANGE EVERYTHING - ES6 Generators Harmony Generators

All right, we're going to be covering generators, which are one of the most exciting Yeah, I'm just going to be honest. They are hands down the most exciting and powerful feature of the next version of JavaScript, which is ES6 Harmony. You can start using it now using Google Traceur. I'm going to put the link or I guess the name right there. You can figure it out. It's so easy to use. Um but generators are hands down a game changer. I know that that's a big statement to say, but it is completely true. It took me a while to realize that they were a game changer cuz when you look at the specs of what a generator technically is, at first it doesn't really seem like that useful of a thing. Um and then you have a lightbulb moment and everything starts changing for you. So, I'm going to show you technically what a generator is, how to code with it, how to use it, and then what that lightbulb moment is and why it's going to change so much of the way JavaScript is programmed. So, here's a basic generator. Basically, the only difference is it's got the star, which is how you define it as a generator, and then you can yield things. You can set yield points. And basically, what a generator is, if you were to define it very simply, it's a possible function or an iterable function. You can start running the function, and then when you get to your yield, it will actually stop running the function. While JavaScript continues doing everything it's go it's doing, this function has paused. And yield sits between the value you yielded and what it's passing on to the variable. Basically, yield sits between here and what the rest of JavaScript is going to do when you continue your function. Cuz you know, JavaScript basically runs right to left, uh right to left, right to left. So, you yield one. Uh let's go ahead and move on to this example. Um I'm going to run my gen, which is the name of my function, and uh I store it as gen. When I run it, nothing really happens. It just gets it set up. Nothing is started firing at in my function until I run gen.next. And then it runs until the first value has been yielded. So, here you can see value one done false. Um and then it's going to wait at this yield point until I run gen.next again. And so then it's going to return value two. See, there you go. I yielded the the number two. And then next time it's going to yield the number three. And then the next time it's going to yield undefined uh because it ran the next the rest of the function and there's no more yields. And it's going to say done true. So, now I'm done. If I were to foolishly try to run next again, it would error because you can't call next on a closed generator. So, that's basically what it is. You can pause it and yield stuff. And doesn't seem very useful yet, does it? Um and there's actually a problem with my code here is this is going to console.log undefined undefined undefined undefined because these values weren't set to anything. Remember when I said yield sits between here and here? Well, basically whatever it's going to wait for something to be passed to the next gen.next function. So, right now I'm not passing in anything. So, I yielded one out, but when you resume to the function, you didn't give me anything to pass back in. So, one is now undefined. So, to make this code work, I'd have to yield one. So, I passed one out here. And then I'm passing one back in. Two So, now one does equal one and then two and then three. So, now it will console.log 1 2 3. Um and I could actually if I were to yield 4 5 A. So, basically ignore what you passed me. I'm just going to pass in random stuff. Then one is now going to equal four and two is going to equal five and three is going to equal A. Uh so, because that's what I passed into the next functions. So, that's a generator. Um seem pointless? It's not. Let's say, and here was my lightbulb moment, let's say there's smart code that wraps a generator. Let's say you pass a generator to a smarter function that looks for promises. If you don't know what promises are, you need to pause right now and watch a video that I'm going to put in the description, my previous video on JavaScript promises, um and then come back to here. So, let's say we had a smarter piece of code here, and you were to pass it a generator, say my gen, and it would run that and get it ready to run. Uh and then it would run gen next, and it would get that yielded value. If that yielded value was a promise, which this is a This is really dumb smart code. You wouldn't check this way, but you know, I'm just kind of saying, say yielded value had a then method, then it would wait for that yielded value, that promise to resolve, and it would pass that resolved promise into your gen next function. So, then you could write code that actually did something like this. So, you can actually run code that said API friends. So, run API friends, yield is going to see, oh, that's a promise. I'm actually going to wait till that promise resolves, and then I'm going to actually pass the resolved value of that promise back on to one. So, if API friends return something like uh John, you know, just I don't know. Let's just say it returned a string of John, then one would equal John whenever this promise resolved. Ah, super cool. So, now I can actually do something like this. Get friends, get profile, get tweets, and it's going to run this, wait for it to complete, pass it into here, and then run the next thing, and now my code looks like it's just normal synchronous code, but it's actually asynchronous code happening over the span of I don't know, 20 seconds, 20 hours. It doesn't really care. It's just waiting for all these things to fire back as successful. Oh my goodness, that's super cool. So, how do I actually get this smart wrapping code? There's multiple libraries out there right now that already provide it for you. Bluebird, co, Q. Um if you're working on the browser side, client side, I'm going to say go Bluebird. Uh if you're working on Node.js, the back side, I'd say go with co. Um Q is actually already provided in Angular, so if you're using Angular, Q is the promise library that's baked into that. Uh but you can do this. You can run promise if you're using Bluebird. Promise.co routine. So, here we go. Tweets equals yield get tweets, and then we're going to console log it. That's it. I got the tweets and I console logged them. Uh let's say I needed to do three things in order. I need to get the tweets, then I need to get the profile, then I need to get the friends. Well, here you go. It's going to wait for this on the yields, pass it in, then it's going to wait for this, yield, pass it in, going to wait for this, yield, pass it in. When all three are successful, it's going to fire them into here. Oh my goodness, that is so cool. Uh but you can do even cooler things. You can configure Bluebird uh to be able to yield objects of promises or arrays of promises. I have an array of a promises here. Uh so, I can do an object here. I can yield tweets and profile, and it's going to run them both simultaneously, wait for them both to succeed, um and then it's going to pass them both into data as tweets and profile, and then I can console log data.tweets, and I can console log data.profile. By the way, all this code I'm going to put into a gist and put that link in the description so you can access this code and see it. Um but you can also using um the new destructured syntax in ES6, since you're probably already using Traceur um Traceur, however the French would pronounce that word correctly, um you can use destructured syntax, which means you can go var a, b equals um 10, 11. And what that's going to do is variable a equals 10, variable b equals 11. CoffeeScript does that if you guys have used CoffeeScript. So I can say variable tweetsProfile equals yield and give it an array of these two guys. And then I can just console log tweets and profile. It is so cool. It is so useful. Um I hope you guys love generators as much as I do. I'm already using these things in production on several little projects and I'm so excited about them. I hope you have a great day and enjoy the rest of your JavaScript life.