JavaScript: The Hard Parts Closure Exercise, Part 4

Transcript from the "Closure Exercise, Part 4" Lesson

[00:00:00]
>> Will Sentance: Yes Bob.
>> Barb: So if you just wanted to reset your counter, you just start from outer again?
>> Will Sentance: Bob, don't steal my punchline. Jesus, Bob, why are? Okay, you said it so complacently and effortlessly as well.
>> Barb: [LAUGH]
>> Will Sentance: Good job, Bob. Okay, well, Bob's sort of giving it away a bit there, but let's do that.

[00:00:21] Let's try,
>> Will Sentance: I'm really good, and people often ask that question and I can cut in before they give it away, but this time Bob was too fast. Very good, Bob. So what if we run outer again? So we're gonna create a whole new execution counter for outer, and we're going to do it here, in addition to the first time we ran it, and we're gonna store the results in a function in a new place holder, another function.

[00:00:45] So let's do this, folks, let's do this. This is our final piece of closures, we are almost there on the most profound ayat. Cheers, Mohammad. We are now there on the most profound,
>> Will Sentance: Piece. So I told Mohammad, Mohammad had to run, I told him he would be here halfway through, the closing pieces of closure.

[00:01:10] But also he got a little preview there of the very final piece from Bob, which is excellent. So we're now gonna, we've declared outer, we've called it, we've declared outer, we've called it, stored the results in incrementCounter myNewFunction, run myNewFunction twice, now we hit this bottom line here.

[00:01:26] God, I didn't edit my slides consistently enough. Let's pretend it says, jeez, okay we'll just have var, whatever. Forgive me for my inconsistent variable declarations, it's very, very bad, very bad. Mike's looking up and judging from there as well. All right, look at this line here. Let's pretend it says let, I could obviously also say const, even better, but var anotherFunction equals a call to outer.

[00:01:51] So,
>> Will Sentance: Kara, what's the left-hand side tell me to do, Kara?
>> Kara: The var anotherFunction?
>> Will Sentance: Yep.
>> Kara: Set declaring anotherFunction equal to-
>> Will Sentance: Well, it's not declaring another, yes, sorry. Yes, yes, exactly, anotherFunction is what? Just a place order for the incentive. What's also gonna be stored in anotherFunction, Kara?

[00:02:19]
>> Kara: Outer?
>> Will Sentance: Is it outer?
>> Kara: Increment counter?
>> Will Sentance: It will be, but let's be really precise on it, Kara. So-
>> Kara: It's calling outer.
>> Will Sentance: It's calling outer. It's a constant thing to remind ourselves, if I didn't have parens, what would I be storing in another function, Kara, if I didn't have pareinds on the end of outer?

[00:02:41] What would I actually be storing?
>> Kara: The whole function.
>> Will Sentance: The whole function, which function?
>> Kara: Outer.
>> Will Sentance: The whole outer function, so be as precise as you can guys. The whole outer function, exactly. But parens says, go take that functionality, do it, whatever gets returned out, store that in another function.

[00:02:58] So let's do that. So another function right now, blank, and let's do what we just said we were gonna do. We're gonna run,
>> Will Sentance: The final, final thing to see. We're gonna run,
>> Will Sentance: Outer. And we said, whatever comes out of it, from cooling it, is gonna be stored in another func, perfect.

[00:03:29] All right, so the last time we're going to say this, maybe not, not today, at least today. We're calling a function outer, let's make sure we've got mighty functional five call stack. We're calling a function outer, lets have an energetic committed. We're calling a new function out. We're executing a new function.

[00:03:47] What are we gonna create? We're gonna create together a brand new-
>> class: Execution context.
>> Will Sentance: Energize me. There you go. Execution context, there it is. And what's the first, I forced that. It was so energizing my mind just got lost. There it is, that. Create a local memory inside.

[00:04:09] What's the first thing we do inside that local memory, Art?
>> Art: I would set that counter to zero.
>> Will Sentance: Great, counter to zero. Next thing, Griffin?
>> Griffin: You would declare increment counter.
>> Will Sentance: Very good. Function, I'm gonna ask, I'm gonna as you, Griffin, to be even more precise here.

