This course has been updated! We now recommend you take the Complete Intro to Web Development, v3 course.
Transcript from the "Scope" Lesson
[00:00:00]
>> Brian Holt: All right, let's talk about scope. This is another one of those things, when I was explaining the cascade, that I just don't really like to explain, because when you have scope problems, you have big problems.
>> Brian Holt: So let's talk about scope. And this is also a really difficult thing for newbies to get started with, because you get these problems and they're really difficult to wrap your mind around.
[00:00:22] So if this seems hard, it's because it's hard, and it's also just like problems that you're probably gonna have kind of forever. Cuz like scope problems can end up being a bit of a rat's nest to unravel. Anyway, so look at this right here. I have this function called addFive, and inside of addFive I create this variable called someVariable and it says you can't see me outside this function, that's the value of this variable.
[00:00:52] So here I call addFive, which invokes this function, right, so this is getting called. And I add ten, so let's just do this right here. It works, right? You call 15. You call it and 15 gets logged out, right? Now I'm gonna come down here and say console.log someVariable, which is referencing this variable.
[00:01:13] But it's gonna say reference area someVariable is not defined. This is an error right here.
>> Brian Holt: Because some variable is inside of addFive, right? And I can't reference that because now this is what's called out of scope. Basically, it doesn't exist anymore, there's nothing in this scope that's called someVariable.
[00:01:35] Whereas, inside of here if I put console.log someVariable, it does work, right? Because now inside of the function it's in scope, right? It's visible. It exists. So I'm gonna give you a general rule of thumb that is imperfect, right? So it's useful to kind of think of it this way.
[00:02:01] But just be aware that it's not always true. Look for curly braces, this is considered a scope, between the curly braces, right. So inside of the function, inside of an if statement, inside of a for loop, inside of a while, they each have their own level of scope.
[00:02:18] So if I say, if(true), inside of here and say console., or I have a variable say const thing = 5, and I say here console.log(thing). In scope, it's gonna work right here, right? But what happens if I come right underneath this and say console.log(thing). Thing is not defined here, right.
[00:02:48] Because now I've gone outside of this scope. Right, so basically thing is only defined inside of the scope. Once that scope ends, it expires everything that was declared inside of it. And this is the key, is look for where the variable is defined, right? So I have some variable right here that's defined inside of the function.
[00:03:09] As soon as the function ends, it's gone, right? It just disappears. So that's kinda the key with scope. Now what can be a little bit even more confusing. What happens if I say console.log some variable right here? What would you expect? We're still inside of that function scope, so it does work.
[00:03:38] This is defined basically in a higher scope than the if statement right here, so someVariable does work. You can see right here that it gets defined or it gets logged out right here. So it does work because this is still in scope, this still exists. How do we feel about this so far?
[00:03:59] Make sense mostly? Okay, I'm gonna make it even more screwed up for you, so buckle up.
>> Speaker 2: [LAUGH]
>> Brian Holt: So, let's get rid of this, get rid of that. We can get rid of the if statement.
>> Brian Holt: All right, we'll just comment this out for a second. What happens if I come up here and say,
[00:04:28]
>> Brian Holt: Const otherThing = something, okay. I have this variable up here. If I go inside of addFive and say console.log otherThing, what would you expect? It does work. This is called the global scope, right? The global scope is basically like the most root scope that exists. It's the highest level scope, it's basically it's not inside of anything.
[00:04:58] In other words, if you declare anything in the global scope, it never goes out of scope. You don't wanna put things in the global scope if you can help it. Just in general it's a bad idea. You wanna keep the global scope what we would call unpolluted. You just don't wanna put too much stuff into it because the problem with that is now everything can see this.
[00:05:20] Everything can also change this. And that leads to some really subtle terrible bugs. So you should have a healthy fear of the global scope. This is very powerful, right? And we adhere to the power or the principle of least power. And it's a very powerful thing. So, just so you know.
[00:05:44] Any questions about what we've done so far? Yes.
>> Speaker 2: So question from chat room. Samantha asks, is scope problems are mainly for functions. Scope, you're talking about scope, you're talking about functions where the variables are located, does that remain like that?
>> Brian Holt: Yeah. Functions are generally where you can, like invoking functions, declaring variables inside of functions and then trying to reference them outside of those functions.
[00:06:08] It's where you're gonna have a bad time, for sure. And here we like go through a little bit more. Like we have the for loop here. Even i, right? So, let i = 0. Once this for loop is over, you can't reference i anymore, it dies after that for loop.
[00:06:36] So, scope is hard. If this feels hard, it's cuz it is hard. And there's even more subtleties that I'm not going over here. The last one I wanted to talk a little bit about here. If I come up here and say, let globalVar and then here I say globalVar = 'changed'.
[00:07:09] And here let's just say this is unchanged. So the first thing I wanna do before here is I'm gonna say before addFive I'm gonna say counsel.log(globalVar). Makes sense, I declared it up here and I reference it down here. That follows, right? It's unchanged. But then if I go underneath addFive here and I say console.log(globalVar).
[00:07:41]
>> Brian Holt: Global changed. So here, this got changed inside of addFive, right? The thing I need you to look for is where was it declared. That's the part that's the most important. Where does it say let or const? That's what you're looking for. So here you see let is up here, so therefore this is in the global scope.
[00:08:05] Even though it's changed here inside of addFive, it's still in the global scope. So it got changed here, and then yeah, that's fine. Even if I delete this and it's just declared and nothing happens to it, it still sticks in this scope. Let's get rid of that so you can see it.
[00:08:26]
>> Brian Holt: So there you go. Even though that this is where it's kinda first, what you would may be initialize it to some variable, or to some string because it's declared out here. It still survives in the global scope. So look for where it's declared, that's what you need to do.
[00:08:46]
>> Brian Holt: Questions about that?
>> Brian Holt: Okay, cool.
>> Brian Holt: Even if I put a function inside of here, generally you don't want to declare functions inside of functions, but it is possible.
>> Brian Holt: X, y.
>> Brian Holt: Return x + y.
>> Brian Holt: If I try and call add out here, not defined.
[00:09:22]
>> Brian Holt: So even functions are only scoped to whatever scope that they're inside of.
>> Brian Holt: This is strange. You would not typically do this, just so you know. I just wanted to demonstrate a point. Even functions observe these rules.
>> Brian Holt: Okay, any questions about that so far? It's weird, but if you start seeing reference error, this is where you need to start thinking like, I might have a scope problem here, so.
[00:09:51]
>> Brian Holt: That's what I wanted to drive home.