Function Closure

[00:00:00]
>> Will Sentance: And so it cave whereas but when he got returned up the function increment counters definition got returned out of the running into my new function and brought with it. All its surrounding local data attached onto the function definition. We'll see all about how this works in a moment.

[00:00:19]
For now, here's a beautiful little there it is a beautiful backpack of data such that here it is, such that when I run my new function before I look into global in full. Where do you think Mark that we look into the?
>> Mark: Backpack.
>> Will Sentance: Into the backpack, spot on by Mark.

[00:00:51]
>> Will Sentance: Into the backpack we go, where what do we find, Kayla?
>> Kayla: The counter is zero.
>> Will Sentance: And what do we do to it?
>> Kayla: We increment it.
>> Will Sentance: We increment it to one, she's spot on. She was so spot on, we have to cut the earlier bit because she gave away the game.

[00:01:09]
And let's keep running. Let's keep running. We'll talk more about it in a moment but let's get out of this execution context. By the way, if there had been anything in local memory, it would've been deleted. I have a feeling this data over here attached to the function definition, that ain't going anywhere.

[00:01:22]
That stuck on the function definition, that ain't going anywhere. Let's keep running, out we come in my new function, we pop it off the call stack. I'm actually gonna have to, even though we're gonna run it again just so that we don't think it's the same, I'm literally gonna take it off the call stack and add it again.

[00:01:39]
There it is. Go back out to global where we hit calling what function. Who should I call on, Dan. Dan, when we hit calling, what function?
>> Dan: MyNewfunction.
>> Will Sentance: MyNewfunction. Brand new what Dan?
>> Bran: Execution context.
>> Will Sentance: Execution context, cool stack, that, what happens, Dan?
>> Dan: MyNewfunction is pushed on.

[00:01:58]
>> Will Sentance: Pushed on, very nicely put. Let's create that execution context for MyNewfunction. Into it we go, nothing in the local memory declared. And what is our line of code we got to run, Todd?
>> Todd: Counter post post.
>> Will Sentance: Well on Todd, excellent. Where Todd do we look for counter first?

[00:02:19]
>> Todd: In the local memory.
>> Will Sentance: In the local memory. Do we find counter?
>> Todd: No.
>> Will Sentance: We don't. Todd, where do we go and look out to next?
>> Todd: Backpack.
>> Will Sentance: Into the backpack, he's spot on. We go look at myNewFunction's definition, we look at the little connection to its permanent stored data, the backpack.

[00:02:35]
And off we go to it.
>> Todd: [LAUGH]
>> Will Sentance: There it is and in we go. We used to be that bit up in the and in we go and it's one and we do what with it? We increment it to, to look at that folk. For the very first time, our function myNewFunction, a function definition doesn't just have it local memory that gets literally I should have actually done this, literally gets right, deleted each time.

[00:03:08]
We now have not only the temporary local memory, that if we don't return something out in storing global, it's gone forever. We also have the very definition the label, the function storage has attached to it a permanent memory. That is remarkable. That is a say no longer is this a label for just a function from code saved, it's a label for funds in closing and some permanent store data attached.

[00:03:33]
Genuinely very very, this is the most elegant feature of all of JavaScript. Elegant meaning like, I know what that means it was sort of like interesting, intriguing and surprisingly kind of nicely crafted feature. And that's what I mean by elegant. I like using that word, that's one of those words people use when they don't know what they mean.

[00:03:50]
To mask not knowing what they mean. They're not sure why they think it's good, and they're like that's elegant. So, let's start talking about some caveats around this, including what do we call this. The first bit I want to talk about though is, how does the function get to grab onto what it surrounding data and return it out with the function definition?

[00:04:11]
What is like this? As soon as, I never quite even have room for this, but as soon as we declare increment counter. That is literally saving in the computer's memory, in the computer store of functions and data, a label, and the code of the function kinda plus plus.

[00:04:28]
That's what this is here. Under the hood, if you had a console log that would see the function definition. Depending on how sophisticated a console is, we'd see the whole code of it, or in more traditional console, you'd might see like function. That behind the scenes, in JavaScript, immediately gets a hidden property.

[00:04:47]
You always know they're hidden properties when they have little square brackets before and after them, in the spec, in the rules of JavaScript. It gets a hidden property, square bracket, square bracket, that means there's a hidden property. Scope, square bracket, square bracket, it is a hidden property that links to where all this surrounding data is stored.

[00:05:09]
It gives a little link to all that surrounding data. Meaning when I return that function out, increment counter out of out of into my NewFunction, you bet it brings it's hidden property and pulls that data with it through its hidden square bracket, square bracket, scope, property. It's still attached when we give that function its new global label, my new function.

[00:05:38]
And when I run my new function I don't find in the local memory counter, it kind of intercedes. It gets stuck in the way before we go out to global, which first check the backpack. And that's where we see our counter is stored and it ain't going anywhere.

[00:05:54]
It's not like an execution context temporary memory. It's permanent as long as its function definitions they're not overwritten, this stuck around, is still there permanently. We can't get access to it though in any other way besides running this function and hoping the code was written in such a way when it was defined, when was born, was initially saved, that it looks for something a local memory, it ain't there.

[00:06:18]
It refers to something is not a local memory. Then it goes out and looks on the scope property into the backpack. And there was something from when we save that function that's being pulled out in the backpack. We cannot do this, this is not allowed. There's no like MyNewFunction.backpack.counter.

[00:06:36]
That is not we can't get access to it that way. We can't go MyNewFunction even.scope. This is a hidden property, we can't access it. It's ther, behind the scenes, but we can't even go myNewFunction.scope.counter. The only way to get to that data is by running this function, having it refer to something not in local memory of it, and going out to the function's definition looking in its backpack and finding counter there.

[00:06:59]
Absolutely a very, very special feature. We now have permanent, but also by the way, let's call it private data. No one else can access it besides by running the function that we created to get access to it in our application. And you know what, I'm actually gonna save for now any further words on this besides to say, just be thinking, if I have a function now that has a permanent memory, think what sort of things I can do.

[00:07:24]
I won't talk about all the things we can do, but for just a hint, I can have this function the second time it runs, check if counter is one, suppose I increment it first time. If counter is one then return, sorry, you can't run me more than once.

[00:07:40]
That is to say this function remembers the previous running via its permanent memory.