This course has been updated! We now recommend you take the Deep JavaScript Foundations, v3 course.

Check out a free preview of the full Deep JavaScript Foundations course:
The "Scope and Execution Example" Lesson is part of the full, Deep JavaScript Foundations course featured in this preview video. Here's what you'd learn in this lesson:

Kyle walks the audience through another example of how the JavaScript compiler will declare and execute variables and functions. This example includes a nested function which creates a nested scope.

Get Unlimited Access Now

Transcript from the "Scope and Execution Example" Lesson

>> Kyle: Here's the slide, the more complex example. Since you've already practice this, you should be able to help me go through this very quickly. We're gonna run through this code exactly the same as we did before. We're gonna compile it first and then we're gonna execute it.
>> Kyle: All right.

[00:00:21] How do we start? How is the compiler going to start? Which scope are we talking to, on line one?
>> Speaker 2: Global.
>> Kyle: Okay, global scope. I have a formal declaration for-
>> Speaker 2: Foo.
>> Kyle: Foo on line one, ever heard of him and the answer is?
>> Speaker 2: No.
>> Kyle: No, but now I've created that red marble and put it in the red bucket.

[00:00:41] Thanks very much. What do we do next?
>> Speaker 2: Three?
>> Kyle: Bar?
>> Speaker 2: Bar>
>> Kyle: A global scope. I have an identifier called 'bar', ever heard of him? The answer is-
>> Speaker 2: No. No.
>> Kyle: But now I've got another red marble in the red bucket, called bar. By the way, that marble happens to point at a function So let's step into the function.

[00:01:03] What's next?
>> Speaker 2: I don't know.
>> Speaker 3: Scope.
>> Kyle: What scope are we talking to?
>> Speaker 3: Scope of bar.
>> Kyle: A scope of bar. We have a formal declaration for foo. Ever heard of any answer is?
>> Speaker 3: No.
>> Kyle: No, because this is a different bucket now. We're not asking about the var foo in the red bucket, we're now talking to the blue bucket.

[00:01:24] Say, scope of var, I've got a variable called foo. Ever heard of him? And the answer is no. But now I have a blue marble. What's next? A scope of bar, I have an identifier called baz, have you heard of him and the answer is?
>> Speaker 2: No.
>> Kyle: Nope but now we have another blue marble in the bucket, baz is in the blue bucket along with foo, right?

[00:01:55] By the way, baz is pointing a function, let's go inside of baz and make another bucket. This is like the green bucket. Okay, so now we've made a green bucket for the scope of baz. How do we proceed?
>> Speaker 2: A scope of baz.
>> Kyle: What line are we on?

>> Speaker 2: Six.
>> Kyle: A scope of
>> Speaker 2: baz.
>> Kyle: Baz. I have a formal declaration for a parameter called foo, anyone ever heard of him? The answer is?
>> Speaker 4: No.
>> Speaker 2: No.
>> Kyle: No. But now we've made a green marble, with the parameter foo. Okay? We keep going. Anything to do with line 7?

[00:02:30] What about the line 8? No.
>> Speaker 2: No.
>> Kyle: So now we step back out. Now we're on line 10. Anything to do with line 10?
>> Speaker 2: No.
>> Kyle: Other than storing metadata, which we'll come back to at runtime, there's no formal declarations on those. If we come back out to the global scope starting with line 13, any more formal declarations there?

>> Speaker 2: No.
>> Kyle: So are we done with compilation? Okay, great.Now It's time to execute.Remember, all the variable declarations and function declarations have been compiled away.Where does execution start?
>> Speaker 5: Line one.
>> Kyle: Line one, how does line one execute?
>> Speaker 5: A global scope.
>> Kyle: A global scope I have a.

[00:03:17] I have a left hand reference for foo. Ever heard of him? The answer is?
>> Speaker 5: Yes.
>> Kyle: Sure so now I've been given that red marble back. I go to the right hand side. I look at the quote bar. I have that value. I make the assignment. Line one is complete.

[00:03:33] Lines three thru eleven have been compiled away and so execution moves to line 13. How does line 13 itself execute? You have to tell me how does line 13 itself execute. Same process that we've doing all along. Hey global scope, I have a what kind of reference? Bar?

