Evaluating Code

[00:00:00]
>> So let's think about what happens when we run some code that in this case declares and assigns a variable. Now, we already talked about this a little bit when we were talking about the combined age example. What is gonna happen when I run this code? What is JavaScript gonna do or think?

[00:00:27]
A few different things are gonna happen, so let's think about it. So one thing that it's gonna do is it's gonna see that let answerToLife, right? And what is it gonna do when it sees let answerToLife?
>> Create the variable.
>> Create a variable, exactly. Let me, Grab a whiteboard here.

[00:00:56]
Let's go back to our whiteboard. And I'm just gonna make some space for some new stuff here. Okay, so when we have let answerToLife, we're going to create a new variable. In this case, for brevity's sake, I'll call it answer. Okay, so that's one thing that's gonna happen.

[00:01:25]
What else is gonna happen? If the chat is chiming in, go right ahead. What about what's happening on the right-hand side of our equals here? There we got like a 4 + 1 x 2 x 4 + 2. What is JavaScript gonna, well, first of all, what is this thing?

[00:01:48]
((4 + 1) x 2 x 4) etc. That thing is we call a?
>> Experssion.
>> An expression, exactly. And what does JavaScript do with expressions?
>> Evaluates them.
>> Sorry, yes?
>> Evaluates.
>> It evaluates them, right? Or we could say, sorry, did you say something else?

[00:02:07]
>> Operations.
>> It looks at the operations within that expression. It carries out those operations to evaluate the expression. To figure out, given all of these operations, what value does this expression evaluate to once I've performed all of these additions, and multiplications, and whatever. And we can make it quick, this turns out to be 42 [LAUGH] because that's the answer to life, the universe, and everything.

[00:02:37]
And so what JavaScript is gonna do, one of the things it's gonna do here is it's going to conjure up in its data memory somewhere a value of 42. Once it has evaluated all of these operations in that expression to figure out what the value of this expression is, right?

[00:03:00]
And then one more thing needs to happen, that's indicated by the equals sign. Yeah, Paul?
>> It assigns that value to the answerToLife.
>> Exactly, so it's gonna create a variable answerToLife. It's going to evaluate the expression, create a value, representing whatever that is, in this case, it's the number 42.

[00:03:25]
And then importantly, it's going to create the point, the pointing arrow, which in our minds we can think of as an arrow. It's gonna create a pointer or a reference from the name of that variable to the value of the expression in this case. Okay, so this is review so far, we've talked about this.

[00:03:48]
Now, what happens [LAUGH] when this code runs? And this is where we're really getting into more pop music references. But also understanding really how JavaScript is sort of thinking about our code. So let me take moment and split screen this so that we can talk about it. Okay, this text size is quite small, but I'll just read the code to you.

[00:04:14]
So we have let scrub = guy that thinks he's fly. Also known as a busta, meaning let busta = scrub. And then scrub = 'guy that can't get no love from me'. So these are the things that are happening. So let's walk through and let's think about it together.

[00:04:31]
What is JavaScript doing when it runs through this code line by line. And it is gonna start at the top and work its way down to the bottom. Okay, so in the first one, let's see. OJ, what is the first line doing here?
>> It's creating a variable called scrub and assigning a value to it.

[00:04:48]
>> Bingo, okay, so it's creating a variable called scrub. And then when you say assigning a value to it, it's conjuring up, or we're telling it a certain value. Okay, so it's conjuring up a certain value, in this case, it's a string. I'm just gonna abbreviate this as fly [LAUGH] for shorthand.

[00:05:14]
Okay, and then you said it's assigning, which again, we said is doing what? How would I draw this in my little whiteboard?
>> With an arrow.
>> An arrow, it's creating a pointer or an arrow in our mental model, but a pointer in computer lingo, I guess, between the name scrub, this new variable I've created, and the value fly.

[00:05:37]
Okay, great. Awesome, thank you. How about the next line? Jason, you wanna walk us through this one?
>> So it's creating a new variable called, is that busta?
>> Sorry, it's small. [LAUGH]
>> And then it is assigning, is it creating a pointer to the scrub variable?
>> Great question.

[00:06:01]
>> Rather than assigning the text to it?
>> This is a great question. So what is really JavaScript doing when I say, now, we've said before that since I have remembered the scrub value, I can use that name scrub as if it was that string value wherever I want in my code.

[00:06:21]
So remember how before when we gave JavaScript an expression with a bunch of arithmetic in it, it evaluated that expression and it figured out what value that resolves to. In this case, it's gonna do the same thing with the expression. In this case, it's a reference to a variable, scrub, that's on the right hand side of our equals sign.

[00:06:44]
So it's gonna look at that expression scrub and it's gonna figure out what does that evaluate to? Which means, it's gonna look up in its little table here, in its little contact book, let's say. Look up scrub, and it's gonna say what to scrub evaluate to, which is?

[00:07:03]
>> Fly.
>> Fly, in this case. Guy who thinks he's fly for, yeah, the longer version. And so that is going to then be the value that is assigned to the new variable busta. So the arrow actually doesn't go from scrub to busta, that's not a thing that we can do.

[00:07:24]
What we can do is evaluate scrub, figure out that it's fly, and then draw the arrow from busta to the value that scrub evaluates to in our program. So this is a thing about JavaScript that different languages might behave differently in this kind of context. But in JavaScript's case, it's going to associate busta with the string value, in this case it's a string, of scrub that we had created earlier.

