Dynamic Global Variables

[00:00:00]
>> Kyle Simpson: Moving on then to line five because there's certainly a question as to what's gonna happen with line five. What's gonna happen with this topic variable? Well, it's gonna process exactly the same, same questions. That's why I'm teaching you their narrative. So how does that start? Hey scope of.

[00:00:16]
>> Speaker 2: Other class.
>> Kyle Simpson: Other class. I have a what kind of reference?
>> Speaker 3: Target.
>> Kyle Simpson: I have a target reference, thank you. I have a target reference for the identifier topic. Ever heard of it?
>> Speaker 2: No.
>> Kyle Simpson: So where do we go next?
>> Speaker 2: Global scope.
>> Kyle Simpson: A global scope.

[00:00:30]
I have a target reference for the variable called topic. Ever heard of it? And the answer is?
>> Speaker 3: No.
>> Kyle Simpson: Well we would like for the answer to be no. It seems very reasonable for the answer to be no. In fact it seems somewhat crazy that it would ever be anything other than no but here we see one of the historical bad parts of JavaScript which is in the early days to be as forgiving as possible for people that didn't understand the language, they instituted this idea of auto global's.

[00:01:01]
So if you try to assign to a variable that's never been formally declared. Once you arrive at the global scope, if you say hey, global scope, I'm looking for this marble called topic, ever heard of it? And the global scope instead of saying nope, sorry error, the global scope's gonna say I just created one for you.

[00:01:21]
Aren't I helpful. And it's gonna hand us a red marble, not a blue marble. Why do you suppose it only hands us a red marble and not a blue marble?
>> Speaker 4: Because it is non globally.
>> Kyle Simpson: Cuz we're talking to the global scope now. We've already passed up the scope where that would have been formally declared and now we're talking to the global scope and it's the global scope that gives us the variable.

[00:01:41]
Are you with me? So we've created an auto global called topic which that sounds terrible because it is terrible. But now there's a global variable called topic and when we get that red marble back and make the assignment on line five, there's a global variable now with the value React in it, okay?

[00:02:00]
>> Speaker 4: So topic is just like teacher saying there's no difference then at the global level there too.
>> Kyle Simpson: I wouldn't say there's no difference. Certainly creating a declaration at compile time and creating it dynamically during the run time, have differences. There are performance differences and other sorts of things but mechanically they are two global variables at this point okay.

[00:02:21]
>> Speaker 4: Or down the road if you wrap it around then it will make difference because it would pop again up.
>> Kyle Simpson: Yeah, I mean if this wasn't the global scope again then.
>> Speaker 4: But if erupted again later on and.
>> Kyle Simpson: Teacher wouldn't be a red marble anymore. [CROSSTALK].

[00:02:38]
Okay, regardless of how you wrap your brains around this just take this particular takeaway, never ever under any circumstances did you intentionally auto create global's like that. Always declare the variables that you want to use declare them in whatever scope you need them in, but don't auto create them like this, yes.

[00:02:56]
>> Speaker 2: That would occur also if topic equals react were in the global scope under variable of teacher.
>> Kyle Simpson: That's true. Yeah, any assignment to a variable that is undeclared at that moment, it is not available to any scope that we have access to, not declared to any scope we have access to.

[00:03:12]
Any undeclared variable is going to end up creating this auto global. Now, the reason why that happens is because you'll notice that this program is not running in strict mode. And in just a moment, we'll see when we flip on strict mode, it will change that behavior. But this is running in the non-strict mode or sometimes called, sloppy mode.

[00:03:31]
You should be using strict mode, and if you were using strict mode, you wouldn't see this behavior. But since this code snip it isn't, that's what happens, as we end up creating a global variable called topic, okay? So execution is then done in the function. We execute console.log the same way as we have before.

[00:03:49]
Execution moves to line 11. How does the execution of line 11 work? Hey, we gotta talk to a scope, right, same conversation as before, same narrative. So hey, global scope, hey red bucket. I have a what kind of reference?
>> Speaker 3: Source reference.
>> Kyle Simpson: A source reference to a variable called?

[00:04:06]
Teacher. Teacher. Ever heard of it? And the answer is?
>> Speaker 3: Yes.
>> Kyle Simpson: So we go get that marble and we look for its value. And what value does it have?
>> Speaker 3: Suzy.
>> Kyle Simpson: It has Suzy. Remember? Because of line four, we assigned to a red marble. We've overwritten the value in that variable.

[00:04:22]
It's not a separate variable, not a separate marble. Okay, line 12 then, how does line 12 execute?
>> Speaker 3: Hey global scope.
>> Kyle Simpson: Hey global scope, I have a?
>> Speaker 3: Source.
>> Kyle Simpson: Source reference for? Topic. Topic, you're experts at this, very good. Ever heard of topic? And global scope's gonna say?

[00:04:39]
Here's your red marble. Here's your red marble. And when we look at the value in the red marble it's gonna say?
>> Speaker 2: React.
>> Kyle Simpson: React, react.
>> Speaker 3: So if line 11 ran before line 9, teacher would still be top.
>> Kyle Simpson: Say that again I'm sorry?
>> Speaker 3: So if line 11 was actually in line 8.

[00:04:59]
>> Kyle Simpson: I think you're talking about line 12?
>> Speaker 3: I'm talking about line 11.
>> Kyle Simpson: Okay, so if line 11 was on line 8 then teacher would say Kyle, correct. What would happen if line 12 was on line 8? There would be no identifier, right? We'll see that case in the next slide.

[00:05:20]
But there is an identifier on line 12 because the function otherClass auto created it by assigning to a non-declared variable.