>> Speaker 2: The left.
>> Speaker 5: Right.
>> Kyle: So some of you say left, some of you say right.
>> Speaker 5: Right.
>> Speaker 4: Left.
>> Kyle: A left hand reference is otherwise known as a target reference, right? So that would have to be the target of an assignment. Is it the target of an assignment?

[00:04:14] So if it's not a left hand reference it must be a right hand reference. Kind of like with the falsey truthy thing, it's truthy because it's not in the falsey list, it's the right hand value because it's not a left hand value because it's not receiving the target, it's not the target we are saying.

[00:04:30] Okay, so that's an RHS, that's a right hand sign value for an identifier called bar, First time we've seen that in our examples so far. Okay, So, we're going to say, hey global scope, I have an rhs reference for bar and the answer is?
>> Speaker 2: Yes?
>> Kyle: Yes, so we go and get that marble out.

[00:04:48] That's a red marble, right? Now we need to know what is in the value of bars and since we're using it as a right hand, we need also the value. We go look for the value. What is currently in bar?
>> Speaker 2: A function?
>> Kyle: A function. Okay? There's currently a function in bar, that's great.

[00:05:07] So, we go get that function and then we come to these parenthesis here on line 13 and we execute it. So, your instinct is to think of line 13 as a single statement but is actually two very separate and important operations, the first one Go resolve the bar expression to find out what value it is.

[00:05:25] The second thing is to do that parenthesis execute. Parenthesis aren't technically an operator but in this case they are sort of working like an operator. They are executing the function. Okay. Makes sense?
>> Kyle: All right, so now that we executed bar where does execution move to?
>> Speaker 5: Line 4.

>> Kyle: Line 4, how does that go?
>> Kyle: A scope of bar, I have a,
>> Speaker 2: L H S.
>> Kyle: L H S for foo, ever heard of him? And the answer is?
>> Speaker 2: Yes
>> Kyle: Yes, because you compiled him just a few microseconds ago. Excellent. So, we find that blue marble now and then we go to the right hand side we find quote baz, we make the assignment.

[00:06:15] Line four is complete. Six through nine have been compiled away. Execution moves to line 10, how does line 10 execute?
>> Speaker 2: A scope of bar.
>> Kyle: A scope of bar, I have a?
>> Speaker 2: RHS4.
>> Kyle: RHS4. Baz, ever heard of him? The answer is?
>> Speaker 2: Yes.
>> Kyle: Yes, because you formally declared him.

[00:06:36] Now, what is the value in baz? A function, so then we go to the parentheses on line 10 and execute. Execution then moves to line.
>> Speaker 2: Seven.
>> Kyle: Seven. How does line seven execute?
>> Speaker 6: A function baz.
>> Kyle: A scope of baz. I have a.
>> Speaker 6: I have a [CROSSTALK].

>> Kyle: A left hand side reference for foo.
>> Speaker 6: A left hand side of foo.
>> Kyle: Ever heard of them?
>> Speaker 2: Yes.
>> Kyle: Yes, because you declared them on what line? The sixth, the parameter, okay? So now we have the green marble, we can assign bam into foo, and we're done with line 7.

[00:07:16] How does line 8 execute?
>> Speaker 2: A scope- [CROSSTALK]
>> Kyle: A scope of? Baz, I have a.
>> Speaker 2: LHS.
>> Kyle: LHS for bam. Ever heard of him? The answer is, go fish, all right? So where do we go next.
>> Speaker 2: We got scope of bar.
>> Kyle: We got scope of bar.

[00:07:38] A scope of bar, I have a LHS for Bam. Bam, ever heard of him? The answer is?
>> Speaker 2: No.
>> Kyle: Go fish. Where do we go next?
>> Speaker 2: Global scope.
>> Kyle: A global scope, I have a?
>> Speaker 2: LHS.
>> Kyle: LHS for?
>> Speaker 2: Bam.
>> Kyle: Ever heard of him?

>> Speaker 5: No, but I will create it for you [LAUGH].
>> Kyle: No, but I went ahead and created one for you anyway. Aren't I so helpful? Argh! So now we go to the right hand side, find this yay value. We assign it into the global variable bam as opposed to local variable, okay.

[00:08:14] Execution finishes with line eight, that takes us back to ten. That finishes back to line 13. How does line 14 execute?
>> Kyle: Hey global scope I have a RHS for foo, have you ever hear of him? The answer is?
>> Speaker 2: Yes.
>> Kyle: Yes, we're going to get his value and it is.

>> Speaker 2: bar.
>> Kyle: I heard multiple answers. Who thinks of something other than bar?
>> Kyle: Okay? It's gonna be bar. Why is it not baz or bam?
>> Kyle: Those are different marbles. Even though they have the same name, we found those in different buckets. Remember how that look up was essentially first come, first serve.

[00:09:00] We asked the very first scope that we could find. So when we were on line four we didn't care about the marble in the bucket on line one. Because we already had a matching one. It is first come first serve in terms of that blue bucket. So foo has the value bar.

[00:09:19] What about line 15? What does it execute? A global scope, we have RHS for?
>> Speaker 2: Bam.
>> Kyle: Bam, never heard of him, the answer is?
>> Speaker 2: Yes.
>> Kyle: Well now we have. Had line 15 been on line 12, we wouldn't have heard of him, right? But because it's happened after bar was called, we now have a bam.

[00:09:40] We go ask for the value of bam, and what is it? Yay.
>> Speaker 2: Yay.
>> Speaker 4: Undefined.
>> Kyle: No no no. You have to say it in the most ironic tone possible. Yay. The value of bam is yay. 'Cuz this is a terrible thing to have a global variable with that value in it, right?

[00:09:59] All right, line 16. How does line 16 execute? [CROSSTALK] [INAUDIBLE] I have a [CROSSTALK] HRS for baz. Ever heard of it and the answer is [CROSSTALK] Have we heard of baz in the global scope?
>> Speaker 2: No.
>> Kyle: What scope, what bucket was this one in? R, It was in the blue bucket right?

[00:10:20] So when we are asking, only the global bucket, Only the red bucket. We never heard of a bam. So what do you think. You think its just gonna go out and create one for us?
>> Speaker 2: no
>> Kyle: no it's gonna throw a reference error. So this is the difference between LHS and RHS which is the whole reason I had you understand the difference between the two.

[00:10:41] Because unfulfilled LHS references like line 8, created an implicit global. Unfulfilled RHS reference like line 16, always create a reference error. Okay?
>> Kyle: In a sense once you learned strict mode, you don't have to pay any attention cuz they both created reference error but when you're not in strict mode, the difference depends on what context it was in, make sense?

>> Kyle: Just one final time to reiterate here an unfulfilled LHS reference, that is a variable that is referenced on the left hand side as the target of an assignment but has never been formally declared anymore An unfulfilled lhs reference in no strict mode results in an implicit global variable.

[00:11:40] An unfulfilled rhs reference, that is, a reference, a variable in the right hand side position, the source value position that has never been formally declared in any scope that we have access to. An unfulfilled rhs reference Always results in a reference error. Reference error baz is not defined.

[00:11:59] And the difference between undefined and undeclared is what?
>> Speaker 2: Undefined is clear but doesn't have a.
>> Kyle: And.
>> Speaker 2: And not defined is not-
>> Kyle: Undeclared is Never formally declared in any scope we have access to. Let me say that one last time, undefined definitely been declared just at the moment has no value.

[00:12:26] And by the way a lot of people like to think it doesn't have a value yet. That's what they'll say, it doesn't have a value yet. If you just say bar foo semicolon, right. Well, it turns out a variable can have a value and then you can take the value away.

[00:12:41] You can assign the undefined value to a variable, which has the effect of getting rid of any other value that it had. So the most appropriate thing is an undefined variable is a variable that does not currently have any other value. That's the way to say it. A variable that does not currently have any other variable.

[00:12:59] Any other value.
>> Kyle: I like to think of this lexical scope like this. This is the metaphor and this is how we'll wrap For now, we like to think of this as sort of like a lookup process kinda like if you were looking for somebody's office in a building and he said hey I need you to come to my office and just find me.

[00:13:27] So you'd start in the first floor and you'd say do I have that office on this floor? The first four represents the current scope, if you don't find it, you go up one level. And then you go up and you go up and you go up and you either find it at some point or you get to the very top of the building.

[00:13:42] The top floor, and you either find it or not, but there's nowhere else to go. So it helps me to think of it as the Elevators or stairs in a building, think about that process, okay.
>> Kyle: So that's nested Lexical Scopes, we're gonna take our break here for today.

[00:14:07] We're gonna meet back tomorrow morning sharp at 9:30 and we'll pick up continuing with Lexical Scopes. Thanks and have a great night.