Block Scoping with let

[00:00:00]
>> Kyle Simpson: Speaking of scoping, where we wanna collect things, the more common way, these days, over the last few years, we've introduced block scoping into JavaScript. And the more common way for us to organize a set of variables instead of having them pollute the enclosing scope, the outer scope, is we use what's called block scoping.

[00:00:19]
So instead of using this IIFE example to protect the teacher variable declaration on line 4 from changing the one from line 1, we want those to be separate variable,s and we need a scope. And instead of using a function to do that, now we have the option of simply using a curly brace block, and we switch from using a var to using a let.

[00:00:41]
The let keyword will tell us to create a variable inside of a curly brace block, and that declaration then is separate. It's an entirely different variable. Even though they have the same name, it's a different variable, and that allows us to kind of keep our variables more nicely collected together.

[00:00:58]
We don't need them all out in the global scope, we like to have them as close to where we're gonna use them as possible. So block scoping is a very important feature. It had been missing from JavaScript for quite a long time, and now we have that, as of three or four years ago.

[00:01:12]
In ES6, we now have the ability to use the let keyword. And indeed, you probably will have seen, over the last year or two, almost all code snippets you find online, it seems everybody's using let, it's an extremely popular feature. I recommend using that whenever you have a variable inside of a block.

[00:01:29]
Use the let keyword so that you can protect it from encroaching upon an outer scope. One of the ways that we end up using this is inside of these various blocks, like for example, an if statement. Here I'm using the let tmp, so that that tmp variable only belongs inside of the if statement instead of out in the whole function scope, or even in the global scope.

[00:01:49]
It only exists for lines 3, 4, and 5, and the tighter, the smaller the places where our variables can be, the less likely we are to have variables accidentally being reassigned. The less likely we are to have variables being changed in ways that we didn't expect, and because somebody's trying to mess around with our code.

[00:02:07]
These things, if we keep them as privately as possible, there's a general principle of engineering here, which is we wanna keep things as hidden and as private as possible. Only make them available if we absolutely have to. Block scoping is a key tool in that. You'll notice here that I'm using a let on a for loop because we wanna make an i that belongs to the for loop, it's only available for the purposes of that for loop.

[00:02:33]
But you'll notice also that I'm still using a var out on the result variable. And the reason for that, this is a personal choice, a personal, stylistic opinion of mine, that instead of changing all of my vars to to lets, I like to still use var at the function level.

[00:02:50]
Because VAR is always gonna behave as if it belongs to the function, I like to put VARs at the function level and only use lets inside of blocks. I think it communicates the difference between those two, communicates clearly, hey, this thing is gonna belong to the whole function, now this thing is only gonna belong to this block, like a for loop or an if loop.

[00:03:12]
And I also think it's really important for us to be very careful about not just putting something at the function scope because it's convenient. If it's only needed for a few lines, go ahead and open up a curly brace block, like I'm doing here, lines 2 through 6, to collect the prefix and the rest variable into a block, instead of just making those at the function level.

[00:03:34]
Whether you use the let or the var, either way, they don't need to exist for the whole function. They only need to exist for those first couple of lines of the function. So it's a good idea to just go ahead and open up a block, just to contain those variables.

[00:03:48]
Again, remember this principle of keeping things hidden whenever possible. Have them as narrowly scoped as we possibly can. So I call this an explicit let block, because it opens up a curly brace pair, and then we have the let keyword on line 2 to create a couple of variables.

[00:04:05]
Prefix and rest only exist inside of those few lines. And they can't possibly be collided with or accidentally misassigned on lines 8 through 12, because those variables aren't even in that scope anymore. They're now inside of the smaller scope. So block scoping can be a very powerful tool for helping prevent bugs, preventing problems, that don't come to bite you until sometimes weeks or months later.