Scope

[00:00:00]
>> So there's one other interesting thing going on here. Fact came from way up here. And inside of my function I was able to name fact, talk about fact use fact as a value. Even though it wasn't really something like local to this function, it was something earlier in my program.

[00:00:29]
So what is going on there and that is the next thing we're gonna talk about, which is scope of variables. Because in our JavaScript programs, there are so many variables in play. And scope is a concept in programming languages generally but in JavaScript specifically, that reflects the fact that it doesn't just matter which variables we declare.

[00:01:01]
It also matters where we declare them and where we're trying to use them. So in other words, scope is kind of a general concept that determines where and when variables are in play meaning like valid references that I can use. So basically when can I access that variable by its name and what is it gonna point to, what is in play here?

[00:01:27]
So scope is something that we just need to spend a moment talking about, because it sometimes results in some surprising things in our programs. And it's important as we go on in our JavaScript journeys for us to develop a intuition and a solid foundation of how JavaScript does scope.

[00:01:50]
And where our variables are gonna be usable, depending on where we declare them. So let's take a look at this example. I have a function called declare bankruptcy, if we think back to our Michael Scott Gif from earlier. Where I'm declaring the variable bankruptcy and I am declaring that variable and assigning it to a value of true.

[00:02:19]
Within the body, which is what we call the stuff in curly braces the corpulent functionality of the function. So within the body of the function inside of those curly braces I am declaring a variable bankruptcy and I am setting its value to true. The question is, what do you think is gonna happen when then I call declare bankruptcy and then on the following line, I log the value of bankruptcy.

[00:02:48]
Any guesses what is gonna happen?
>> It probably is gonna say it's undefined.
>> Maybe it'll say it's undefined. Let's check it out. All right, so let's check it out. We're gonna take this code, we're gonna go over to our console. We're gonna run it line by line, so we've got our function declarebankruptcy, okay, cool.

[00:03:17]
Now I'm gonna call that function, cool. And it didn't return anything but we expect that because we didn't have a return statement. And now the question is, what is bankruptcy? And not only did we get undefined, we even got a an error that bankruptcy has not even been declared yet.

[00:03:38]
It's not even a thing, it's not even a variable that points to undefined, it's a reference error. JavaScript says, I don't even know what word you're saying right now, I can't even understand you, so what is happening? Essentially, in JavaScript we have a concept of nested scopes where we can think of scopes as sort of like a playing field where we can declare variables and then access them.

[00:04:15]
And we can talk about scopes as being wider or narrower in scope, so meaning kind of like a view you could have on the world. You can see more things or you can see fewer things. And in JavaScript, each time that we write a function, each time we declare a function, Inside of the body of that function, is its own new scope.

[00:04:45]
And that scope is different than the default scope of that we've been using so far, where we write everything on the same level in the program, which is what's called the global scope. Well, let's take a look at another example and then we'll go to the whiteboard. In this example, I have a declaration of a variable called planet that I'm assigning to the string Jupiter.

[00:05:22]
Then I'm declaring a function, that I'll just call scope out that has another declaration of a variable planet with a different value, Mars. Now if I log within space out and I'm gonna use the phrase inner planet to describe the value that I'm login within that scope. When I use the name planet, when I refer to planet, what do you think it's gonna refer to?

[00:05:56]
>> Mars.
>> Mars, then when I call that function, and outside of that function, log the outer planet, guess what planets gonna refer to?
>> Jupiter.
>> Jupiter, let's check it out. Okay, so first I'm gonna declare my planet variable. And as we might expect before I do anything else, planet is Jupiter.

[00:06:26]
Now I'm gonna declare my function. And nothing has happened yet because I've just declared the function, I haven't run it, I haven't called it. So let's call it. And once I call this function, JavaScript is gonna start running the code inside of the function. So it's gonna run the line that says left planet equals Mars, and then it's gonna run the line console.log("Inner planet:", let's see what happens.

[00:06:54]
Okay, so it printed out inner planet: Mars, makes sense, because it's inside of the asteroid belt, okay. Now, if I console.log( outside of the function, outer planet. Now, when it says planet it's referring back to the planet that I had defined outside of the function Jupiter. So let's take a look on Whiteboard what's happening here.

