Function Scope Backpack

[00:00:00]
>> Will Sentance: Well, what are we doing in line one, Tenzin? Oh, we're declaring the function outer. Yay, I already did it, look at that. Uh, next line, Tenzin. And then all the way down to recalling function outer and setting it to the const new funk. So for now it's uninitialized, we don't know what's going to return out because we've got to go and do the work, which is to call, well, talk me through Tenzin. Um, let's see, you created, uh, a lead counter.

[00:00:31]
Well, first we've got to execute a function, so we need a new what? Execution context. Yeah, beautiful. There it is, a new execution context. Exactly right from Tenzin, oh no. Exactly, right from Tenzin, into what we go, and exactly as you say, in local memory, the first thing we define is what? A number variable called counter. Beautiful, which is set to what value? Zero. Beautiful. Counter is zero, and.

[00:01:02]
And then it declares another function called add one. Yes, a function, add one. Beautiful, there it is. Now, do we run add one here, Tenzin? No, we definitely do not. Instead, what do we do? We just exit out the function by returning. Yeah, in fact, you know what, I'm going to write return, yes, well done. We return, we exit out the function by returning, I actually like that phrasing. Uh, I forgot to put outer on the call stack, there it is.

[00:01:30]
We exit out the function by returning, but we get an output value, which is what? It points to the function. Yes, the function definition, so it says return add one, which is this function. So we return out our, try to do it in a different color? Okay. There we go, we'll do it in a different color. There it is, we return out the function definition of add one. Oh, that's a good sound. All the way across into what new global label, Tenzin.

[00:02:09]
New funk. New funk, excellent, there it is. Oh. There it is. Into new funk, uh oh, there it is. And our outer execution context, what happens to it, Tenzin? Uh, it disappears, disappears, gets deleted, gets popped off the call stack. See, now it starts to get more, more colors, how beautiful is that? So we start to get to the harder stuff. Okay, we're out into global. Everything in outer, we're done.

[00:02:37]
That was a one-time run of outer to get the add one function, now under a new global label, new funk. This is the function formerly known as add one. And now we hit running that function. Joe. Talk me through the next line of code. What function are we calling, we've just assigned a new funk, uh add one function. We're calling the function definition of add one. Oh, sounds good to me, under what name though?

[00:03:04]
Uh, new funk. New funk, and we're creating a what? New execution. Yeah, that's right. I hope everyone noticed that on the stack. Yeah, put on the call stack, beautiful. I hope everyone noticed there that Joe was like, we're calling the function definition, formerly known as add one, but by its new label, new funk. Go inside, new execution context, uh, new local memory. There is this is where I'm not a compiler, because I'm not sure if counter exists.

[00:03:33]
Uh, well, let's just hit the line first, so what's the line? Now we know we have to jump back up to look at add one's code, but JavaScript is looking inside the code here, and what's the line of code it sees to run? Counter plus plus. Well done, counter plus plus. Where do we know it looks first? We would look within the scope of new funk. Well, let's say the local memory, exactly, let's say, yeah, the term is not bad, but do we find, I probably should use green for my lookup, I think, I tend to use uh, yeah, that's fine, let's just use.

[00:04:14]
Uh, I'll use white for now, but do we find counter in local memory? No. We're in new funk. Where does everything suggest, Joe, that we would look next? Well, if we looked by call stack, we'd go to global. And do we find counter? I had to go no. What do we do? Exactly as we heard there, what sort of, to be fair, what sort of programming language will allow this sort of situation to arise where we can define a function inside of the call of another function, return out that function, have it refer to data that's not in local memory and not in global, that seems like a fundamental flaw, but as long as I'm going down the call stack, it all seems right.

[00:05:12]
Um, I don't know how long I'm meant to drag out. Unless, unless it turns out, people, that as soon as I defined that add one function inside the execution context, the running of outer, when it was on the call stack, I didn't just save a function definition. I also immediately got a hidden bond to the, I say oh, we'll add a caveat to that later, to the surrounding data. So that when I returned that function definition out, I didn't just return out a function definition, I pulled on the back of that function with it, all of that surrounding data in a little.

