Scope Examples

[00:00:00]
>> Brian Holt: So let's take a look at this.
>> Brian Holt: let friendsAtYourParty = 0. If i = 10, less than or equal to 10, right? This is the normal for loop that we've been seeing before. Now, this let i = 0. This is only in scope for this for loop, right?

[00:00:22]
As soon as this for loop is finished, I try and console.log(i) down here. It's not gonna work, right, because there's only in scope for that for loop. Now if I move this i outside of here, notice that this does work. Because the i is in scope inside of the for loop.

[00:00:49]
>> Brian Holt: Now if I say console.log(friendsAtYourParty), is that gonna work?
>> Brian Holt: Yeah, cuz that was declared out. That was created outside of the for loop here. Now, let's go back up here and just to throw another wrench into something. Let's say if I say let getSomeOtherVariable right here and I don't declare it or I don't give it any sort of value, and I try and do this.

[00:01:24]
>> Brian Holt: Now, is this gonna work? Yes, it's going to work. Because yet, some other variable was created outside the yet statement, right? This is the key that I want you to look for. It matters where it was declared, where it was created, right? So defect despite the fact that I'm reading it like really assigning the value in here, it matters where it was created.

[00:01:47]
So I just want to like reiterate here. Scope is hard, right? Especially when you're learning these things, it cannot it can be not intuitive what's gonna be in scope and what's not gonna be in scope. But my advice to you is just pay attention to where things are declared, right?

[00:02:02]
Wherever you put your let or your console, that's, what matters, right? It doesn't matter where it's where we declared. It doesn't matter where it's red or anything like that. It matters where it was created. And if you're coming from another language, scope can work a little bit different in JavaScript than it does in other languages.

[00:02:22]
I don't wanna get too much into it, because it's a really deep rabbit hole. [LAUGH] And I want to fill your brains with other useful things and not that kind of stuff, right?
>> Brian Holt: So just to hammer home and be an asshole about it. Let's just go full bore on this and work through this particular problem together and figure out what's gonna be in scope, what's gonna break and what's not gonna break, okay?

[00:02:50]
So I have a bunch of stuff in here and let's go through and actually figure out what's in scope and what's not in scope, okay? And we'll just work down through the console logs as I see them here. So the first thing, this is just declaring some variables.

[00:03:08]
This is declaring the function. Remember do stuff won't actually happen until do stuff is called, right? That's important. Got some variables down here, for loop down here. So the first one that's gonna be run down here in this while loop is console.log(A), okay? So let's figure out if console.log(A) is gonna break.

[00:03:32]
So let's go find out where A was declared, right? That's the important thing here. So we're gonna scroll up here and we see const A = "A" up here.
>> Brian Holt: Well, that was created outside the while loop, right? So it's gonna be in scope, right? So this is gonna work.

[00:03:48]
This is gonna log out a three times, right, cuz it's gonna go through this loop three times.
>> Brian Holt: Okay, so good so far? The next one we're gonna hit here is console.log(E). Okay, well, where's E declared? Right there. It doesn't matter that it's modified here, right, or that it's being read up here.

[00:04:12]
It matters that it's created here. So console.log(E), that's gonna work. Console.log(G), where's G?
>> Brian Holt: Right there. Is that gonna work?
>> Speaker 2: No.
>> Brian Holt: No, because it's inside the wireloop, right? So once the while loop is finished, it's gone. It's gone forever.
>> Speaker 2: So wouldn't be true to say that it would work as long as E is less than 3?

[00:04:45]
So it will print out G three times and then give you an air?
>> Brian Holt: It won't print out G at all. So because the console.log is down here, right? So this is only gonna happen once, right, down here. And when it goes to look for G, G is not in scope, because it was thrown away once that wild loop is finished

[00:05:06]
>> Speaker 2: Great, so while he is less than 3 G exists, but nothing is happening to it until after words.
>> Brian Holt: Right, correct.
>> Speaker 2: When it does not Is the same one, okay?
>> Brian Holt: Yep and actually, if you wanna get really technical into it, G is going to be created and destroyed three times.

[00:05:23]
So once the loop is finished, it throws everything out and then it re-initializes everything on the new loop. So you get a fresh slate on every iteration.
>> Brian Holt: When I use the term iteration, that means one loop, right? One course of the loop. Let's refer to it as an iteration.

[00:05:45]
>> Brian Holt: Did I answer your question?
>> Speaker 2: Yes.
>> Brian Holt: Cool, so then I called doSutff and I pass in B. So let's go up here and I have B, which is the parameter here. So console.log(B), that's gonna work, right, cuz that's just coming here from the parameter. So that's gonna work.

[00:06:04]
I declare C here. I declare H here. So I have an if statement here. Create D. I reassign H, console.log(D). Second work.
>> Brian Holt: No, it's not gonna work, because that was declared inside. It was created inside the if statement. So console.log(D) here, that's gonna fail. Console.log(H), is that gonna work?

[00:06:31]
>> Speaker 2: No.
>> Brian Holt: It is. It is gonna work, because it was declared up here. The let H is up here above the if statement, right? So it is in scope.
>> Speaker 3: So that just gives you letter H, right?
>> Brian Holt: Actually, it is gonna be something else.
>> Speaker 3: Why?

[00:06:50]
>> Brian Holt: Cuz it reassigned up here. So this is overriding this H right here.
>> Speaker 3: Literally something else.
>> Brian Holt: Literally something else.
>> Brian Holt: Does that make sense?
>> Speaker 3: So you called it outside after you reassigned it, so-
>> Brian Holt: Yes, I create it up here and here. Because I'm not saying let H again, it's actually referring to this same H.

[00:07:14]
And so it's reassigning this H up here. Makes sense? Cool, did you get that as well? Okay, cool.
>> Speaker 2: So even though the if statement is part of the doStuff function, so D is defined within the function and the place where you're calling console.log(D) is also in the function?

[00:07:35]
It's already thrown away, because the if statement is over.
>> Brian Holt: Yep, correct.
>> Speaker 3: Currently brackets are sort of like walls keeping stuff from coming inside of it. It keeps everything that's outside of the curly brackets out.
>> Brian Holt: It's basically keeping everything inside of it, right? So things can get in from the outside.

[00:07:54]
But inside of it, it won't let anything out. That's a better way of thinking about it.
>> Brian Holt: Okay and then F is being reassigned right there, okay? So now, doStuff is over. We're gonna go down to console.log(B) right here. Is this gonna work? Well, B is the parameter up here.

[00:08:16]
So no, this is not gonna work. Cuz once the functioning is over, then the perimeters are thrown out. So that's gonna fail. Console.log(C), let's figure out where C is. That's inside the function body of doStuff, it's not gonna work.
>> Brian Holt: Okay, console.log(F). Well, F is reassigned right there and it's declared up there.

[00:08:46]
So yeah, that's gonna work.
>> Brian Holt: Good, let's just throw one more wrench into all of this, cuz that's fun. So down here, I have all the codes, so you can actually go through and play with this and make things work as you want to.