[00:07:20]
So what we've been saying so far is we've been talking about variables as being all in this one big space. But really, I've been sort of glossing over the fact that when we declare these variables, we are declaring them within a space that we could call global, so we could say this is global variables.

[00:07:43]
And here, when I say let planet equals Jupiter I have a new variable planet and then somewhere over here in In value land I have a string called Jupiter. And I am making a link an arrow from my global variable planet to the value Jupiter. Now the thing is when I declare a function I sort of get a new scope that's narrower than the old one.

[00:08:21]
And this is what did I call this scope out, I think was the name of the function. And because we declared that function, we actually get a global variable called scope out, that points to the function. And then within scope out, we have another variable planet, where somewhere out there we have a string called Mars, And we are associating that planet with Mars.

[00:08:53]
So when I asked JavaScript for planet inside the body of the scope out function, JavaScript is looking for a variable within that scope. And it says I found planet and it follows the link and it finds the value Mars. But when after I'm done running that function, I asked JavaScript to console log planet from the global context from the overall context, the widest context possible.

[00:09:24]
It's looking for a variable called planet, it's finding planet in the global scope, which is where I'm in now because I'm done with the function, following the link and finding the value Jupiter. Okay, so let's talk about what happened in our earlier example with bankruptcy. So I had a global scope, and in that scope, I declared a function bankruptcy.

[00:09:58]
Or sorry, it was called declare bankruptcy, right, was the name of the function. [LAUGH] See, it's a hard word to spell. And that created its new scope with the function body there, so this is the declare bankruptcy scope. And within that, I said let bankruptcy equal true, I think.

[00:10:26]
So here, I created the bankruptcy variable. I had a value out here somewhere called true and I said hey JavaScript point to the value true, from the variable bankruptcy within this scope. But then later after I was done running the function when I was out here somewhere I said, hey JavaScript, what is bankruptcy?

[00:10:54]
And JavaScript looked in its scope where I'm asking it, in the global scope, it looked for a variable called bankruptcy, and unlike in our planet example, we don't have one. We don't have anything called bankruptcy in the global scope. And it can't see into the inner scope of the declare bankruptcy function, so it says error, I do not have a variable called bankruptcy.

[00:11:20]
I don't know what you're talking about Anjana, stop doing nonsense things in your code. So this is kind of an important thing about scope, is that it really matters where we have those declarations. And if we have multiple similar declarations, the values that they refer to might be different, like we saw on our Mars and Jupiter example.

[00:11:41]
This is a tricky thing to wrap your head around for the first time so if this is like, don't worry about it, we're gonna keep talking through some examples.
>> Could you force that variable planet to be a global variable within the function itself or no?
>> Can you force the variable to be a global within the function, okay.

[00:12:00]
So just a recap of what we just said, basically within each scope which they're nested, right. So we have the global scope that we land in, then we have a new scope for every function. Within each scope that we're in, and we can even have like functions within functions.

[00:12:17]
So we can even have like Russian doll scopes happening here, we're not gonna get that far but that's for later steps with JavaScript. But within a scope you cannot see any inner scopes like you can imagine them wrapped up in a little privacy film and like tinted windows.

[00:12:34]
So that you can't see into them from the outside, So our function scope has tinted windows on it. From the global context, we can't see in, but from a narrower scope, we can see out. So, just with tinted windows in your limo, that you're surely gonna be driving in once you've, started the next billion dollar company with your JavaScript skills.

[00:12:58]
You can see out from the function scope into the wider global scope. So we can see other things like in our is correct function, we could see our fact object. That was a variable declared outside of the function. So we can think of these scopes as sort of having tinted windows on them, okay.

[00:13:19]
So this is just an example highlighting something similar to what we did in our is correct function, here we have a global variable declared in the global scope, to a string that describes what it is. Then we have a function narrower scope, which just is there to create the narrower scope, we can log the global variable from in here.

[00:13:43]
Let's prove it. Okay, so I have my global variable, boom global variable, is there. Okay, great. Now I'm gonna declare my function now our scope, nothing happened because I haven't run it yet. So now let's run it and if we can see out of our tinted windows then we should be able to see the global variable and log its value.

[00:14:09]
And we gonna declare a local variable. So we saw I live in global scope so yes we were able to see out the tinted windows. But now if I tried to log the local variable we get the same thing we saw before with bankruptcy we get this reference error because we can't see into the limo.