Check out a free preview of the full JavaScript: From Fundamentals to Functional JS course:
The "Precedence" Lesson is part of the full, JavaScript: From Fundamentals to Functional JS course featured in this preview video. Here's what you'd learn in this lesson:

In JavaScript, there can be conflicts when two variables have a the same name. Bianca demonstrates how precedence works when a global variable has the same name as a local variable.

Get Unlimited Access Now

Transcript from the "Precedence" Lesson

[00:00:00]
>> [MUSIC]

[00:00:03]
>> Bianca Gandolfo: And so, this is also how we create privacy, private variables, is by storing them in a function. There's no other way in JavaScript, we don't have block scope like Ruby does, for example. We have a lot of people who take this class who come from a Ruby background, and that's a little bit confusing at first, but there's only, at least at this point in time, there is in future generations of JavaScript, there's going to be a keyword that will allow you to have block scope, but for now, we don't.

[00:00:36] Cool. And so, I spoke a little bit about creating scopes, about how the variable scope is not created until we invoke the function. Cool. And then, so we have these nested scopes. How do we know which one wins? When we have two variables with the same name. This is called precedence.

[00:01:05] I like to play this game where we go around the room and we pretend that we're the JavaScript interpreter, and we say what line we start in. So, for example, what I would say, if I was gonna do this previous example, I would be like, okay, so I'm a JavaScript interpreter, I just created a variable g, I stored the stream global, then I would see the blender, I would skip over the blender, I would store this in memory, skip over the blender, then I would go down to this invocation where I would call it with blueberry.

[00:01:41] That's when I come into the function body and the function body fruit is now blueberry. So, B is blueberry. Then, we're saving Y as yogurt string. Then, we see this function, we skip over the function body until we get to this last line here, in which we call the function, now at that point is when we go into the function body and we alert blueberries and yogurt make a blueberry swirl.

[00:02:13] And then, at that point, this function is out and then it comes out here.
>> Bianca Gandolfo: And it goes into the next line, if there was a next line underneath. So, that's kinda how just sort of like going through how the code would run and like a very crude understanding of like how it's run.

[00:02:35] So, who wants to go first, and then we'll just go down in line?
>> Bianca Gandolfo: The first line is the easiest one, so it's better if you go first.
>> Grace: Thank you
>> Bianca Gandolfo: Okay
>> Grace: [LAUGH]
>> Bianca Gandolfo: All right, Grace.
>> Speaker 3: Go, Grace.
>> Grace: G is global, I don't know what else to say about it.

[00:02:53]
>> Bianca Gandolfo: Yeah, so you're just storing a string global in g, yep. And then, Jill
>> Joe: Bar one was local?
>> Bianca Gandolfo: So, the next line that runs is gonna be this line, right? Just how it would run, how the code is actually gonna be run. So, you could just say, you can just say that there's a function, a function called go.

[00:03:18]
>> Joe: So, you store that in memory and then you invoke
>> Bianca Gandolfo: So, we skip the function body, right?
>> Joe: Yep.
>> Bianca Gandolfo: Skip the entire, so this part we skip. That's really, really important. I'm gonna say like eight times. But that's super important. And then, we
>> Joe: And then, you call go.

[00:03:36]
>> Bianca Gandolfo: Call go, and then, Kim, what happens next?
>> Kim: l = local
>> Bianca Gandolfo: And we're going to the function body, l equals local and then William, Jimmy William.
>> Speaker 6: Yeah.
>> Bianca Gandolfo: Okay.
>> Speaker 6: [COUGH] Then, it will be on the next slide for the g variable which set that.

[00:03:56]
>> Bianca Gandolfo: Mm-hm, in here? And then, Andy.
>> Andy: And you're gonna alert g plus inside go.
>> Bianca Gandolfo: Mm-hm. And what's g?
>> Andy: G will be the local variable in the go function.
>> Bianca Gandolfo: Mm-hm. So, it would be in here, right?
>> Andy: Yeah.
>> Bianca Gandolfo: Great. And then, Kevin?
>> Kevin: You're gonna alert g outside of go?

