Check out a free preview of the full Deep JavaScript Foundations, v3 course

The "Compilation Review" Lesson is part of the full, Deep JavaScript Foundations, v3 course featured in this preview video. Here's what you'd learn in this lesson:

The compilation stage of the two stage mental model is reviewed.

Preview
Close

Transcript from the "Compilation Review" Lesson

[00:00:00]
>> Kyle Simpson: Okay, so hopefully we're feeling pretty good about lexical scope. But let's test some of the little edges and corner cases that exist within this. Let's make sure our understanding is fully working. So, we're gonna process this exactly the same way as we did on the previous slide, which is that we want to first do the compilation, and then do the execution.

[00:00:20]
Since you're now all experts and certified in this I'm gonna expect you to be able to follow along and say out loud with me all of these things. So processing begins with the compiler talking to the scope manager. And compiler says on line one, hey scope manager. Hey global scope, I have a, what kind of reference?

[00:00:37]
I have a formal declaration, in execution it will be a target reference but, during my compilation I have a formal declaration for
>> Speaker 2: Teacher
>> Kyle Simpson: Teacher. Ever heard of it? And the answer is
>> Speaker 2: Yes
>> Speaker 3: No
>> Kyle Simpson: No, haven't heard of it. This is in compilation stage.

[00:00:52]
We will of heard of it in execution. In compilation stage we'd never heard of it. So we go ahead and create what kind of marble?
>> Speaker 3: Red.
>> Kyle Simpson: Here's your red marble, okay? And we drop the red ball, boop, directly into the red bucket. Now we find the next formal declaration on what line?

[00:01:09]
>> Speaker 3: Three.
>> Kyle Simpson: Line three. We have the formal declaration. Hey global scope formal declaration for an identifier called. OtherClass. OtherClass, ever heard of it? And the answer is?
>> Speaker 3: No.
>> Kyle Simpson: Never heard of it. Great, so we need a what?
>> Speaker 3: Red marble.
>> Kyle Simpson: Red marble. Here's your red marble, boop, goes in the red bucket.

[00:01:26]
By the way, global scope, that's a function. It needs its own bucket. Can you make me a blue bucket? Sure, we make a blue bucket. Here is your blue bucket and now we step into that scope and we process its plan, or we make it's plan. So where is the next formal declaration that we find?

[00:01:44]
>> Speaker 2: Line four.
>> Speaker 3: Nine.
>> Speaker 2: Wait a minute.
>> Kyle Simpson: Is line four a formal declaration?
>> Speaker 3: No.
>> Kyle Simpson: There's no var there. What about line five, is that a formal declaration?
>> Speaker 3: No.
>> Kyle Simpson: What about line six, formal declaration?
>> Speaker 2: No.
>> Kyle Simpson: We don't make any blue marbles, do we?

[00:01:59]
Okay, so keep that in mind. You may be wondering what's gonna happen with line five, and we'll talk about that during execution, but from the perspective of the compiler, we didn't have any formal declarations, so there's no marbles to create. Okay so we're done with the blue bucket.

[00:02:15]
Effectively it exists, but effectively it has no marbles in it. We step back out to the global scope. Do we find anymore formal declarations in this program?
>> Speaker 3: No.
>> Kyle Simpson: So we're done with compilation. Thumbs up, thumbs down, how do we feel? Okay, same process as before. And I'm trying to train you to have that narrative in your head even if you never say the words out loud ever again after this workshop.

[00:02:36]
I want you to think that narrative in your head. Think about the question and answering that is happening because that talks about or illustrates the interchange that occurs between the compiler and the scope plan. That's how you understand how scopes work, is when you understand how they get set up, and how they get used, okay?

[00:02:54]
So now, let's execute this code. It executes exactly the same way as we would have, done in the previous slide. So we remember, there's no formal declarations but there are executable statements. Line one has an executable statement. And so we are the engine and we say, hey, global scope, I have a.what kind of reference?

[00:03:15]
>> Speaker 3: Target.
>> Kyle Simpson: I have a target reference for teacher. Ever heard of it? And the answer is,
>> Speaker 2: Yes.
>> Kyle Simpson: Nope.
>> Speaker 2: Yeah.
>> Kyle Simpson: Here's your red marble. Yes, right yes. Here’s your what color marble?
>> Speaker 3: Red.
>> Kyle Simpson: Here’s your red marble. Great, we take the value quote Kyle, we assign it into the red marble, and we are complete.

[00:03:32]
Everybody good with that? All right. Now remember, functions are declarations, they don't really exist. At least, they're only here symbolically. So we're going to move from the function to the next execution line of code, which would be line nine. How does line nine execute?
>> Speaker 3: Hey global scope.

[00:03:50]
>> Kyle Simpson: Hey global scope, that's the red bucket. Hey global scope I have what kind of reference here? What kind of reference do I have on line nine?
>> Speaker 2: Source.
>> Kyle Simpson: Source reference, I have a source reference for an identifier called other class. Have you ever heard of him before?

[00:04:03]
And the answer is?
>> Speaker 2: Yes, here's your red marble.
>> Kyle Simpson: Here's your red marble. Thanks, you're picking up on it. Right, here's your red marble, okay? I know it sounds silly. But it helps you process what would otherwise be a really dry and boring topic. So, just stick with me, all right.

[00:04:16]
Here's your red marble. So, what do we find in that red marble?
>> Speaker 2: A reference.
>> Kyle Simpson: A reference to the function which we've called otherClass here which has attached to it this blue bucket of scope. So we find that function, we execute it with the parenthesis on line nine, and execution moves to what line?

[00:04:33]
>> Speaker 3: Four.
>> Kyle Simpson: Line four, how does line four execute?
>> Speaker 3: Hey, blue bucket.
>> Kyle Simpson: Hey, blue bucket, I have a, what kind of reference?
>> Speaker 3: Source.
>> Kyle Simpson: I have a target reference because it is receiving an assignment. I have a target reference for teacher. Ever heard of it, and the answer is?

[00:04:49]
>> Speaker 3: No.
>> Kyle Simpson: So where do we go? One up.
>> Speaker 2: Up one.
>> Kyle Simpson: Hey, global scope, I have a target reference for teacher ever heard of it.
>> Speaker 2: Yes.
>> Kyle Simpson: Here's your.
>> Speaker 3: Red marble.
>> Kyle Simpson: Important to see that it's a red marble here not a blue marble.

[00:05:04]
Even though we're inside of the blue scope, we are referencing a red marble. You with me? So we get a red marble and when we assign quote Suzy to it, we are assigning over the value that was currently there, the quote Kyle, because it's the same marble in this case.

[00:05:20]
This wasn't shadowed because we didn't declare teacher inside of the otherClass function.

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