Retaining Function Memory

[00:00:00]
>> Will Sentance: All right folks, so here we go, let's jump in, line one, what are we doing to Ethan. That phrasing was very strange, line one, what are we doing, comma, to Ethan.
>> [LAUGH]
>> Speaker 2: I'm declaring the function outer.
>> Will Sentance: Excellent, thank you, Ethan, there it is, Outer, okay, Save, next line, Ethan.

[00:00:22]
>> Speaker 2: And then we are declaring the constant myNewFunction.
>> Will Sentance: Very nice, myNewFunction, any idea what to store in there, Ethan?
>> Speaker 2: Not yet.
>> Will Sentance: No, because we've gotta go ahead and do what?
>> Speaker 2: We have to call Outer?
>> Will Sentance: You put it perfectly, exactly, we've got to go and put Outer on the call stack.

[00:00:44]
There it is on the call stack, always got global on the bottom. One global execution context, many function level execution contexts. It's uninitialized for now while we head off and run Outer, that's right, everybody, take that deep breath, it's coming.
>> Will Sentance: We've got to execute Outer, its results when we sort of myNewFunction is returned values when we sort myNewFunction.

[00:01:10]
We need a brand new?
>> Speaker 3: Execution context!
>> Will Sentance: Beautiful, thank you Mark, thank you to everybody, here it is. I'm going to try and draw, look at this, I'm going to try and draw the other line straight this time. That's not as bad as usual, right, not as bad as usual.

[00:01:28]
Okay, into it we go and in our local memory first thing we save, Kayla?
>> Speaker 4: We're going to declare a counter variable to zero.
>> Will Sentance: Yeah, send it to 0, that literally means, people, it used confuse me and I used to think. Maybe it's like just sort of saying counter is 0.

[00:01:53]
No, literally we took that label, that word, put it in the computer's memory 0s and 1s. Pull that 0, put it in the computer's memory, it is absolutely stored. Okay, next line, Braden, what are we to say to do here? It's a funny sort of single line, but it's hopefully clear.

[00:02:07]
>> Speaker 2: So you're declaring the function increment counter.
>> Will Sentance: Beautiful, now I'm going to do it definition in a different color. Braden, is this function being cored, being invoked, being run right now, or are we instead doing something else with it?
>> Speaker 2: We're doing something else with it.
>> Will Sentance: Absolutely, we are not running it, is not going on our call stacks up here.

[00:02:35]
Instead we grabbing it and doing what with it, Braden?
>> Speaker 2: Returning it to myNewFunction.
>> Will Sentance: Absolutely, returning it out to myNewFunction. It's going to be the output of calling outer, and we're gonna store it in myNewFunction. Again, it was born as incrementCounter, but we're not gonna call it that anymore.

[00:02:59]
That was its birth, thatt's sort of Its original name. Now it's been returned out and it's now stored as myNewFunction. People, this execution context and everything in it, what happens to it? Deleted, gone, a thread wove in and it wove out and the execution context is deleted. Hope that's not too messy there, we can see this clearly, [SOUND] gone.

[00:03:26]
What happens to on the call stack everybody? It's popped off, I should have made it clearer, popped is to take something off a stack, it's just a fancy word for removing it. And push is to add on to the stack. So add on to a stack, in this case, a stack of calls to functions, running of functions, has gone.

[00:03:43]
And we're back out to global, where we hit what line, Jeff? What is that line we hit in global?
>> Speaker 2: We call myNewFunction.
>> Will Sentance: Absolutely, and in terms of our call stack, Jeff, what's gonna happen?
>> Speaker 2: Create a new execution context.
>> Will Sentance: Yeah, and all the tool stack that we are going to add.

[00:04:01]
>> Speaker 2: MyNewFunction.
>> Will Sentance: Yeah, the call to myNewFunction, perfect, nice handwriting. All right, brand new execution context, I saved you all from injury go, that never works. Injury go and we go and what is our line of code as our local memory? What is that line of code that we hit inside of this function, Mark?

[00:04:34]
It's now called myNewFunction, but it was born as increment counter. Our eyes are gonna creep back up the page, jobs is not doing that. It has literally the code of that function saved over here, and that code is, the exact words, Mark? What are the exact that words of the code of myNewFunction, formerly increment counter?

[00:04:50]
What's the exact code it's gonna run? Actually, I've got to get this one to Todd.
>> Speaker 2: Yeah, Counter ++
>> Will Sentance: Counter ++, well done, Todd, exactly, there it is counter ++. Green is my look-up color, where do I look first, Todd?
>> Speaker 2: Yeah, so you look in your local memory.

[00:05:11]
>> Will Sentance: Do I find counter?
>> Speaker 2: Do not.
>> Will Sentance: Where am I running myNewFunction, Todd?
>> Speaker 2: In the global.
>> Will Sentance: And so everything intuitively would say where do I look next, Todd?
>> Speaker 2: In the global memory.
>> Will Sentance: In global, thank you, man. Do I find counter in global?
>> Speaker 2: No.

[00:05:28]
>> Will Sentance: Absolutely not, this is a disaster [SOUND] disaster. What a strange language that let's save functions, return them out, call them, and try and use data [SOUND] that's gone. We're running myNewFunction in global, we look in myNewFunction, no counter. And we look out to global, no counter. Raise your hand if you already know the answer to what's gonna happen here.

[00:05:52]
So not necessarily clear, right, this is a mystery. And who knows if the people who raise their hands even know? For this is very mysterious, we don't exactly. How long can I play it out, [SOUND] very sad. God, this is just silly, we didn't find our counter hmm, why would we do all this work?

[00:06:24]
How awkward can I make this by how long [LAUGH. Why do we do all this work if only not to find counter? This is a disaster, this is a disaster! And yet, people, you know what? There's something we didn't say here. It turns out that when I took that increment counter function definition, all its code.

[00:06:50]
And returned it out as the output of running Outer [SOUND] into myNewFunction. I got more than just the code of the function counter ++. I got more than just saved code, the function definition. People, I got something so, so powerful in addition, check this out. This is very, very special, this is an elegant feature of JavaScript.

[00:07:18]
I got this, when I returned this function out, I got something else with that function. As that function left, it took with it all, and we'll add some caveats on this in a moment. It took with it all the surrounding data from where that function was saved, where it was born, where it was stored.

[00:07:44]
It grabbed its surrounding data, and brought it out and to sort of show it on its journey. [SOUND] [LAUGH] it brought all that surrounding data out, racing along with a function on the back of the function. Yes, yes, you like little functions? At this point it's parody, isn't it?

[00:08:08]
On the back of the functions, like a little backpack on the function. Yes, online viewers, like a backpack, it's a legitimate technical term, it's a real thing. On the back of the function, as the function came out, it brought on its back, all the surrounding data, little bit of a caveat on that.

[00:08:24]
All its surrounding data, brought on the back of the function, attached. And when we saved that formerly known as incrementCounter function into myNewFunction. We didn't just get the function definition. We got attached onto it a backpack from when that function was born of live data, and there counter is 0.