Check out a free preview of the full The Hard Parts of Asynchronous JavaScript course

The "Generators Q&A" Lesson is part of the full, The Hard Parts of Asynchronous JavaScript course featured in this preview video. Here's what you'd learn in this lesson:

Will answers students' questions about what generators are patterned after, generator objects properties, infinite loops through generators, and more.


Transcript from the "Generators Q&A" Lesson

>> Will Sentance: All right, thumbs on this, you lost me. [LAUGH] It's okay, this stuff's super hard. Very, very clear, these are brand new features, ES7 clarification. I didn't need you to put, I didn't for for a long time, cuz I don't want to explain const and let and now we're doing pure ES7.

All right, Brian has a clarification, Ben has one, Victor and Paul have one. Josh is in the middle. Let's start with Victor.
>> Victor: So I guess my question is, maybe this is one of other ones that should be left later. What is this pattern after? I mean, I feel like it's very new to me.

>> Will Sentance: Other languages have iterators and generators. Python has them, they're a pretty standard, I don't know if it's standard, but they're pretty nice. I'm gonna say somewhat more contemporary, because traditional computer programming is very imperative. That is all about saying I'm going to show you exactly how I do every last thing I do.

And as we go through time, we develop a more abstract model where we talk more about let me do what I wanna do, as opposed to, for example here, which I want to do? I want to do literally get my next element one after another. That's a very, I'm not showing you how I'm getting it.

Well, there's something similar here but they're in Python at least and so they're not completely by any means new. Ben.
>> Ben: So when we're returning from next to next, are we also returning don false so that we know, [CROSSTALK]
>> Will Sentance: Yeah, yeah, yeah. So I again, that's a very good clarification.

I simplify this slightly or profoundly from being the object than the job which is actually returning with the value ten and don false to being the ten but is very important clarification here that's gonna help with your familiarity when you see the actual code, we actually return now an object with the two properties.

I mentioned that before, but again, it's just much more readable here, for our purposes, to say we returned the value. But we actually returned, value ten, done false. Okay. Great question, Ben. Great, helpful clarification. Paul?
>> Paul: Note the penultimate yield waits for five plus newNum to evaluate before suspending, right?

It doesn't just return five, it says okay, add newnum, [CROSSTALK]
>> Will Sentance: Right, because the right hand side is an expression that can be evaluated before you, like that's reasonable, like a return so we'll do the same thing.
>> Paul: So that's my question, yeah, whether you can put a turner in there, whether you can put an expression.

>> Will Sentance: You can treat it just like a return yeah. Alec?
>> Alec: Does the generator object only have the next property, or there are other properties on there?
>> Will Sentance: Go inspect, go inspect that dude. I mean you're going to see that actually, it's got a whole bunch of these built in generator location, it's not only object,

>> Will Sentance: If we were to build this out ourselves, we'd probably store it I suppose we could store it on the object. We'd want to store the cache of data, though, probably in the backpack, in the closure on the function. And only functions get backpacks. But the location position, I guess, could be easily stored on the object.

This is actually a property not on next, it's a property on the object. So the whole bunch of properties on this object that come out,
>> Will Sentance: Generates a location, actually scope is stored on the objects, under the hood of it, it must be still attached to the function if it's imprinting closure itself, but it may be an internal feature of JavaScript, but it's stored as a square bracket scope property with that data and it has a property called status suspended when it's not executing.

It has a property generator location itself which refers to where is the generator defined. In JavaScript. That's like five or six properties.
>> Alec: Sure.
>> Will Sentance: Okay.
>> Speaker 6: Does it have too? [CROSSTALK]
>> Will Sentance: It won't be on the object itself, but it could be on the prototype or the, of the generator object type.

Okay, any other clarifications? James?
>> James: Number one, I see this as super powerful because you could certainly have a generator that's essentially an infinite loop, as long as it keeps yielding.
>> Will Sentance: Yeah, that's actually very, very true. That's one of the most powerful features of these, yeah.
>> James: Primes or Fibonacci calculations.

>> Will Sentance: What a great insight, yes. Absolutely, it's one of the most powerful things about this design.
>> James: And number two, I assume the shortcoming here, and which likely leads into the last topic, is this is synchronous code, however. Right?
>> Will Sentance: Well let's see in a moment what happens if we were to instead yield something that is an asynchronous task being set up.

And that's our very final peace. Before we get to that, I think it's worth doing one more block of pairing. Just almost to give ourselves a little breath of fresh air even in the meantime but also metaphorically so in other words, go back to the challenges for a bit just to test yourself out on this material.

Those last challenge is 789. Of this material. But in a moment as we just said, this returnNextElement is a special object. There's a next method which starts or continues running create flow until it hits yield returns out the value being yielded. We end up with a stream flow of values so we can get one by one.

But we get control and dynamically. But we're gonna see most importantly for the first time we get to pause, pseudo suspend a function being called, and return to it back into create flow, using, calling it. Just only a little bit of a preview, in asynchronous JavaScript, we want to be able to initiate a task that takes a long time.

For example, we're requesting dates from a server. Move on with regular synchronous code. And then come back to run further functionality on the data that comes back from the slow, asynchronous task. What if we were to yield out of the function at the moment it's setting off the long-time task, the slow task, and return to the function only when that task is complete, we might finally get a model of thinking about a synchronicity that reads logically to us.

We're going to see it after this pair programming break. Then I'm gonna wrap it. We're gonna build it ourselves, manually. We're then gonna wrap it with a brand new construct known as Async/await. All right, people, here we go. Back to your pair programming, we'll reconvene in ten, 15 minutes.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now