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