JavaScript: The Hard Parts Closure Exercise, Part 2

Transcript from the "Closure Exercise, Part 2" Lesson

[00:00:00]
>> Let's walk through this precisely. This is our final block of code. This is gonna give us all the mysteries of closure in a second. So, line one, line one. No grinning in the back.
>> It's gonna give us closure. It's gonna give us close, beautiful.
>> [LAUGH]

[00:00:21]
>> Indeed. [SOUND]
>> [LAUGH]
>> Ridiculous joke. All right.
>> [LAUGH]
>> Okay, line one. It's true, very nice. Andrea, what do we do in line one?
>> We're declaring the functionality.
>> There it is in global memory. Now, all right, so we're solving our code, we're in the global execution context.

[00:00:40] It's on the top of our call stack, there it is. We're in global. We're storing staff in our global memory. Next line in our global execution context, Griffin? We declared outer. What's our next line?
>> Wouldn't that be the var new function?
>> My new function yes. So, what's that actually?

[00:00:59] How do I say that poshly?
>> [CROSSTALK]
>> Declaring myNewfunction to.
>> Okay, perfect. As a variable myNewfunction and it's going to be what initially?
>> Undefined.
>> Undefined because we've got to go figure out what gets returned from the call to outer. So over here, we've done this a few times now, we are going to say whatever gets returned from the call to outer, so we're gonna run outer.

[00:01:42] How do I know I'm running outer, Griffin?
>> Parentheses.
>> Parens, I'm gonna run it. Whatever comes out of outer, store it in myNewFunction. How do I know what the coming out of outer is? So what's the keyword that tells me that's gonna be the output?
>> Return.

[00:01:55]
>> Return statement, exactly. Whatever's after the return keyword, that's the output. We've got to go figure that out. We don't know the answer yet. So we create, everybody together, a?
>> Execution context.
>> I thought it would be more energetic this time then last time, but you've got it.

[00:02:09] Good, exactly. An execution context, I was so energetic about it I made it big. There we go. I've flung myself around. There it is, a new execution context, all right. Inside of which we do what first? What's the first thing we do inside of execution context? Shelby.
>> We label counter as zero.

[00:02:36]
>> Right, so we declare counter as zero. Remember the other name for this local memory, not the execution content but just the memory bit of it, is variable environment, just as a reminder. We're calling outer, so call stack, what happens, Shelby? We're calling outer, what happens when I call that, Shelby?

[00:02:54]
>> We add the outer.
>> The outer call, so JavaScript knows that's where I am. Top of the call stack and you're right, counter is set to zero. Okay, next line, Shelby, inside of the call to outer.
>> You execute the-
>> Whoop! What, go ahead?
>> The increment counter?

[00:03:14]
>> I execute it?
>> Restart it?
>> Am I declaring or am I executing it?
>> You're declaring it.
>> How do I know I'm declaring it? What keyword?
>> Function.
>> Function, that says go store me under this label in memory, okay. Right, increment counter is declared and stored in memory.

[00:03:37] There's the definition. There it is. The whole thing as a description of that functionality, increment counter. If I had a console log, increment counter, Katie, if I had a console log increment counter, what would I see in my console in full?
>> You would see the whole function, which is counter.

[00:03:53]
>> Function increment counter parens open curly braces counter++ close curly braces. It's the whole function. Okay, good, now am I going to call, am I going to invoke, Lindsey, am I going to invoke incrementCounter? Am I gonna run incrementCounter at this point?
>> No.
>> No. What am I gonna do with it instead?

[00:04:13]
>> You're gonna return it.
>> I'm gonna return out the whole function definition. So we said, whatever gets returned out or running outer is gonna be stored in myNewFunc or whatever, myNewFunction. But we'll call it myNewFunc for now. Whatever gets returned that's stored in myNewFunction. So what is returned out, Lindsay?

