Deep JavaScript Foundations, v3

Code Execution: Finishing Up

Kyle Simpson

Kyle Simpson

You Don't Know JS
Deep JavaScript Foundations, v3

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

The "Code Execution: Finishing Up" 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:

Kyle finishes walking through the execution of code, differentiating between two types of lookups.


Transcript from the "Code Execution: Finishing Up" Lesson

>> Kyle Simpson: We have finished executing line 5, and execution moves back. Now we're on line 14. How does line 14 execute? Hopefully at this point you're feeling a little more confident with this conversation. So how does line 14 execute?
>> Student: Asks the global scope if it-
>> Kyle Simpson: All right so who's talking?

It's gonna be the virtual machine, the JavaScript engine. And what did he find on line 14? What do we have right here on line 14?
>> Student2: A source.
>> Kyle Simpson: We have a source reference, thank you. We have a source reference for a marble called?
>> Student2: Ask.
>> Kyle Simpson: Ask, so who are we gonna look that up with?

We're gonna say, hey?
>> Student: Global scope.
>> Student2: Red.
>> Kyle Simpson: Hey red scope, hey global scope, thank you. I have an identifier of a marble called?
>> Class: Ask.
>> Kyle Simpson: Ask, thank you, do you know about a marble called ask? And the response from the global scope is going to be?

>> Class: Yes.
>> Kyle Simpson: Here's your red marble. So now we go to that red marble, that location in memory, and we say, hey, red marble, what do you have in it? And what does he have?
>> Student2: Question, question.
>> Kyle Simpson: The function, right? He has the function. The green bucket, the thing that was declared on line 8.

So now we have a function. And on line 14 that little open close parenthesis executes the function. Now execution moves to line 9. Line 9, there's no more var. But we're getting to the end now, so how do we execute line 9? How's the conversation start?
>> Student: Hey, green bucket.

>> Kyle Simpson: Hey, green bucket. Hey, scope of ask. I have a what kind of reference?
>> Student2: Sorts.
>> Student: A receiving.
>> Kyle Simpson: This is a target reference, right? Receiving is fine too. I have a receiving, or a target reference for an identifier called?
>> Student2: Question.
>> Class: Question.
>> Kyle Simpson: Called question, right there on line 9.

So I have this marble, ever heard of it? And the answer from that scope is going to be? Yes.
>> Class: Yes.
>> Student2: Here's your marble.
>> Kyle Simpson: Here is your green marble, okay? So now we have the green marble and we are assigning to it. So we don't care what's in it right now.

We go and get the value from the right-hand side, we assign into that location of memory and line 9 is finished. Now, line 10. We remember how the console works, right? So console doesn't find it there, it goes to the global scope, finds it, finds a method called log.

But before it can execute log, it's gotta figure out what's being passed to it, right? You see there on line 10, that we're passing something into it. And what are we passing? It's a reference to another marble. So we gotta look that up. So how does that look up work?

>> Class: [CROSSTALK] the green bucket.
>> Kyle Simpson: Hey, green bucket, hey, scope of ask, I have a what kind of reference?
>> Class: Source.
>> Kyle Simpson: Source reference, thank you, for?
>> Class: Question.
>> Kyle Simpson: Question, ever heard of it? And the answer is?
>> Class: Yes.
>> Kyle Simpson: Here's your green marble. And now, because we're not assigning to it, now we want the value that's currently in it.

So we go to that area of memory. We pull the value out, which happens to be the string, Why in this case? And that argument is assigned to the parameter that console.log is receiving, okay? So arguments, the things that we pass in, get assigned to the parameters that receive them.

You can think about a parameter, like if I had function ask() and it took a parameter, the parameter is what kind of reference?
>> Student: It's like a variable name.
>> Kyle Simpson: It is, but what kind of reference is it? It's that position.
>> Class: Target.
>> Kyle Simpson: It's a target. It's a target.

And if you have a variable in an argument position like in line 10, what kind of reference is that?
>> Class: Source.
>> Kyle Simpson: It's a source. So there's a processing and execution of a JavaScript engine, aligning yourselves to think about two stages of processing. One stage where we figure out all the scopes, all the buckets, all the marbles.

And the second stage, where we use all that information to execute the code. Congratulations, I certify you as compiler engineers. You have compiled and run a JavaScript program.
>> Student: Yeah.
>> Class: [APPLAUSE]

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