This course has been updated! We now recommend you take the Deep JavaScript Foundations, v3 course.
Transcript from the "Compiling Function Scope" Lesson
[00:00:00]
>> [MUSIC]
[00:00:04]
>> Kyle Simpson: So, now that we see that we're in a function, we know that's a new unit of scope, so we're gonna sort of recursively descend into that function, and we're gonna compile the contents of that function. It's not a terribly interesting function obviously, at this point, but we're gonna look for declarations.
[00:00:20] Where is the next declaration that it's gonna find?
>> Kyle Simpson: Tell me line numbers.
>> Speaker 2: Four.
>> Kyle Simpson: Line four it's gonna find a variable declaration for foo. Now what scope is it in?
>> Speaker 2: The bar.
>> Kyle Simpson: It's the scope of bar, so it's gonna say hey scope of bar I have a new declaration to declare.
[00:00:38] His identifier name is foo, so we're starting to have this conversation. This is the compiler having a conversation with Scope portion of engine, the Scope manager. Okay, do I have any more declarations in my current Scope of bar? No, okay, we're done with the function bar. We've compiled the function bar.
[00:00:55] Let's move on. We're back to our global sub, so we popped ourselves back out to the global Scope. Where's the next declaration that we find?
>> Speaker 2: Seven.
>> Kyle Simpson: Line seven, we find a function called baz. Okay, let's declare a global Scope, I've got a declaration for an identifier called baz.
[00:01:13] He happens to be a function declaration. Go ahead and add him to your declaration list for the global Scope. Now let's recursively descend into that function baz and compile him. Where's the next declaration that I find?
>> Speaker 2: Our unit?
>> Kyle Simpson: See, there's a tricky little one, not as many people will catch that.
[00:01:30] There is a declaration, an implicit one, because we have a named parameter called foo. There's a name parameter and that name parameter will be treated like a local variable. It's kinda like there was a var foo right here. So we can assign to that variable. We can read the initial value that might have been passed into it out.
[00:01:46] We can treat it in all other ways like it's a regular local variable. So there's a declaration that we need to declare. Which scope are we in?
>> Speaker 2: baz.
>> Kyle Simpson: The scope of baz, so hey baz, hey scope of baz, I've got a declaration for a variable and he's called foo, I need you to register him there.
[00:02:03] The Scope says, okay great, we're done. So we continue on with that function, do we see any more declarations in that function? The answer is no, we don't see anymore declarations. We're now done compiling our program for the purposes of scope resolution, okay? Obviously there was a whole bunch other compiling that happened that we just skipped over.
[00:02:23] But we're done compiling our code for the purposes of Scope resolution. Now it's a couple of microseconds later and you don't see in this code somewhere where they're being executed. But let's assume that this code is being executed somewhere. Let's assume that somewhere else in our program, bar is gonna get called, baz is gonna get called.
[00:02:41] Let's execute this particular line of code. We're a couple of microseconds later and let's execute this whole line of code. So how is line one going to be executed? And the first thing you need to understand is there's no more var anymore because we handled that in the compilation phase so he doesn't exist in the execution phase.
[00:02:58] What's left of line one then? The foo equals var part, the second operation. That's what's left for our execution phase. The foo equals var part. The var part is not left for our execution phase, it doesn't exist. If you do var, foo), var, foo, var, foo a hundred times in a row, guess what happens to the other 99 of them after the first one.
[00:03:25] They're ignored, because they dont actually exist during the execution phase. A lot of people think, well if I encounter a var halfway through program at that moment it's gonna create a whole new variable out of thin air, and that's not true. Because that was all handled during the compilation phase ahead of time.
[00:03:41] This will all flow into our discussions of hoisting and things like that when we come back to those later this morning. Okay, so let's execute line one, and here's where I need to introduce to you some new compiler terminology. The terminology I'm gonna introduce is the idea of an LHS and in RHS.
[00:04:00] LHS stands for left-hand side. Anybody have a guess for what RHS stands for? You guys are smart and everybody's had their coffee. Everybody's well awake. LHS stands for left-hand side. RHS stands for right-hand side, of what? That's the important question, of an assignment. In our language, the assignment is the equals operator.
[00:04:22] So, what's on my left hand side of the equals operator?
>> Speaker 2: Variable name.
>> Kyle Simpson: The variable name foo. So foo is said to be an LHS reference. Okay, all right, don't get scared about our compiler terminology. I promise you, it's not gonna be as hard as it may seem at first.
[00:04:38] Foo is our LHS reference, okay? What's the RHS?
>> Speaker 2: The value of the string.
>> Kyle Simpson: It's the immediate value of the string value. So, it's not a reference. So, for the purposes of the Scope, we don't need to worry about RHSs here, but there is an LHS and RHS.
[00:04:52] Now, the terms come from the transliterative term left-hand side and right-hand side. Come from the initial looking at this equal sign and saying there's a left and a right. But there are other ways for assignments to occur, which don't have an equal sign. And there's still an LHS and an RHS even though we don't see a visible left-hand side and a right-hand side.
[00:05:12] So you do need to actually broaden your understanding of LHS and RHS from their transliterative Left-hand side, right-hand side, meaning to the LHS is the target and the RHS is the source, okay. The source of our assignment, the source value, is the right-hand side, this immediate value. The target is where we're gonna put it, foo, okay.
[00:05:33] And there are other places, like when you pass in a variable to a function call, it's not obvious that there's an equal sign happening there, but there's still an assignment that's occurring. And there's a source and there's a target, okay? And it's important to keep LHS and RHS distinct in your mind.
[00:05:47] I'm gonna drill that into you so if it feels weird, I promise there's a reason why, because they actually behave differently with respect to Scope. So it's really important. Do we have a question?
>> Speaker 2: Yeah, we have an online question. Can I clarify what exactly is a definition when I'm looking at that code?
[00:06:01]
>> Kyle Simpson: Definition, okay?
>> Kyle Simpson: Not sure where the terminology definition is coming from, the more common terminology would be declaration. But maybe somebody in the chat could expand upon what they mean by definition.
>> Speaker 2: See what he says here.
>> Kyle Simpson: There's a couple of different ways that I can interpret that, so rather than assuming I know, let's see if I can get some clarification.
[00:06:26] All right, so we've executed, or we've started to execute line one. The first question that we need to then ask is, when I have an LHS that is a reference to a variable, I need to ask where that variable exists, so I need to ask a question of my scope manager.
[00:06:46] And that question that I'm going to ask is essentially, hey, Scope, my current Scope, which happens to be the global Scope. Hey global Scope, I have an LHS reference for a variable called foo, have you ever heard of him? What is the Scope manager gonna respond to us?
[00:07:05] Yes, I've heard of him. It is the variable foo. We're nearly at the right inside right now, we're just dealing with the LHS side of it. We're asking our Scope manager for a reference to the variable that we want to assign to. We may not have found it in our current Scope.
[00:07:19] We might have had to go elsewhere, which we'll see in a little bit. But right now we found it immediately. So the answer to that initial question, hey scope, hey Global Scope, I've got an LHS reference for a variable called foo, ever heard of him? The answer is yes, I've heard of him, because you've declared him just a couple microseconds ago.
[00:07:34] Is everybody with me on that? So I'm gonna give you a reference back to the variable that you declared, and I'm gonna allow you to perform the operation. Now, if the right-hand side was more complicated than just an immediate value, if there was a variable there, then we would need to do another lookup.
[00:07:49] We'd need to say hey global Scope, I've got a variable called bar, for instance or something. But we don't, we don't need to do anymore lookups because we did our lookup for the variable foo. Did we get a clarification Will on the question you have?
>> Speaker 2: He's not responded yet.
[00:08:01]
>> Kyle Simpson: Okay.
>> Speaker 2: Definition I guess, okay, got it.
>> Kyle Simpson: Function definition? So function definition, again the more common way to say that, hopefully I'm answering your question there online. The more common way to say that is function declaration rather than function definition. But a function declaration is where we see the function keyword followed by a name followed by a block of code.
[00:08:23] So that's a function declaration. Now we'll clarify there's a different way of making functions and that's called function expressions and we'll clarify that in a few slides. But a function declaration as we see it is exactly what you see here where you see the function key word with a name after it like that.
[00:08:38] An argument list and a body. So hopefully that answered the question that was being asked, if not clarify again. Okay, so we don't need to do any lookups for the right hand side because we have an immediate value. We've already looked up the left hand side, so we know where it's going.
[00:08:54] So we can just perform that operation. We can just take the value, copy it directly into the location. And we're done executing line one. Everybody pat yourselves on the back. You've just done your first JavaScript engine operation.