[00:04:38]
>> The actual function right now.
>> The actual function, and let's call it the function value, because it's the whole description of the function. Did we care about the label incrementCounter out here? No, it's just the right hand side. The function gets, out it comes, and stored in myNewFunction.

[00:04:54] It's this function definition here, stored in myNewFunction. Little baby function, out it comes. Stored in myNewFunction, okay. So here comes the big moment. How, Mohammed? I always do this, first we finish calling outer. We know that because we hit the return statement, shown at the bottom, stored incrementCounter in myNewFunction, so we are back to-

[00:05:26]
>> The global.
>> Global, which means our call stack has popped.
>> Off of that.
>> The call to outer, right? So this guy is done, and this guy here. This is really important, folk. This execution context is done unless we return something out where we did. We returned this guy, out, didn't we?

[00:05:48] Unless you return something out and stored it out here in a new label, everything in here, hm, we'll see. Everything in here is gone. Gone, maybe not completely gone. [LAUGH] Stay tuned, but this is all gone. This execution context is done, it's gone off the side. We cannot jump back in here.

[00:06:06] This isn't sticking around. This is gone. See that doesn't work, that whole notion of, I don't know how to show that this execution context is gone. It is gone, gone, gone. If I could fade it out that would help. It is gone. It's gone, gone. Okay, got it?

[00:06:32] So, then given that, how can I out here, Mohammed, run the functionality that was previously known as incrementCounter inside there, how can I run that out here?
>> Put a parens around myNewFunction?
>> Perfect, because myNewFunction is the new label for that interior functionality incrementCounter. MyNewFunction and then some little parens on the end of it.

[00:06:54] Well we're probably already spotting, when I ran incrementCounter inside, it made reference to something, uh-oh. We have problems, very clearly. We're running myNewFunction, there it is. Now we can run what was previously known as incrementCounter in the global context even though outer's finished running. If we're back to global, outer is done.

[00:07:14] We can't have two, three outer, or a thread in outer pausing, hanging out, it's done. We're back to global, but we can run incrementCounter globally through its new label. You returned out the incrementCounter function and called it instead myNewFunction. MyNewFunction is really running the counter++ incrementCounter functionality. There it is, so let's do that.

[00:07:34] Amin, myNewFunction is being called, what do I create? A new-
>> Execution context.
>> Good job, Amin. You wanted to say that, but you are perfectly right. There it is, myNewFunction, new execution context. And, it has its own call to the local memory. And in terms of my call stacker meme, what do I do?

[00:07:58]
>> You put incrementCounter in there.
>> Yeah, they're the same thing. We'll call it myNewFunction out here. Yeah, they're the same function, just two different labels. You can have two labels for the same functionality. There it is. What's the first line of code inside here, Mohammed, say?
>> Do you need a paren there?

[00:08:19]
>> Well this is just, for what is myNewFunction really? Andrea, what is myNewFunction really?
>> IncrementCounter.
>> So what's the first line of code inside of it?
>> Counter++.
>> Counter++.
>> We have serious issues we can probably already spot. Where do I look for counter first, Mohammed?

[00:08:45]
>> Locally.
>> Local, exactly. I know that because it's look, there you go, top of my call stack. Woo hoo, top of my call stack. Where does my call stack and everything we've prior known suggest I look next, Mohammad?
>> In global.
>> In global. Do you find, I see no counter in the global.

[00:09:02] There ain't no counters in the global. This would suggest we're gonna get some sort of error, right? Let's see. It says we had some sort of error. We did a lot of work for just an error. Who thinks we're actually gonna get an error? Raise your hand high and proud if you're actually gonna get an error.

[00:09:30] Good, okay my playing along is, thank you for playing along, but there might actually be an error. I appreciate it.
>> [LAUGH]
>> [LAUGH] Yeah, I know. What a lot of work for nothing? You buy into this, Bob? No, not buying into it.
>> [INAUDIBLE]
>> Yeah, a lot of work, we did, for nothing.

[00:10:03] Okay.