Check out a free preview of the full Advanced Web Development Quiz course

The "Q17: Generators" Lesson is part of the full, Advanced Web Development Quiz course featured in this preview video. Here's what you'd learn in this lesson:

Students are instructed to analyze the generator code and determine when the string "In Log: My Input!" will be logged to the console.

Preview
Close

Transcript from the "Q17: Generators" Lesson

[00:00:00]
>> Next question, when does In log: My input get logged, this [LAUGH] is a weird way of phrasing it but hopefully it makes sense, A, B, C or D? All right, so, the right answer is C, first we call next and then we call next with a string my input.

[00:00:22]
So first, let's just take a look at generator functions in general. So, this is not the same code as we just saw, but in this case we have a generator function, it yields 1, 2 and it returns 3. So when we invoke a generator function, it doesn't execute the body, but instead it returns a generator object.

[00:00:38]
So normally you just assign the generator function a value. So here we have the genObject, which now points to that generator object returned by that generator function. And with this object or with generator functions, in general, we can control the execution of that function body. And this generator object has methods on it that we can use to invoke the generator function up until it finds a yield or return.

[00:01:06]
So in this case, we can call genObject.next() and this will start the execution of the function body until it finds a yield. And when it defines a yield, it will return this special object with the value, which is the value that got yielded and also with a done property, which states whether the generator function has returned or not.

[00:01:27]
In this case, it hasn't returned yet. It has yielded value. And we can keep doing this if we want to. We don't have to invoke it, but it will cash the state kind of of where it left off. So now if we call next again it'll go from that yield 1 back to the yield 2, cuz because that's the first time it encounters that yield again.

[00:01:46]
So only when we return will the value be three like the return value Is the value of the value property on the object. But then done is set to true because we finally returned. However, and then yeah, the generator object is closed, so we cannot keep on iterating it.

[00:02:02]
Now it's closed. If we call next again, it'll just return undefined for the value and still done true. So in this case, this is the code that we just saw. We, again, have the generator objects, so genObject. So first we have to call next to just start the execution of that body until it finds a yield.

[00:02:21]
And in this case it finds yield my input so it returns that value my input and done false. We still haven't returned from the object or from the generator function. But now because we are actually assigning a value to yield we can pass a string or any value to next.

[00:02:37]
And what this does is basically it assigns that value result to the argument that we pass to next. So, for example, this could make sense if maybe you want to yield, what's your favorite number? And then you could yield that maybe in an alert or any prompt that your user can respond to.

[00:02:54]
And then you can say the result is the reply they gave to that yield, if that makes sense, to the next invocation. So now it starts again, we still haven't found a yield cuz we kinda go from const result, which just assign that value, my input, to the next line, right?

[00:03:13]
So it just logs in log the result, which is my input. And only now it does find a return all done. So now it returns that object again with the value all done cuz that was what we return. But now done is set to true because we returned from that generator function and the generator object is set to closed.

[00:03:31]
I know this is pretty confusing, but [LAUGH] we can also use generator functions or like generated objects to use the spread operator or use a for of loop, anything that you can like iterate through that generator function. That makes sense, yeah.
>> So if you called .next without the "my input".

[00:03:53]
>> It'd be undefined.
>> Result would be undefined.
>> Yeah. Yeah, I wish I could show more examples of generator functions cuz they're actually pretty cool. Calling them functions I feel it's kind of weird cuz they're not really functions in that sense, but yeah. So generator object is an iterable or it implements the iterator protocol which is the symbol iterator protocol or something, which allows you to use a spread operator, use for-of loops, stuff like that.

[00:04:30]
And then it will just yield or return all the values that got yielded until it got returned.

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