[00:07:58]
And it's going to remember that value now as the value of busta. Now where this starts to get interesting is on line three. Well, maybe it's already interesting, hopefully, I think so. But where it starts to actually matter that we have this contact book model in our heads, as opposed to the kind of like box container mental model, is what happens on line three.

[00:08:24]
So let's see, Paul, do you wanna maybe talk me through?
>> Okay, so it takes that new string and remembers it as a value because it is assigning that now to scrub.
>> Okay, so it's gonna conjure up some kind of value. I'm gonna represent this as no love, the string, okay?

[00:08:48]
[LAUGH]
>> And then it's just going to point scrub to that no love.
>> Exactly, so what it's gonna do is erase the original association, the original pointer between scrub and fly, or guy who thinks he's fly. And instead it's going to create a new pointer, or a new arrow in our mental models, to the string value that I've asked it to remember now.

[00:09:17]
So now the question is, if I asked JavaScript the value of busta, what's it gonna be?
>> I think it's the new value.
>> Guy that thinks he's fly.
>> That's still fly.
>> So we have two options. Is it gonna be, guy that thinks he's fly? Or is it gonna be, guy that can't get no love?

[00:09:37]
And you know how we can find out is by copy pasting into our JavaScript console. And we don't really care about a page for this. So I'm gonna execute this as three separate lines. I mean, I could paste this all at once. But just for clarity's sake, I'm gonna do this in three separate lines.

[00:09:59]
Okay, we've got let scrub = fly, let busta = scrub. And now scrub = guy that can't get no love from me. And now we wanna ask JavaScript, so let's first of all ask, let's check, what's the value of scrub gonna be? Hopefully this one is pretty clear.

[00:10:17]
It's gonna be guy that can't get no love from me. [LAUGH] Hope you're enjoying these examples. [LAUGH] Busta is actually gonna still be guy that thinks he's fly. This is because, again, that arrow, back to our whiteboard, that arrow that we had drawn from busta, it didn't go, like we said, it didn't go to scrub.

[00:10:48]
Busta doesn't actually care what scrub is anymore. Instead, busta only cares what the value of scrub was at the time that it was assigned or, yes, at the time that that was assigned, because that is what the word scrub, the name evaluated to this string value of guy who thinks he's fly.

[00:11:10]
And that is what busta in my phone book is now gonna point to. It's sort of like, if I had a phone book and I said, okay, scrub is 555-5555. All right, now busta is a new contact with the same number as scrub, so it's gonna remember 555-5555.

[00:11:28]
And now I say, just kidding, scrub changes number to 867-5389. In my contact book, since I kind of copied over the old number for what scrub's number was at the time, that's still gonna be associated to my busta contact. [LAUGH] It's perhaps the most ridiculous example for explaining things, but hopefully it makes the point that this idea that variables are containers that contain a certain value.

[00:11:59]
And so when we assign busta to scrub, we're actually assigning one container to another container, is not how JavaScript actually works. How it works is it evaluates the expression on the right hand side of the equals sign, whether that's doing some math, or concatenating some strings together, or looking up an address in the phone book.

[00:12:22]
It's going to evaluate the expression on the right of the equals sign, and assign that, create a pointer to the variable that I'm declaring on the left of the equals sign. So that's where that new arrow gets drawn from busta to fly. This one right here. Oops, okay.

[00:12:40]
So before we had this, originally. We had an arrow from scrub to fly in line one. We create an arrow to the evaluated value of scrub, which is the string fly. We then, on line three, change the association of scrub to a new thing, but busta has not changed where it points at.

[00:13:07]
Cool? With me? Fans of JavaScript yet? So yeah, if you've worked with other programming languages and they behave differently, that's legit. But in JavaScript, this is how things work. And this is gonna be an important thing for us to keep in mind as our programs get more complex and we get more and more confused about what they're doing.

[00:13:28]
Keeping in mind that when we assign a variable, we're assigning to whatever the value of the expression on the right-hand side is, is gonna be helpful thing to remember. Question?
>> So JavaScript does not have pass by reference, it uses reference by value?
>> So I've been deliberately avoiding using the phrases pass by reference and pass by value because it's a little bit trickier than that.

[00:13:55]
But when we talk about assigning variables, yes, it's going to assign the variable to the value of that expression at the time, as opposed to a reference to a reference. As opposed to we could theoretically imagine a language in which if I assign busta to scrub, it creates a reference to the pointer, a reference to the reference.

[00:14:20]
And then it follows that reference wherever it may change to go in the future, that is not what happens in JavaScript. In JavaScript, when we're assigning variables, we're dealing with values. And we're dealing with whatever the value would've been, whatever the value was at the time that the variable was assigned.

[00:14:39]
And that is going to be, in this case, the original value of scrub because we assigned the new variable busta before scrub's pointer had changed. So some folks find that the terminology around pass by reference and pass by value, useful to talk about in JavaScript. Some folks, and I am also in this camp, find it not as helpful as thinking about variables pointing to values.

[00:15:11]
And the question is, what does the expression that I have assigned this variable to evaluate to at the time that I'm assigning the variable? But however you find it more useful to think about, pass by value, if that's more useful to think about, sure. It also depends a little bit when we're talking about different types of values.

[00:15:30]
Right now we've been talking about all strings and numbers and primitive, or we could say sort of simple values. When we talk about arrays and objects, this is gonna get a little bit more complicated. So we'll come back to that thought a little bit later in the course.

[00:15:46]
Great question, though.