The full video and many others like it are all available as part of our Frontend Masters subscription.

Kyle Simpson

Kyle Simpson is an Open Web Evangelist from Austin, TX, who's passionate about all things JavaScript. He's an author, workshop trainer, tech speaker, and OSS contributor/leader.

Kyle Simpson

You Don't Know JS

In ECMAScript 6, the "let" keyword will implicitly create a block-level scope and add declarations to that scope rather than the enclosing function. The most common use-case for the let keyword is for loops.

Get Unlimited Access Now

Kyle Simpson: Back to our let keyword. The let keyword, as I was saying, the let keyword is kind of like var. It will declare a variable, but it will attach that variable implicitly to whatever block it appears in rather than attaching it to the function. You recall from our discussion of the compiler, wherever it finds the var it's going to attach it to whatever function scope it's in.

Well now, if it finds a let somewhere, it's going to attach that variable to whatever block it's in, so essentially, implicitly hijacking our blocks. Here's one example, and this is probably the most common reason why people use block scoping. Anybody do for var i? You put your little variable declaration of i right inside the for-loop?

You ever wondered why we do that? And I'd suggest to you, I think the reason that became so common to us is the i value there is something that we only intend to use for the for-loop. So, there's something natural about saying, if I only intend to use it for the for-loop, let me put it directly on the for-loop because, stylistically, I'm basically saying I'm not going to use it anywhere else.

Okay. Now, in JavaScript we have the ability to abuse and reuse variables all over the place, so we do it anyway. But we put the var there because we're trying to signal to ourselves and to future developers that i is only for the for-loop. Okay, but a var i here, if that had said var i on line 3, then it would have attached to the function because we know how variable declarations, they attach to their function scopes.

If we do, let i, it will make that i actually attach to the for-loop as opposed to the function. It will hijack the scope of the for-loop. The same is true if we put a let inside of an if statement, like we see on line 3. The let baz = bar, that's going to attach the baz variable to the if statement from line 2.

And that's why on line 9, when we try to look at that variable, it doesn't exist because it's outside of its scope. So the let keyword will hijack, implicitly, the scope of whatever block it appears in. Okay? That's basically any two pairs of curly braces, although not entirely.

But basically any two pairs of curly braces, the let keyword will just hijack that block. Now, this is incredibly powerful because it allows us to put variable declarations, following the principle of least disclosure, put them as close as possible to where they're going to be used, as far down as is necessary.

So there isn't any possible chance that they're conflicting with other variables, it allows us variable-reuse in different places of a function, and so forth. A lot of power to the stylistic thing. We've been doing this before, probably some of you have code where you put your vars inside of your ifs because stylistically we wanted to do it.

We now have a way to enforce functionally what we were already doing stylistically. So there's value there, there's value in terms of early errors if we're accidentally referencing variables that we shouldn't. There's some potential performance benefits because now these values can be garbage collected earlier, since they're inside of blocks that go away.

So there's lots of possible functional benefits to go along with the stylistic choice of block scoping. Does that mean that we're going to do all block scoping? I don't think so. There are some notable people on the TC39 committee that have literally said, let is the new var. And they've encouraged people to do a global find and replace, and replace all occurrences of var with let.

In fact, anecdotally, a few years ago I worked at Mozilla. Mozilla's had the let keyword for like a decade. So I worked at Mozilla and we wrote JavaScript code for the Firefox browser. And the first two code commits that I tried to get into the code base were rejected because I used vars instead of lets, and they had that culture that said because we have the let, you should always use let.

I don't agree with that and maybe that's one of the reasons I don't work there anymore, but nonetheless some people think let's the new var, you should replace them all. I think you're going to use both. I think you're going to continue to use var declarations for things that you want to make available to a whole function, and lets for things like for-loops, where you want to put it in one specific location.

Ready to take your code to the next level?

Intense courses with world-class teachers and unlimited access to our growing library of videos for the great price of $39 per month.

Get Unlimited Access Now