Check out a free preview of the full Introduction to JavaScript course
The "Experimenting with Scope" Lesson is part of the full, Introduction to JavaScript course featured in this preview video. Here's what you'd learn in this lesson:
Brian alters positions of variable references and declarations to help explain how scope affects outcomes.
Transcript from the "Experimenting with Scope" Lesson
[00:00:00]
>> Brian: So let's say I said, this is the last advanced thing that we're gonna do with scope here. Let something equal outside the if statement, okay? Then I'm gonna say if true Which by the way if true is a totally pointless statement right? I'm just creating a block for the sake of creating a block.
[00:00:30]
And I say, inside of here, let something equals inside the block, or inside the if statement. Then I say console.log, something, okay, this makes sense inside the if statement, right, but now what happens, if I put this outside of it, I get outside the if statement. Now let's talk about why.
[00:00:59]
The key here is that I put let again, right? So this is the most immediate something that it can find, right, so what it actually does is going to go start at the inside scope. If it can't find it, it looks at the next outer scope, and then it looks at the next outer scope, and the next outer scope.
[00:01:17]
And it just keeps going, until eventually, finds something or doesn't find anything, right.
>> Brian: Now if I change this to drop this let, then both of them are gonna be inside the if statement, because this variable is now referring to this one, right? And so, that's why both of these are gonna be something, or inside the if statement.
[00:01:40]
But as soon as I put let there, separate variable. Two different ones, because I put let there, these are two different things. Now my advice to you is, don't name things the same thing, because obviously, this is confusing, right? But I want to let you know that this is very easy, to have something like this happen.
[00:01:59]
Just to put it even more into weird context.
>> Brian: So what happens if I move all of this?
>> Brian: Okay, and I put this all.
>> Brian: Okay, so this is all inside of the thing, and I say, thing, and I put even outside of that let something equals outside the function
[00:02:38]
>> Brian: And we'll put this inside there as well.
>> Brian: Okay, inside the statement, outside the statement, outside the function. So, I'd clear let something up here, right. This is its own variable. A call function thing, right here, right? So remember, whenever I create a function, I don't run it until I actually put the parentheses here.
[00:03:01]
So this is when thing actually gets ran, right, we follow. Inside there, I create another something called outside the if statement, or with the value outside the if statement, and then I have an if statement in here. In case I wanna console.log something, I get inside the if statement.
[00:03:18]
Then when I console.log something here, this one is dead, right? We've thrown that one out, so now something refers to this something outside the if statement, right?
>> Brian: And now, once I'm done with the function, this totally through, right? It's thrown out both of these ones. Right. And so now something is outside the function.
[00:03:44]
>> Brian: Okay? How do we feel about that? Hopefully, your answer is, I get it, but it's weird, right? That's what I'm going for. It is weird. But this is a very common place to trip up when you're writing code, is not understanding what's in scope and what's not.
[00:04:01]
So that's why we're kind of gonna drill on this a little bit.
>> Speaker 2: So then, could stop me if you're gonna get to this later. How do you make something, change something in a function, but then let it persist throughout the rest of your program? Would you return it?
[00:04:14]
>> Brian: That's a good way of doing it. Typically, that's the best way of doing it. Or if I needed to do it, I would have to declare it outside of it. So let thing to keep. And now this is gonna be in the outer scope. And I would say, thing to keep equals defined now.
[00:04:33]
And now, I can say console.log thing to keep, so now it's defined now, right? It matters words declared, right, because nothing was declared inside of thing. But, hey, let's make it even more complicated, because I'm into that. [LAUGH] What happens if I call it before I called it a thing?
[00:04:54]
>> Speaker 2: It would still say, it was undefined.
>> Brian: It's undefined in this particular case, right? Because it only gets defined after a call thing.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops