Autoplay

    The let keyword in ES6

    John LindquistJohn Lindquist

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

    javascriptJavaScript
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss