Lexical Scope Review

[00:00:00]
>> Kyle: So let's just make sure we're all on the same page here. We recall that JavaScript is not an interpreted language and that it goes step by step one line at a time. But rather, we should think about JavaScript as a two pass processing. First pass, we could call it compilation or parsing if we feel better about that.

[00:00:21]
But we're gonna go through the entire code. And there's lots of things that happen during the parsing and compilation, but the main thing that happens is all of the scopes, all of those colored marble buckets, the plan for those all get created. We figure out where all the scope boundaries are.

[00:00:39]
And indeed, all of the identifier references, those are color coded as marbles. So we'll have a red marble or a blue marble or a green marble. And we'll use that information about the color of the marble and what bucket it comes from, that information is critical and useful in the second pass when we execute code.

[00:00:58]
So we're gonna run through the conversation as our review. And I'm gonna expect, hope, that all of you are participating with it, rather than me only being the one speaking. So follow along with me as we do this. If you're watching on the livestream, talk out loud to your computer, even if that feels silly.

[00:01:16]
Again, it's the teacher trick, that if you physically say this with your mouth, it'll help you to remember these things. So we'll go through this conversation again, the first pass compilation, second pass execution. In the compilation phase, remember it's the compiler and the scope manager or the parser, whatever you want to think of, and the scope manager, they're gonna be talking.

[00:01:33]
So we'll play the part of that parser or compiler. And we'll arrive at something like line one and we'll say, as compiler will say, hey, scope manager, we're talking to the global scope now. And we'll say, hey, scope manager, I have a formal declaration for a variable called.

[00:01:50]
>> Speaker 2: Teacher.
>> Kyle: Teacher, right, and have you ever heard of that before? So we're talking to the red bucket. We'll say have you ever heard of it before? If we'd seen var teacher a couple of times in the same scope, the reason for that question is we don't need to make multiple marbles with the same name.

[00:02:04]
It only needs to be created once for the same scope, and there really is no such thing as recreating it, okay? So that question would be have you ever heard of this identifier called teacher, and the response would be?
>> Speaker 2: No.
>> Kyle: No, but I've created, what a color marble?

[00:02:20]
>> Speaker 2: Red marble.
>> Kyle: Red marble, [SOUND] we drop it in the red bucket, okay? Now we find the next formal declaration, line 3. Hey global scope, I have a formal declaration for-
>> Speaker 2: Other class.
>> Kyle: Other class, ever heard of it? And the answer is-
>> Speaker 2: No.
>> Kyle: Never heard of it, but here's your-

[00:02:36]
>> Speaker 2: Red.
>> Kyle: Red marble, [SOUND] we drop it in the red bucket. By the way, global scope, that red marble, that was pointing at a function. So we need a new bucket, we need a bucket inside of a bucket. Can you make us a blue bucket? Sure, okay now let's talk about the blue bucket.

[00:02:53]
So we stepped inside of the blue bucket, we move to line 4 and we find another formal declaration. Hey, scope of other class. Hey, blue bucket scope, I've a formal declaration for teacher. Have you ever heard it? And the answer is?
>> Speaker 2: No.
>> Kyle: Why, why haven't we heard of teacher?

[00:03:11]
>> Speaker 3: It's a new bucket.
>> Kyle: Cuz we're talking to a different bucket here, right. And it's important to keep that in mind because when we get to processing, we will ask other scopes. But here we're only considering, since it's a formal declaration, we're only asking has it been created for this particular scope?

[00:03:27]
And the answer is no, but here's your what color marble?
>> Speaker 2: Blue.
>> Kyle: Blue marble, okay, [SOUND] now it's in the blue bucket. We don't see any more formal declarations in that function, so we step back out to the global scope, the red bucket. The next formal declaration we find is on line 8.