[00:05:57]
I have to tell you, so I, somebody in the audience once called this a backpack, and I will forever be grateful to them, so much so that I can't believe it's a very legitimate JavaScript book from O'Reilly. Teaches closure, all these sorts of things. On page 19 of it, it says, um, it refers to it as the backpack, and then says, although this is not always necessarily the technical name. That made it into an official O'Reilly book, isn't that just, that's my proudest achievement, and I didn't come up with a name, someone in the audience once called it that, and it made it in.

[00:06:43]
That's how scams begin, right, like. Anyway, so what comes into our backpack? Well, it is our counter. With the actual value, not counter will be zero, not declare counter as zero, but the actual stored counter is this zero in memory stored, is pulled out and attached with our function in the global label new funk. New funk is now the function definition, put parens on it and run it, and an attached live store of data.

[00:07:15]
By the way, only available, we'll see, inside of the running of new funk, which might give you some interesting pointers on what needs to be in there, but we'll come to. So with that in mind, Matt, because you've been so great at all this, new funk is called, we don't find counter in local memory. While it would appear everything would say we go into our global, next, what intercedes, where does JavaScript's interpreter go look first before it gets to global and gets sad?

[00:07:50]
Where does it go and look first? It goes uh to look in the backpack. In the backpack, excellent from Matt. It goes to look in the backpack, wait, what does it find, Matt? Uh counter. And does what to it? Adds one. Adds one to it. Beautiful, our backpack got in the way and was checked first, increment to one. Let's hit the call to new function again, we pop this one off the call stack, we know that the local memory cleared, gone, not persistent, doesn't stick around, it's finished, it's off the call stack, I'm going to actually get it off the call stack just so we really don't get tricked.

[00:08:38]
It's gone. It's gone off the call stack, don't, no, no, ignore that bit being erased. It's gone off the call stack, and we hit the call to new function, or new funk, sorry, again. Brand new execution context, does this local memory here have anything in it, well, there's nothing from the previous running, but this is a brand new local memory. Into it we go, Joe, and what line do we hit again in our next call, yet counter plus plus, we've added new funk to the call stack.

[00:09:14]
Where do we go look first for counter? Local memory. In the local memory, yeah, as always, do we find counter? No. Where do you think JavaScript goes next before it hits global? To the backpack, to the backpack. For whoever said the fancy term, very good, to the backpack where it finds counter is one and does what to it? Increments it, increments it to two. So this, the backpack persists like is established when the function definition is saved to new funk and persists.

[00:09:58]
Yeah, yeah, yeah. It sits there, it sits there as a persistent store, locked in, so that when our function new funk runs, not only when it runs does it get a brand new execution context with brand new local memory, it has a persistent attached store of data to it, only available to it inside of the call to that function. You could call it private data. It's only available inside the running, you can't go, well, firstly, let's, okay, let's do, I've gotta work out which order we should do, thumbs.

[00:10:29]
Uh, go ahead, Matt, why not? Uh, I, the one question I had is, could you uh kind of think of it this way, if you're looking at the code, and as you see, add one or counter within it, could you use the parent scope as the brackets being part of that backpack? Oh, that's not a bad way, because we're going to learn that the term used for this has the word lexical in it, and lexical comes from the idea and programming of the code you actually wrote, not the where, not what happens when you run it, but where you saved it, where you actually positioned it on the page.

[00:11:06]
So it's not a wild idea to go, hey, hold on, is it tied to where I defined the function. But be careful tying it to what's inside the parent the um curly braces there, so much as that is an execution of the code, where we are then going to actually save live counter is zero in memory. And at that moment we are going to get a live bond to that surrounding data. And when we return out that function, it's going to pull with it all that surrounding data on the back of the function.