Scope

[00:00:00]
>> Scope. This is hard for a lot of new developers. So we're just gonna go through a bunch of examples cuz I think that that makes this the easiest thing possible. You've might have already hit some scope problems but let's just talk about what scope is. Variables have this idea of scope.

[00:00:17]
So there's a time where a variable is used and then as soon as the variable stops being used, the JavaScript engine will clean it up and not allow you to use that variable anymore. So let's just take an example that I have this function here called addFive and then I declare a variable again inside of this function of addFive, right?

[00:00:42]
If I try and console.log some variable down here outside of the function, it's not gonna work. It's out of scope. This function only exists inside of this block. So if I call right here, console.log some variable. This works, line three works, right? Cuz I call it addFfive here.

[00:01:15]
And then this line does get run. This does work but then the function concludes and it comes back down here. This time it's out of scope, thrown away and no longer used. Does that make sense? Kind of the best rule of thumb is variables are in scope for whatever the curly braces are that surround it.

[00:01:43]
So another example of this would be like, if true const thing equals 5. I don't know, something like that. So this block does get run because if true is always true, this is always gonna get run. Or you can do 2 plus 2 triple equals 4 that's, right.

[00:02:08]
If something that's definitely gonna be true. If I run console.log thing down here, what do you think's gonna happen? It's not defined, right? So, this was in scope between these curly braces. So this existed in this short span of time. But then as soon as this curly brace happens here, it's gone.

[00:02:33]
It's been thrown away. If I move this console.log inside of the if statement, what do you think's going to happen? It's gonna work. So you can see here five gets logged out here because we're inside of the curly braces. How do you feel about that? Good so far?

[00:03:01]
So this is why I want you to use constant let. Lets the same thing, everything that I just told you about const equally applies to let. Var is a little different, the scoping and var works differently. We're not going to talk about it cuz I don't wanna confuse you but old we don't use it anymore just know that var works differently.

[00:03:25]
Const is more predictable and how these things work. Okay, so going back to our original example here, some variable exists here doesn't exist here. Cool. The same thing will apply to i, right? So I have this let i equals 0. Once this for loop is finished, i goes out of scope, right?

[00:03:57]
So I can say down here, console.log i and we get i on every iteration of the loop, right? But then this one down here after it finishes the loop i is not defined anymore at the end of this i goes away. So i is out of scope. i is only in scope for the loop that it's defined for.

[00:04:20]
This may seem like an inconvenience for you, but trust me, it prevents this like pollution of variables that would make this really hard otherwise. Scope actually makes us your life long term easier. Has some quirky rules for sure. Okay? Just a huge part of this that I just really wanna emphasize too, it matters where the variable is declared, right?

[00:04:47]
So when you say let or const equals something, that's where you're creating the variable, that's the act of creation. So it matters where the variable is created where its scope will be respected, right? So for example here if I say underneath this or above it let's say console.log friends at your party, what's that?

[00:05:09]
What's going to happen then? It's gonna work, right? Because this was created outside of the four loop. Even though there's like a four loop between it that's totally fine. It was created outside of it. And this is in the same scope of it. So this works. It's just i that's inside of this that it doesn't work.

[00:05:39]
In fact, that's literally why I say the left friends at your party equals zero. That's why I declared up here. If I did this here and then it doesn't work, right? You have to have something that's going to be durable beyond that scope. What I want you to do later maybe after you take this class just take a look at this again and see if you can find the answers yourself cuz I think that'll be a useful exercise for you.

[00:05:59]
And then you can check your work down here. Cool, the reason why, principally, that you and I did this together is this was so frustrating for me when I was learning how to code. But like I was like I was trying to log out a variable that I had created inside of a function is like, why doesn't this work?

[00:06:22]
I expected this to work. And once I kind of got grasped, I mean the cheat here is to look for the curly braces, right? Curly braces are really the thing that are really going to denote like this will be in scope are out of scope, and it just matters of where your constant or your let is, right?

[00:06:43]
Another thing that I really don't get into here that I probably could have cheated with a little bit as well. And let's just take a look what this would look like. If I do console.log my name and then I say const my name equals Brian, will this work?

[00:07:13]
No, cuz I create the variable here, right? This will get run first and it's gonna run this and say you haven't told me what my name is yet, therefore error. Just to prove my point. Cancel, it's gonna say I don't know what my name is it's a reference error, right?

[00:07:41]
Cuz it doesn't know what's going on there. So you have to create something before you can use it. I think that intuitively that makes some sense. The only warning is functions work a little bit different than that. So if I say hi, And I say function, say hi.

[00:08:13]
This does work. Weirdly enough, All functions get what's called hoisted to the top. So the way the code will actually execute on this all the definitions get put to the top automatically. Functions as the only case of this happening this way is the only thing that you ever have to care about hoisting with but that's actually what happens.

[00:08:40]
Well, var does a similar thing that's why I'm telling you to not use var please just ignore var but you can kind of in the back of your brain know that var does some similar Black magic witchery. So I like constantly as they work the way that you expect them to.

[00:08:57]
But with functions and only functions declared this way. So not all functions,, it's just the functions that are declared this way yeah that are written this way. I should say where's his function name blah those ones will get hoisted to the top. Okay, yeah, sorry to get on the depth in the weeds with you but I know I'm gonna save someone's in trouble by going over this a little bit up front.

[00:09:27]
So I'm trying to head off problems that I know people are gonna face when they start writing their own code. I'm trying to make this least frustrating possible. Okay. Any questions about scope? If it's kind of mind melting is it's a weird concept to graph it's very feels kind of artificial, right?

[00:09:53]
So I'm okay if you feel like this is weird and you don't like it. It's one of the weirder things you have to learn today. For the most part like you just define variables and then use them and the intuitive flow that typically works most attend to whether you expect it.

[00:10:08]
It's just really frustrating when you get into a situation where it doesn't work the way you expect