Nested Scope

[00:00:00]
>> Kyle Simpson: Now it start to talk about the idea that scopes can actually be nested inside of each other. So we're gonna even further stretch that bucket metaphor. Now we're talking about the bucket within the side of a bucket within the side of the bucket, it gets really weird.

[00:00:11]
But we're gonna have buckets all the way down, okay? [LAUGH]. So let's process this quickly exactly the same way as we have before, same rules entirely, okay? We start by looking at line one, that's a what kind of marble? Line one is a formal declaration that makes a?

[00:00:30]
>> Class: Red marble.
>> Kyle Simpson: Makes a red marble, right? We're gonna create a red marble. Line three is a formal declaration that creates a what color marble?
>> Class: Red.
>> Kyle Simpson: Line four is a declaration that creates a what color marble?
>> Class: Blue.
>> Kyle Simpson: A blue marble, right? Now we're inside of the blue scope.

[00:00:46]
Line six is a declaration that creates what color module?
>> Class: Blue.
>> Kyle Simpson: The blue module, cuz ask is in the scope of the other class, right? Function declarations make their identifier in their enclosing scope, that's critical, keep that in mind. All right, so then we're inside of ask and it's made of what color scope?

[00:01:03]
>> Student: Yellow.
>> Class: [LAUGH]
>> Kyle Simpson: Sure, change it up on us. We've been using green, but let's switch to yellow. No confusion. [LAUGH] Okay, I'm gonna stick with green cuz I'm gonna say something wrong if I don't say green. We've created a green scope. There's no marbles to create, but there are references to marbles.

[00:01:21]
So on line seven when we reference teacher, what kind of marble is that gonna be? What color marble is the teacher on line 7?
>> Class: Blue marble.
>> Kyle Simpson: Blue marble. And what color marble is the question from line 7?
>> Kyle Simpson: That's a green one.
>> Class: It's blue because question comes with function ask.

[00:01:43]
>> Kyle Simpson: So question is a variable inside of the scope of the function ask, right? So what color marble would that have been?
>> Class: Green.
>> Kyle Simpson: Would've been green. Even though it doesn't have a var there, a parameter is formally creating an identifier in that scope. So we'd have a teacher being a blue marble and question being a green marble.

[00:02:06]
>> Kyle Simpson: So now we have a scope and that's within the scope, and that's within a scope. And that scope resolution by the way, when we ask for a question is basically doing that processing where it says, hey, teacher, do you exist in the ask scope? And then, when it doesn't then we go out to the outer scope and we happened to find it there.

[00:02:23]
But if we didn't, we would have go on and keep going, so you could go 50 levels deep if you really wanna go crazy with it, okay? So what is the value of question?
>> Class: Why?
>> Kyle Simpson: It is the string, Why?, because on line 10, when we execute line 10.

[00:02:43]
We have a value there which we might have had to look up, but in this case it's a literal. And what happens to the string line?
>> Class: It gets passed-
>> Kyle Simpson: It gets assigned to the variable question, so that execution happens at line 10 before ask starts executing.

[00:03:00]
So when we then ask for the marble that we find, which is a green marble and we ask for the value of question, it is?
>> Class: Why?
>> Kyle Simpson: It's the quote, Why?, it's the string, Why?.
>> Kyle Simpson: What's gonna happen with line 14? How does line 14 execute?
>> Class: It's gonna look red button.

[00:03:21]
>> Student: It's undefined?
>> Kyle Simpson: We need to do the same narrative as before, don't jump to conclusions. How does the narrative work?
>> Class: Global scope.
>> Kyle Simpson: Hey global scope, I have a, what kind of reference?
>> Class: A source.
>> Kyle Simpson: A source reference for an Identifier code ask, ever heard of it and the answer is?

[00:03:38]
>> Class: No.
>> Kyle Simpson: So what's the error?
>> Class: The reference ask.
>> Kyle Simpson: The reference ask, okay? Even though ask exist within the program, it doesn't exist in any scope that we have access to at this moment. So it is therefore an undeclared variable unlike the autoglobals, because we're not in strict mode.

[00:03:55]
Unlike autoglobals which go ahead and create a marble for you. If you have a source referenced to a variable that is undeclared, it always throws a ReferenceError, okay? That's why it's critical to understand the difference between a target reference and a source reference. At least if you're in non-strict mode.

[00:04:15]
Once you go to strict mode, they both behave exactly the same, so it stops mattering as much target versus reference.
>> Kyle Simpson: So we're gonna see a reference here, ReferenceError here on line 14. Yes?
>> Student: When we're passing the string why to ask on line ten-
>> Kyle Simpson: Yeah.
>> Student: Is there behind the scenes, is JavaScript saying far question equals why at some point?

[00:04:39]
>> Kyle Simpson: Sort of, yeah, sort of.
>> Student: Okay.
>> Kyle Simpson: I think conceptually it works to think about arguments being assigned to parameters. It's not technically that, but it's close enough that it works for this particular narrative exercise.