Multiple Closure Instances

[00:00:00]
>> Will Sentance: I don't want anyone confused by this difference here. So we had declare outer, run outer, out came incrementCounter into myNewFunction, run myNewFunction, run myNewFunction again, okay? We know this bit now. myNewFunction, when it came out, got with it all that backpacked data, when it came out of running outer, got all that backpacked data.

[00:00:17]
Meaning, we ran myNewFunction, we had access to all that data in the backpack. From when increment counter was born as a function inside the running of outer out came increment count into my new function. myNewFunction has now increment counter but also, through its hidden scope property all the surrounding live data from when it was born as well me when we run my new function.

[00:00:40]
We still have access to myNewFunctions backpack increment counters, surrounding live data. If you look at this code here, there's our outer you see I put increment counter now on to, multiple lines. Then we've got over here, this is all the same, right outer myNewFunction is a return of outer.

[00:01:02]
Which was increment count interview everything up to here exactly the same. Where things change. I've now added a new block of code here. Don't get confused by the fact I kind of looped it around but the thread of execution is going [SOUND] and down, right, two columns basically.

[00:01:18]
There's nothing profound here. I cannot fit all on one slide. And so, here we got this new block with three lines of code here. Another running of outer, another new execution context, the output of which we sort into another function. We're then gonna run another function twice. Let's do it down to the last three lines Dan, where we speak on the left hand side here about what function?

[00:01:42]
>> Dan: We're declaring it.
>> Will Sentance: So in all function will function what constants already done.
>> Dan: We're declaring a constant another function.
>> Will Sentance: Perfect, thank you, Dan. I will not apologize one more time. But I am sorry for the apologies. All right, another function. Good, another function we're now gonna have to go and run what Dan?

[00:01:58]
>> Dan: Outer.
>> Will Sentance: Outer, exactly. So for now another function is?
>> Dan: Undefined.
>> Will Sentance: We will say uninitialized and I was assorted at all. And I'm gonna come over here, I'm probably have to do my is going to be my bad handwriting angle so we'll give it a try, so another.

[00:02:17]
>> Will Sentance: Rewriting in reverse but another function will be the return of calling what function Tod?
>> Tod: Outer.
>> Will Sentance: Outer what I'm a brand new everybody?
>> Everyone: Execution context.
>> Will Sentance: Beautiful, there it is. We forgot to pop my new function off the cool stat from earlier. So let's get rid of, let's get rid of that.

[00:02:39]
There we go. And there it is global. And another code outer brand new execution context. There it is. Brand new, is it that weird me doing it from this angle, right? Or no, it's okay? Brand new local memory. You're like yeah, it looks really weird. Brand new local memory, what's the first thing we save inside of it, Ethan?

[00:03:06]
Inside of the call to outer we're doing right here, what's the first thing we save inside this local memory?
>> Ethan: Counter?
>> Will Sentance: Set to what value?
>> Ethan: 0.
>> Will Sentance: And then we declare what Ethan?
>> Ethan: New function increment count.
>> Will Sentance: Yeah new function increment counter. There it is, save it.

[00:03:24]
And what do we do with it? We don't call it we do what with it, Ethan?
>> Ethan: Return it.
>> Will Sentance: Into what global constant do you think here?
>> Ethan: Another function.
>> Will Sentance: Into another function, well done. Into another, I'm just gonna show it here, into another function. There it is.

[00:03:46]
Out it comes into another function. Into another function, it comes, but wait, people, I really messed that up. What did I forgot to do? What actually happened, who wants to tell me what actually happened, when I declared incrementCounter inside this second running of outer. When I declared increment counter inside, raise your hand if you wanna tell me what actually happened at that moment.

[00:04:11]
Peter, please.
>> Peter: You also got a bond to the local variable environment.
>> Will Sentance: That's fantastically put. Through what hidden property?
>> Peter: Through scope.
>> Will Sentance: Yeah, through the hidden scope property. Meaning when I return that function out increment counter into another function, I brought with attached all that local data, which included what, Kayla?

[00:04:35]
What's in that local, in that backpack?
>> Kayla: Counter.
>> Will Sentance: Is literally set to what?
>> Kayla: 0.
>> Will Sentance: Is literally stored as 0, and there it is. And that is attached on,
>> Will Sentance: I'm not meant to say this, but I meant to leave it, okay, there it is, okay?

[00:04:51]
So now I'm gonna run, I'm just gonna do it here, people. I'm gonna run, I am probably out of short. I am gonna run anotherfFnction,
>> Will Sentance: That's too slow with that angle, anotherFunction twice. So here's the big question, folk. Brayden, I've called my new function once, I've called it again.

[00:05:15]
Then I pull another function once, and I call it again. Brayden, what values do I see in my console if I were to console log inside of these functions after mechanicus plus, console or the value account? What would my counter values be from those four function calls two my new function and two have another function.

[00:05:41]
What would I see, Brayden?
>> Brayden: I would go one two, one two.
>> Will Sentance: Is he right? He's spot on. And why is that Brayden?
>> Brayden: Because the backpack for my new function and a backpack for another function are two different backpacks.
>> Will Sentance: Totally different backpacks. They were created in brand new totally sober execution context for totally different runnings for outer.

[00:06:00]
He’s spot on. Outer was popped off a cool stack. But when it was on there, it created brand new execution context with a brand new stored saved increment counter function. Brand new saved increment counter function there it is. And we returned that out into another function and brought with it a brand new stored countries 0 store this backpack.

[00:06:19]
We get not only little private backpacks of data but each individual function gets one from our running outer. Very, very nice look compartmentalised source of data. Let's make a couple of other adjustments. Let's try this one if I were to, inside of increment counter before I did counter plus, plus workers declare counter is 0.

[00:06:44]
So our counters here, counters here, counters here. What would my, value in the console told be of counter if I had my counter is zero declared each time inside increment counter?
>> Brayden: The one one one one.
>> Will Sentance: One one one spot on because that local memory all that's counters getting deleted every time.

[00:07:03]
I'm going to counter is zero in here incremented. Console.log it, and then it's gone. Do it again, console.log it, and it's gone. No niceties stored in the background. And by the way, that's just a scope rule. As soon as, in JavaScript, you hit a label, an identifier for a very beautiful data, you change it, and you use it, and it's done.

[00:07:21]
You don't go any further out. You could again imagine a language where you looked all the way out, and hit all of them. But that's like scope is not when we think of these things as inherently true. They're just designed decisions by developer or creators like us have programmable, crazy programming languages who are developers just like us, who are software engineers just like us.

[00:07:39]
And they choose that when you hit counter is zero in the local memory if we had declared it inside of. Increment counter counter is zero kind of as possible have changed it in here brand new each time. Well that would not allow us to go any further out.

[00:07:54]
What if we never declared counter is 0 inside of outer at all such that the returned out function didn't get counter in his backpack. But instead we declared in global counter is 0. Peter, what would I see in my console if I were to console log the counter each time?

[00:08:11]
>> Brayden: I need to 1, 2, 3, 4.
>> Will Sentance: 1, 2, 3, 4, exactly. We go all the way out to global and change it there. Spot on people. All right, that is our core principles of closure under the hood. Now, yeah here we go. Individual backpacks. If we run out here again and store the return the increment counter function definition in another function, in another function, bring with it its brand new stored backpack of data.

[00:08:39]
This new increment counter function was created in a new execution context, therefore brand new independent backpack of data. And we run another function, we go and grab the counter from its backpack.