The let keyword in ES6

John Lindquist
InstructorJohn Lindquist

Share this video with your friends

Send Tweet
Published 10 years ago
Updated 5 years ago

Block scoping can be surprising, and sometimes confusing, in Javascript. With es6, we have access to the let keyword to remove this pain.

Man: [00:00] A long-standing gotcha with JavaScript is how VAR works. If I have this message assigned to hi, and I have this message assigned to bye, you'd probably think, "This one's inside of a block so it should have no impact on what this message does up here." But if I run this, you'll actually see that that isn't the case. Bye is being logged out because this is the same message, and it's being reassigned to bye.

[00:26] ES5 does have function scoping, so if I were to create a function and lock it inside of there, then it wouldn't have any impact, and I would get hi. But if I were to create a for loop, or some other thing that could use a block, then that wouldn't work, and I get the same result as logging out, bye, each time. To help with this problem, we don't have LET in ES6, which will allow me to use block scoping.

[00:53] If I rerun this, you'll see that we still get hi, even though we have message here, and message here. This message, because it's inside of a block, even though it's not inside of a function, has no impact on the assignment of this message. They are two separate and different entities. Let's explore this behavior in a bit more detail by creating an array of functions, and a loop where we say VAR I is assigned to zero, I is less than 10, and I is incremented, so I++.

[01:25] Then we will add a new function to our array each time we go through, which will store I, and log it out for us. If we loop through the array of functions using a FOR EACH, which will pass in F, and then invoke F. Again, this function here, which is being passed in through our FOR EACH is simply this function storing our I. You'd think that we'd get zero through 9, but in fact when we run this we'll get 10's, because this I is that same I being used and reassigned each time.

[02:09] If I use LET instead of VAR now, and rerun this, you'll see that I get zero through 9, and it stops before getting to 10, because this is creating a new I each time you go through the FOR loop. What this really means in the end is that if you're used to bringing your variables up to the top of a scope using VAR and things like VAR I, VAR temp, where you want to be careful, because you're afraid of wasting behaviors due to this I, and this temp, feel free now to use the LET keyword, and instead of declaring it at the top, you can declare it in line, inside of the FOR statement, as well as declaring it inside of the FOR block, and it'll safely create this temp each time it goes through the FOR block.

~ 6 years ago

Let me understand well: if I declare the vars of varFunc() like you did in letFunc() the result doesn't change; but if I declare vars of letFunc() like those in varFunc() I get undefined. So: for es5 var I can access anywhere in the scope the variables I have declared whitin that scope (due to hoisting) but for es6 let I can access the variables only where I have declared them? Should I suppose that let's block scope is a kind of work-around to the js hoisting? Please let me know