[00:04:30] Let's be complete, I'm not just declaring increment counter. What do I actually also do at the same time, Griffin? Can you see if you can do this?
>> Griffin: You're declaring increment counter to the-
>> Will Sentance: Local net, something else. What else am I also doing behind the scenes when I declare that function?

[00:04:46]
>> Griffin: You're also creating your backpack?
>> Will Sentance: I'm creating my little hidden scope, square bracket, square bracket.
>> Griffin: Closure?
>> Will Sentance: I don't wanna say closure, I wanna say just I'm making a little hidden link to the entire surrounding local memory. This is why I hate the term closure because this only becomes meaningful when we return this out, for now it's just.

[00:05:09] But yes, we're creating a bond, a bond on the back of this function to through this square bracket property to the entire surrounding local memory. Particularly, of course, we want this going there. And now, when I return out, Andrea, now I reach the final line of the body of my function outer, what's gonna happen?

[00:05:32]
>> Andrea: You're gonna return incrementCounter.
>> Will Sentance: Return incrementCounter out. And there it is, and what is the new label I'm gonna give this function globally?
>> Andrea: Another.
>> Will Sentance: Another function, exactly. Another function, there it is, and this function, couple of things. Firstly, outer execution context, what happens to it, Andrea?

[00:05:55]
>> Andrea: Pops off.
>> Will Sentance: Pops off the stack, the core stack, it pops off. There we go. It's done. And all its data, see, that does show any indication being done. All its data gone, or is it? No, so we'll actually also, Andrea, go called out. Out came the function increment counter, gave a new label.

[00:06:22]
>> Andrea: It took out the backpack.
>> Will Sentance: The backpack. You could also use other words like the closer of variable environments. Out came on the back, people on front end masses are like, he's gotta stop calling it that.
>> class: [LAUGH]
>> Will Sentance: There it is. And attach on the back of the function definition is this backpack, or we might want to call it instead our lexical scope reference, to the live data from when I was born.

[00:06:50] My increment counter was born it got returned out, before this was done, and we got a new label and other function. I got a little bond to my surrounding data and there is counter. There it is, so I'm going to return now to that function. And it has its little backpack with counter is zero.

[00:07:16]
>> Will Sentance: Little backpack. Closed over variable environment, I like that term for it. And now I want to cool, I'm not gonna actually draw the execution context for these, I just want to ask a question. I wanna call another function. This is our very final piece. I wanna call another function again, and I wanna ask a question.

[00:07:36] If I were to run my new function once, again, let's get rid of our, and actually a bit like we were saying, we're gonna return our counter. Sorry, we're gonna return our counter, but just console log what counter is after doing the counter plus plus. So run my new function once, run it again, then run another function once, and run it again.

[00:08:10] And each time I would be console logging what my value of counter is. Who thinks they have an idea of what counter will be each time? Do you wanna go, Katie?
>> Katie: I think they will both be two.
>> Will Sentance: So what did I see from the first call I'd see?

[00:08:30]
>> Katie: One.
>> Will Sentance: Then?
>> Katie: Then two. Then one, then two.
>> Will Sentance: And why is that?
>> Katie: Because they're actually both separate references to different-
>> Will Sentance: Original functions with different original backpacks. Let's give Katie big round of applause. Very good, Katie, very nice.
>> Kara: [APPLAUSE]
>> Will Sentance: [APPLAUSE] Yeah, indeed.

[00:08:49] So that's it. That is it. We're going to, one second, Andrew. Do you see now, Bob, why your comment was so smart? That's it, that is all the closure. I'm gonna add a few clarifications. Let's be clear, when someone tells you closure is created, this is why I hate the term closure, it's created when you return the function out.

[00:09:08] It only becomes interesting when I return the function out. Actually, all functions, including outer, get a reference, a square bracket, square bracket, scope, square bracket, square bracket, to their surrounding variable environment. But that only becomes interesting when we're trying to run that function when the rest of the memory seems to have gone.

[00:09:28] But that, in the global memory, the global memory is always there. So going like, well out has got a reference to this global memory, who cares, it's there anyway. But if I try and run increment counter out here, under the new label mining function, it would suggest that this data is gone.

[00:09:45] No, cuz when it was born, it got born with that hidden scope property. Cuz lexical scope is the key feature of how I decide what's available to me when I call my function. Is this what was available to me when I was defined through this hidden backpack that gets attached to the function before it gets returned out.