This course has been updated! We now recommend you take the Deep JavaScript Foundations, v3 course.
Transcript from the "Function Scoping" Lesson
[00:00:00]
>> Kyle Simpson: All right,I wanna dig into function scoping for a little bit and try to develop, or try to come up with a pattern that will help us understand where function scope helps. So I wanna start out with this example, let's imagine you've written some code, you have a foo variable at the top.
[00:00:15] And at the bottom you have a reference to that variable. But sometime in the lifetime of this program, somebody comes along in the middle of the program and inserts lines 5 and 6. And they choose the same variable name for any of a variety of reasons. Maybe that's a really good unique, a really good useful variable name, maybe they just accidentally pick the same one that you did.
[00:00:36] Doesn't really matter why, but they picked the same variable name. Now, we know that's not really redeclaring the variable, so the var part isn't a problem. We already talked about this early in the course with the fact that the compiler would see line 5 as that duplicate var foo.
[00:00:51] It's just gonna be a know up. It's like thanks very much, it's already registered. That marble already exists in the bucket. But that equal sign, that assignment on line 5 is definitely gonna clobber things. So now line 10 is gonna print out foo2 instead of just foo. That's clearly a problem.
[00:01:08]
>> Kyle Simpson: So I wanna talk to this idea of how do we deal with the problem where we've got a variable that, in essence, is colliding with some other variable. How do we fix that? The way we fix that is to create a scope, to contain, to encapsulate that variable declaration.
[00:01:27] And in particular, we wanna create a function or a scope around lines 5 and 6, and we're gonna do that with a function. So I want you to imagine that I just said, okay, well my fix to this is to make some random function. I'm just gonna call it bob for right now.
[00:01:40] Make some random function in the middle of my program, and then immediately call that function. And you'll know now that the line 4, that var foo on line 4, is just contained within that function. So it doesn't overwrite line 1, and that preserves line 9 to work correctly.
[00:02:00]
>> Kyle Simpson: So we've used a function to create some scope, and by the way, this can happen in lots of different places. You might need to create some scope instead of, I don't know, a for loop. That's a hint for later, okay? Any place that you might need to create some scope to protect something, either from collision or just to protect it from access, putting a function around it is a decent way of doing that because JavaScript's unit of scope is the function.