JavaScript: The Hard Parts, v2

Nested Function Scope

Will Sentance

Will Sentance

Codesmith
JavaScript: The Hard Parts, v2

Check out a free preview of the full JavaScript: The Hard Parts, v2 course

The "Nested Function Scope" Lesson is part of the full, JavaScript: The Hard Parts, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Will diagrams a function that is both defined and called within a function to pose the question of whether its where it's defined or called as to what scope it has access to.

Preview
Close

Transcript from the "Nested Function Scope" Lesson

[00:00:00]
>> Will Sentance: So we saw there that A function can be returned from the running with other function, stored in the global label, used that in the function by its new global label. And it has nothing to do with the original running of the function that from which that inner function was created, was returned.

[00:00:17]
Let's now see. Something slightly adjacent. And the last thing we need to understand, before we hit closure. Calling a function in the same function call, as it was defined. I look at this. I'm gonna save outer, not do any of its code yet, run outer, create counter as 0 inside, store it.

[00:00:36]
Save the function incrementCounter Store it, and then call that function. And then, by the looks of it, we're gonna look for some data that is not inside that incrementCounter function. But we're gonna step out one layer to the call of outer. Calling a function in the same function corners with a fine.

[00:00:53]
Increment counter was defined with saving the call of outer and then use immediately. Call immediately. This is gonna have extraordinary consequences. And also ourselves we thinking what determines the fact that when I run increment counter inside of outer. And I don't find counter inside of increment counter, I'm somehow going to have access to counter stored in outer.

[00:01:16]
Everyone already knows the answer. Well, do you? All right, here we go. Line one. What are we doing in line one over to Matthew, Matthew tonight What are we doing?
>> Speaker 2: You're defining the outer function global scope.
>> Will Sentance: Beautiful define defining the outer function.
>> Speaker 2: Where?
>> Will Sentance: Let's call it in a global memory.

[00:01:40]
Just to keep precise I wanna give you what specifically JavaScript scope's most permanent thing is towards the end of this piece. So for now let's just say outer is to find in our global execution context memory in our global memory, there it is. Excellent. Now, what do we do next, over to you, Kayla, we are going to?

[00:02:08]
>> Speaker 3: Execute the outer function.
>> Will Sentance: Excellent, meaning everybody, we're gonna create a brand new-
>> Speaker 4: Execution context.
>> Will Sentance: Excellent, all right. Into the execution context we go, cool stack really important here cuz we're now calling a function inside of function so it's always gonna be more interesting. So we've got global as always on the bottom.

[00:02:29]
Then we have now outer added on top. Nicely. Nice and ready, right? Is this is surprised myself. In June, we go In our local memory Peter, what are we storing first?
>> Speaker 2: We're storing the variable counter. We have values 0.
>> Will Sentance: Yeah, I know people at the variable so we can alter the value stored in it.

[00:02:54]
Now we hit what night line next over to Braden, what do we do next?
>> Speaker 2: You're defining the function increment counter.
>> Will Sentance: Yeah, inside of which execution context local memory? Just remind us, I know we can see it, but just remind us. We're defining it inside which execution context?

[00:03:12]
>> Speaker 2: Inside the outer.
>> Will Sentance: Inside outer's execution context, we're saving it inside of outer's execution context. And are we using it? Yeah, we are. Braden, what are we gonna do next?
>> Speaker 2: You're going to increment the counter variable.
>> Will Sentance: Yeah we're gonna execute what function? What function next Sweden?

[00:03:30]
Yes, so Braden do you see looked like Braden might jump straight into the function we save the code of the function. Counter plus plus was stored under the label increment counter. And we moved on to do what, Braden?
>> Speaker 2: To call increment counter.
>> Will Sentance: Yeah, what told us to call it?

[00:03:44]
>> Speaker 2: The parentheses.
>> Will Sentance: Parentheses, exactly friends and we create a brand new water everybody. Action contacts excellent. And in its local memory This is getting very small. I'm breaking my rules here in his local memory. Cool stack. What happens on the cool side down? We add increment counter.

[00:04:03]
Yeah we got the cool to increment counter. Onto the call stack there it is, because recording it inside of outer. When we finished running it, global we'll go back to outer, right? It's kind of nice it keeps track of it all. Okay, what is the actual line of code toward inside of incrementCounter that now gets executed?

[00:04:20]
So you just give me the exact words.
>> Speaker 2: An incriment counter.
>> Will Sentance: Yeah, you're all very fancy. Just give me the literally, just to be clear because it's a big ambiguous with my name of my functions. So literally what is the exact words that get run? What's the exact-

[00:04:32]
>> Speaker 2: It'll add one to their-
>> Will Sentance: See, the communication's so good, but literally it says counter plus plus. No don't worry Todd, you're being much more meaningful than just yeah counter plus plus, which means add one to counter. Okay, time to do some look up. I'm gonna use green pen for my lookup And, I'm gonna use green film when I look up, and where do I look for counter first, Matt?

[00:04:57]
>> Speaker 2: You're gonna look in the context of increment counter.
>> Will Sentance: Yeah, beautiful. Do I find counter?
>> Speaker 2: No.
>> Will Sentance: No, so where do I look out next?
>> Speaker 2: Go up to the outer context.
>> Will Sentance: Into outer, do I find counter? You bet I do. You bet I do.

[00:05:11]
I find counter, and increment it to what Matt?
>> Speaker 2: One.
>> Will Sentance: To one, what I;m up, exactly. In other words, everything would suggest right now that I first looked top of my call stack, didn't find what I was looking for. So I guess, because I'm running increment counter, inside the running of outer.

[00:05:29]
What do I do, I went down one layer. Down my cool stack and losing the outer right that sounds right isn't it? Hmm, it seems right to me. I guess I'm running it inside of outside doesn't seem wrong and yet food right now, that is genuinely a mystery as to whether.

[00:05:49]
It's a fact that I'm running increment counter inside the running of outer that gives me access when I don't find counter in local memory of increment counter to go out to outers local memory, or is it the fact that I saved. Increment counter inside the running of outer that I defined it that I literally saved its code inside the running of outer.

[00:06:15]
Right now, I can't tell, I actually couldn't tell you right now. So I did two things with increment counter inside about. (1) I ran it inside of outer. running inside of outer into, I saved it inside of outer. It could be the fact that I see that inside of outer.

[00:06:34]
That means somehow it has a connection when it gets run to the counter that was stored adjacent to it. Or it could be the fact that I run it inside of outer right now. I can't tell. And yet it's going to be fundamental to understanding closure. What the answer to that is

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now