Scope

[00:00:02]
>> Kyle Simpson: Al right, let's look at our second unit of discussion under the three pillars. The second pillar we wanna look at is the scope system, and specifically the closure system. So we're not gonna go too deep into this topic. There's definitely a lot more to go through both in the book, and also there's a companion course to this one called Deep JS Foundations.

[00:00:21]
If you wanna go further, I would definitely recommend checking that out. Wanna look just a little bit at this idea of how scopes work, and what they mean for how closure works in our programs. So just to give you a quick, practical definition, what does scope mean? It means where the JavaScript engine looks for things.

[00:00:39]
And the things that it's looking for are these variables, these identifiers. So when I say x equals 42, we need to know where in the program to find x. Where in memory, that is. Where in memory is it, and what bucket of organization does it fit into? And the rules for that are called scope.

[00:00:58]
Same thing when I said console dot log y. Not only do I need to look up console and log, but I also need to look up y. I need to figure out that variable. Where does that come from? Does it come from this scope? Does it come from a different bucket of scope?

[00:01:12]
So all the rules that go into figuring that out, that's called scope.
>> Kyle Simpson: Looking at this example code, you'll notice that I have a line one var teacher equals Kyle. And then, I have an assignment to a teacher variable inside of our function on line four. I say teacher equals Suzy.

[00:01:33]
Well, because there's no declaration for a teacher inside of otherClass, the rules of scope tell us that it's gonna find the variable in the outer scope. So line four is gonna end up pointing at the variable out in the outer scope. It says that's the area of memory that we need to assign.

[00:01:53]
So when I've run the other class function line nine, I've ended up changing that line one teacher variable from the value Kyle to the value Suzy. That's part of what we mean when we talk about scope, is the rules for figuring out how variables get set. Line one sets the variable directly in the same scope, but line four ends up crossing that boundary of scope by assigning a teacher variable.

[00:02:19]
And when we looked it up, we found it in an entirely different scope. But then, when I set topic, what's gonna happen with that? Well, there is no topic declared inside of otherClass, and there's also no topic declared in the outer scope. And because this program is in what we call non-strict mode, it's in the sloppy mode as it's so referred to.

[00:02:41]
Because of that, when I do the assignment on line five to a variable that's never been declared, that ends up creating a variable in the same global scope. It can't create it in otherClass. Because of the rules of scope, it creates it into the global scope. So now we have both a teacher and a topic that are out in the global scope.

[00:02:59]
Which is why, down on lines 11 and 12, when we access both variables by that name, teacher goes and finds the value Suzy, and topic goes and finds the value React.