[00:04:19]
>> Bianca Gandolfo: Yep, and then we'll, so once this function's done running. It's going to return back to here. It's going to exit here and run the next line, which is going to alert, what is it going to say? What is it going to say?
>> Kevin: Outside go.
>> Bianca Gandolfo: With the G part.

[00:04:37]
>> Kevin: In here. Or global
>> Bianca Gandolfo: Yeah. So, this is just an example of how the code is running to help you understand that whatever, whatever variable in the most local scope wins precedence. And that's the variable, that's the value that's going to be printed out. So, since G here is the most local to that scope G is going to overwrite any memory of any other variables if there was any and it would alert here.

[00:05:20] And then, the most local to this global right is gonna be the global G.
>> Bianca Gandolfo: Any questions about that? Joe?
>> Joe: Is that whole, does go come off the stack then, after the execution is done?
>> Bianca Gandolfo: Yes.
>> Bianca Gandolfo: Cool. And so, back to block scope. Let's play the game again.

[00:05:54] Where did we leave off? We left off at Ben. What's the first line? What happens the first line?
>> Ben: Create the variable in block and set it to false.
>> Bianca Gandolfo: Mm-hm. And then, Jake
>> Jake: I'm sorry. He said which one? The top.
>> Bianca Gandolfo: Yeah. He said the top one.

[00:06:13]
>> Jake: Okay. We skip that and we go to the bottom, correct in black.
>> Bianca Gandolfo: We have this one still. So, this is a for loop, this isn't a function. So, it's a little bit misleading because it does have a block. So, a block is defined as any area surrounded by two parentheses, I'm sorry, two curly brackets.

[00:06:47] That's not an object. So, whenever you see in JavaScript the syntax where you have two curly brackets and it's not an object, that's considered a block. In a lot of languages, a block would define a scope, but in JavaScript only a function block defines the area of private scope.

[00:07:11] So, this is the line here.
>> Bianca Gandolfo: Do you know what this line does?
>> Bianca Gandolfo: No? No worries, so it's going to loop, right? It's a for loop, and what this for loop has says start at 0, keep adding 1 to i while i is less than 5. So, it's gonna run whenever it's in this body that many times.

[00:07:46] So, it's going to set inBlock to true. Five times. Just to make sure that's true. And then, what's the next thing that run, I'm sorry, Tanner's next. Okay.
>> Speaker 11: Next, we found if inblock and the console log which it's going to pull up the false Even though, we said it five times true because it's at a scope.

[00:08:11]
>> Bianca Gandolfo: So, what is if and block going to do? Sorry, I skipped over that pretty quick.
>> Speaker 11: That's going to invoke the council.log and it'll ask you their block scope, and then it'll add false because the other variable in block [INAUDIBLE]
>> Bianca Gandolfo: Absolutely, so this if is going to evaluate whether end block is true or false.

[00:08:36] And if it's true, it's going to enter into the if block here. And it's going to counsel that log, is there block scope? And this is not, so this is gonna return the opposite, since inBlock is true and this is not, this is gonna evaluate to false. So, the question is, is there block scope, in JavaScript?

[00:08:59]
>> Bianca Gandolfo: Well, I don't know, let's ask, false.
>> Speaker 12: Would it ever get into that block though, since it's false?
>> Bianca Gandolfo: It's true though. We said it's true here.
>> Speaker 12: Really?
>> Bianca Gandolfo: And since, we don't have any, so that's all the global scope, so it's all inBlock is just going to be true.

[00:09:22] So, it's not private. So, if this was a function, if this for loop was a function, then when we change inBlock to true it wouldn't affect this inBlock up here but since we don't have block scope and this is all operating on the global scope that's why we can that's why this is true here.

[00:09:46]
>> Speaker 12: So, var inBlock = false, that's a global variable.
>> Bianca Gandolfo: Yep, they're all, everything on this-
>> Speaker 12: Because there's no child, there's no-
>> Bianca Gandolfo: There's no function. So, everything on this page is global.
>> Speaker 12: It's global, got it.
>> Bianca Gandolfo: Mm-hm.