JavaScript: The Hard Parts Closure Exercise, Part 3

Transcript from the "Closure Exercise, Part 3" Lesson

[00:00:00]
>> Speaker 1: And reveal that actually some magic happened. Some amazing, precise magic happened when I,
>> Speaker 1: We already said where I define my function determines. What did it say? Where you define your function determines what variables your function have access to when you call the function. That's our overarching message.

[00:00:26] Where you define determines. But hold on. [INAUDIBLE] was to find inside of outer. But we said outer's gone. But we're saying also, where you define what determines what variables function of assets when you call the function. How can these two things be reconciled? Okay, let's see. When I define the increment counter, when I was running out, so we are right now inside the quarter outer, we're inside the quarter outer and the first thing we didn't saw it was declare counter is 0.

[00:00:58] Then increment counter is a function. When I declare the increment counter as a function, I didn't just declare it was a function. Behind the scenes, JavaScript did something very special. We're gonna learn how it worked in a second. But for now, what I'm gonna say? Is when I define increment counter, I said define increment counter, determines what things are gonna be available.

[00:01:19] Where I define my function determines what data will be available when I end up calling that function, wherever I call it, wherever I invoke it, wherever I execute it. Where I defined it determines what data, when I call it, it will have access to. So I defined an increment counter here, I did something else.

[00:01:37] I didn't just define it, I didn't just store its description, increment counter plus plus in memory, I did something else. I made a special bond to the immediate total surround live local memory. I said this function Gets a special bond to all these surrounding data. Gets a special bond to all my surrounding data, increment counter is not just a function.

[00:02:10] It's a function plus a special bond To little reference to all my surrounding data, counter at zero, increment count as a function. It gets a reference to the whole surrounding data. When it gets to find. Meaning when I return that function out, do I just get the function?

[00:02:30] Nuh-uh. I get the function plus that special bond to the surrounding data from when that function was born. And what is in that surrounding data? That surrounding live store of data, but not counted could be zero. But literally Counter is 0. There it is, attached to my function definition.

[00:03:01] I return out the function value. Increment counter is a function with a reference to the surrounding data hidden on the back of the function, and when I return my function out, well, on the back of the function comes with it It’s surrounding data from where it was defined and there it is, and so that function that gets now given a new label.

[00:03:22] New label is my new function. Just a function. It's a function with a bond to its surrounding data [SOUND] And now, so we code my new function, it's code said counter plus plus, there was no counter, in local, everything will suggest the next place will look at down our call stack sought of we're calling my new function, In global, so we go out and look in global for the counter.

[00:03:57]
>> Speaker 1: Where do you think we actually go and look, Andrea, before we go look in global?
>> Speaker 2: We look in-
>> Speaker 1: In the orange box.
>> Speaker 2: Yeah.
>> Speaker 1: [LAUGH] So I like to call this orange box a backpack. Now, this is definitely not the technical term For this orange box.

[00:04:14] There are. We're gonna give you a whole bunch of sophisticated technical terms for them. But note that in many ways it's like a backpack. That function got a little bond to its surrounding live store of data on its back. And out came the function stored in my new function, and with it came its backpack of live data from when it was defined.

[00:04:31] Not a bad name for it. Unfortunately, it's not the name, unfortunately. We're gonna see what the real name for it is in a moment. First let's just see what actually happens. Andrea, didn't find counter in local. Where did I actually go look before I looked in global? Andrea, where do I actually go look?

[00:04:50]
>> Speaker 2: You data that in the backpack?
>> Speaker 1: In the backpack, thank you, Andrea for indulging me. [LAUGH] green one. In the backpack, say it proud and loud and say it in your interviews and look distress When they look at you and say, mm-mm. [LAUGH] All right, though, what do we find, counter at 0?

[00:05:10] What do we do with, Andrea? What do we say we're gonna do with it?
>> Speaker 2: We're gonna increment it.
>> Speaker 1: Increment it. This is the same thing. Increment it to 1, ha. Increment it to 1.
>> Speaker 1: Not in our local memory, but in this live data store. This backpack attached to the function definition.

[00:05:32] Okay, before we talk about how this is possible, all the ins and outs of this. We finish running my new function, we hit a counter, it was zero. We incremented to one. What happens to this execution context? Andrea?
>> Speaker 2: It gets garbage collected.
>> Speaker 1: No, the data does.

[00:05:47] The execution context gets Popped off the call stack. It's gone and we go back to global, where what's the next line we encounter, Andrea? Gonna call [INAUDIBLE] function again, basically.
>> [INAUDIBLE]
>> Speaker 1: Let's call it again. My new function. Let's call it again. Everybody? Actually, just Art. I'm calling my new function.

[00:06:13] Okay, then just. Griffin. Griffin, I'm calling my new function. What do I create a new?
>> [INAUDIBLE]
>> Speaker 1: Are people really good together doing it really under the pressure of the individual person?
>> Speaker 2: [LAUGH]
>> Speaker 3: Execution content.
>> Speaker 1: Good job, man. Yeah. Exactly. Push it to the call stack, right?

[00:06:33]
>> Speaker 3: Yep.
>> Speaker 1: Pass the call to my new function. So the call stack for this level of communication may seem pedantic, but I was telling Lindsay, telling Bob, I think I was telling Carol as well, this is the stuff Of seasoned developers. There is little explanation why codesmith folk grads get senior jobs.

[00:06:59] If there's one explanation, it's Tentacle Communication. So I've all ready seen a resounding leveling up even today. So even though it feels I go, God, I know what context is. That level of precision, it makes a world of difference. So here we go, and what's the first line in side C?

[00:07:17]
>> Speaker 3: It's counter-plus-plus.
>> Speaker 1: Couner-plus-plus. Now, where do I look for counter first?
>> Speaker 3: At first in local?
>> Speaker 1: Do I find it?
>> Speaker 3: No.
>> Speaker 1: No, just like that. This byte gets it gone, by the way, but yeah. I've got a new empty local memory. Where would I look next?

[00:07:33] Where would my call stack sort of simplicity? Given I'm calling my new function in global, one might think I'd look next in?
>> Speaker 3: Global.
>> Speaker 1: But where do I actually look?
>> Speaker 3: You go into your backpack.
>> Speaker 1: Into my, beautiful music to my ears.
>> Speaker 3: Dora explore it.

[00:07:46]
>> Speaker 2: [LAUGH]
>> Speaker 1: Yeah.
>> Speaker 3: [LAUGH]
>> Speaker 1: Dora explorer, I like that actually, she's nice. Okay, and what do we find? One, and what do we do to it?
>> Speaker 3: You add one to it.
>> Speaker 1: And we get two okay. [INAUDIBLE] my bag pack is persistent. It holds on to that data live.

[00:08:03] Man we've answered that thing, what if our functions have persistent memory in between [INAUDIBLE]? Anything are declared inside my new function fills in the local memory but [INAUDIBLE] function? Start again, it's gonna have to fit it in all there again. There's no memory between these function calls. But hold on, this backpack of data is attached to the function definition, persists.

[00:08:27] It sticks on the back of the function definition, in between function calls. Our function, myNewFunction, is not just a function, it's a function With a store of data on its back. This is for me the most beautiful concept in all of JavaScript. It is the most profound. We're gonna see OOP tomorrow.

[00:08:47] We're gonna see asynchronicity. Asynchronicity. Lists of rules. OOP. Lists of techniques. Closure conceptually beautiful and empowering approach in JavaScript.