ES6 Concept Tutorial: let

Hi everyone! Raz here :)

With the introduction of ES6 there are a few key features and improvements to be noted.

One of these new features is the keyword let.

let is meant to be used instead of var.

The reason to use let is to simplify block scope rules. The rules are very lenient with var and a lot of people are confused as to where they have access to a variable created using the word var.

a variable declared using let is only accessible within the same block scope.

think of a block scope as anything within two curly braces.

// outside foo block scope

function foo() {

    // inside foo block scope

}

// outside foo block scope

So that’s all concepts and we’re still confused about how it works and why/when we would want to use let over var.

Let’s look at some examples:

function lala() {

    let word = "bubbles";

    console.log(word);

    if (true) {

        let word = "cacao";

        console.log(word);

    }

    console.log(word);

}

lala();

The console output looks like this:

"bubbles"

"cacao"

"bubbles"

So we have a function called lala for no other purpose but to demonstrate how block scope and the let keyword work together. 

We first declare a variable called word and initialize to the string "bubbles". Then we console log it and the output, as expected, is "bubbles". The if statement that follows is there to wrap the next two lines in a block scope.

Inside the if statement we declare another variable called word and we initialize it to the string "cacao". After this we console log word and the output, as expected, is "cacao".

Now, here's where it gets interesting:

After the if statement, we console log the variable word again and its value is still to "bubbles". Makes sense, right? Yeah, it does, because that's how it should be. The variable inside the if statement is a different variable in a different scope, even though it has the same name.

Isn't that great? I think it is :)

Are you confused as to why this matters? Let's look at what happens when we write the same code using var instead of let.

function lala() {

    var word = "bubbles";

    console.log(word);

    if (true) {

        var word = "cacao";

        console.log(word);

    }

    console.log(word);

}

lala();

The console output looks like this:

"bubbles"

"cacao"

"cacao"

So what's happening here?

Everything behaves as previously, up until the if statement.

So we declare our variable called word and initialize it to "bubbles". Then we console log it and, just as before and as expected, the output is "bubbles". 

Next, inside the if statement, we declare a variable called word and initialize it to "cacao". Then we console log word and the output, as expected, is "cacao".

Cool, so everything looks good so far, same output as before.

Here's where we notice the difference.

After the if statement, we console log word again and the output is "cacao". 

What happened?

When we created a new variable inside the if statement it actually overwrote the first one. So when we console logged it the third time, its value reflected the change made in the if statement. 

So when we use let instead of var, block scope is isolated and we actually have 2 different variables with the name word. When we use var, we have one variable that gets overwritten inside the if statement. If we actually want this behavior to happen, we should only re-initialize inside the if statement instead of re-declaring.

This would look like so:

function lala() {

    let word = "bubbles";

    console.log(word);

    if (true) {

        word = "cacao";

        console.log(word);

    }

    console.log(word);

}

lala();

Output: 

"bubbles"

"cacao"

"cacao"

That's it for now, guys. I hope this helps you in your web dev quests :)

Please let me know in the comments if you have any questions or requests. You can subscribe to my channel to stay up to date on web dev and my articles :)

Check out some ES6 docs for more info on let and other new concepts that were introduced with ES6.

Thank you!