[00:03:43]
Hey, global scope, I have a formal declaration for an identifier called?
>> Speaker 2: Ask.
>> Kyle: Ask, ever heard of it? And the answer is?
>> Speaker 2: No.
>> Kyle: But here's your-
>> Speaker 2: Red.
>> Kyle: Red marble, great, we dropped the [SOUND] the red marble in the red bucket. By the way, global scope, that identifier is pointing at a new function, so we need a new bucket.

[00:04:03]
Let's make this one green. And the global scope says, sure, here's your green bucket. Now we're gonna step into that function and deal with the green bucket. Hey green bucket, hey scope of ask, I have a formal declaration for?
>> Speaker 2: Question.
>> Kyle: Question, ever heard of it? And the answer is?

[00:04:20]
>> Speaker 2: No.
>> Kyle: But here's your-
>> Speaker 2: Green marble.
>> Kyle: [SOUND] Green marble goes the green bucket. No more formal declarations in that function, we step back out to the global scope, no more formal declarations in the global scope, and we're done processing. Now it's process this code, let's execute the code.

[00:04:36]
Remember all the plans for all the scopes and everything is already done, we don't have any decoration anymore, we just have executable code. Line one is going to execute, and we know that teacher is in what kind of position? What position is teacher in? It's either a source or it's a?

[00:04:53]
>> Speaker 2: Target.
>> Kyle: Target, and it's in a target position here. So we're going to say we are now the execution engine, the VM, whatever you wanna call it. We are going to execute this code and we are going to say, hey scope manager, hey global scope, I have a target reference for teacher, ever heard of it?

[00:05:08]
And the answer is?
>> Speaker 2: Yes.
>> Kyle: Yes, because there is one in the scope. So here’s your-
>> Speaker 3: Red marble.
>> Kyle: Red marble, thank you very much. I go to the right hand side, I find the value. I assign it in the target, and we are done with line 1.

[00:05:21]
Now execution is gonna move to line 13, because remember, all the declarations have been compiled away. We still see them there for symbolic reasons, but they're not really there like that, right, this is only executable code. So execution moves to line 13. How does line 13 itself execute?

[00:05:36]
Hey, global scope, I have a what kind of reference? Source.
>> Speaker 2: I have a source reference.
>> Kyle: It's right down here at the bottom. I have a source reference. Why is it a source reference?
>> Speaker 4: It's getting values, right?
>> Kyle: The best answer is because it's not a target reference.

[00:05:52]
If it's not receiving a target, it must be a source, cuz that's the only two options. So we clearly see it's not receiving a target, it's not the target receiving something, so it must be a source. So, hey, global scope, I have a source reference for other class, every heard of it?

[00:06:05]
And the answer is?
>> Speaker 2: Yes.
>> Kyle: Yes, here is your.
>> Speaker 2: Red marble.
>> Kyle: Red marble, we go and look what's in that red marble, conceptually, what's in that area of memory? What is that red marble holding right now?
>> Speaker 2: Blue bucket.
>> Kyle: A reference to that function which we call other class, right?

[00:06:23]
It's the blue bucket if you will, exactly. So now we're going to execute that, which is what the parentheses do on the end of that line. They execute the function that we found. If we hadn't found a function we would have gotten a what kind of error, anybody remember?

[00:06:36]
A type error, reference errors will be different. We'll get to those in just a little bit, okay? All right, so we are executing the other class function. Execution moves to line 4. Hey, what scope?
>> Speaker 2: Blue.
>> Kyle: Blue scope, hey scope of other class. I have a what kind of reference?

[00:06:53]
>> Speaker 2: Target.
>> Kyle: I have a target reference for?
>> Speaker 2: Teacher.
>> Kyle: Ever heard of it, and the answer is?
>> Speaker 2: Yes.
>> Kyle: Here's your?
>> Speaker 2: Blue marble.
>> Kyle: Blue marble, great, so now we have a blue marble. We go to the right hand side. We find the string Suzy.

[00:07:05]
We assign it and we're done with line 4. Line 5, we have a what kinda reference?
>> Speaker 2: A source.
>> Kyle: A source reference for?
>> Speaker 2: Global scope.
>> Speaker 4: Console.
>> Kyle: A source reference for console. Hey scope of?
>> Speaker 3: Blue bucket.
>> Kyle: Hey scope of other class. Have you ever heard of console, and the answer is?

[00:07:30]
>> Speaker 2: No.
>> Kyle: No, so where do we go next?
>> Speaker 2: Up.
>> Kyle: We go up one level, which in this case is the global. And we ask the same question, hey global scope, I have a source reference for console, ever heard of it, and the answer is?
>> Speaker 2: Yes.

[00:07:42]
>> Kyle: Even though we didn't declare it, the JavaScript environment has provided it to us. So in effect it's there, whether it's in the scope or not, in effect it's available to us. So the response that we get is yes. Here's your red marble, essentially, maybe it's a pink marble.

[00:07:54]
But here's your red marble, okay? And then we can access a method, a property on the object, and so on and so forth, and we can execute the function, okay? Now, execution's finished with line 13, we move to line 14. 14 executes exactly like 13. Hey, global scope I have a what kind of reference?

[00:08:12]
>> Speaker 2: Source reference.
>> Kyle: Source reference for?
>> Speaker 2: Apps.
>> Kyle: Ever heard of it and the answer is?
>> Speaker 2: Yes.
>> Kyle: Here's your.
>> Speaker 2: Green marble.
>> Speaker 3: Red marble.
>> Kyle: Red marble. Remember we're in the global scope now. So we're talking about an identifier in that scope, a red marble.

[00:08:25]
>> Speaker 2: [LAUGH]
>> Kyle: Okay, all right, so now we have the red marble. What's being held in that location of memory?
>> Speaker 4: Red marble says go to green bucket.
>> Kyle: It is-
>> Speaker 4: No?
>> Kyle: That particular marble is referencing the function which has the green scope attached to it.

[00:08:43]
But here's the function reference right? Functions have a scope but they aren't a scope okay? So here's the function reference. We execute it which is going to end up invoking as you were saying the green scope. So now we're in the green bucket. We move execution to line 9.

[00:08:57]
How does line 9 execute? Hey, scope of?
>> Speaker 2: Green.
>> Kyle: Green bucket, hey scope of ask, what kind of reference?
>> Speaker 2: Target reference.
>> Kyle: Target reference request, ever heard of it? And the answer is?
>> Speaker 2: Yes.
>> Kyle: Yes, here's your?
>> Speaker 2: Green marble.
>> Kyle: Green marble, we take the string Y on the right hand side, assign it, and now line 9 is done.

[00:09:18]
Finally, line 10, we look up console. We don't find it in the scope of ask, where do we find it?
>> Speaker 2: In the global [CROSSTALK]
>> Kyle: So red marble, right, we find it in the global scope, exactly like we did from line 5. But before we can call that log method on the console object, what do we have to do first?

[00:09:35]
>> Speaker 2: You have to source-
>> Kyle: We've got to figure out what that is. So that question is going to be, hey, scope of?
>> Speaker 2: Green bucket.
>> Kyle: Green bucket, hey scope of ask, I have a what kind of reference?
>> Speaker 2: Source.
>> Kyle: Source reference request, ever heard of it?

[00:09:48]
And the answer is?
>> Speaker 2: Yes.
>> Kyle: Yes, here's your?
>> Speaker 2: Green marble.
>> Kyle: Green marble, and what is in the green marble at that moment?
>> Speaker 2: Why.
>> Kyle: The string, Why?, and because it's an argument, what are we gonna do with that argument? We're going to pass that argument into that function, which has the effect of assigning that argument to a parameter.

[00:10:13]
So the final step here, which we don't see that function, but the final step would have been that function saying, hey I have a parameter that's receiving this assignment. I need to look up that marble, then receive the assignment, everybody with me? Same process, even though we don't see the equals sign there, conceptually the same thing's happening, an argument's assigned to a parameter.

[00:10:33]
Okay, line 10 is done, line 14 is done, and our program is complete.