ES6 (ES2015) introduced the new keywords let and const, to be used side by side with var.
In this post, we’ll take a closer look at all three, how they differ, and when to use them.
With ES6, you can use the let and the const keyword in basically the same places as you would the var keyword.
But, what are the differences?
To understand that, we first need to understand var properly.
The var keyword
With var, the variables you create are function scoped.
That means that they are available inside the function it was created, as well as any nested functions.
To demonstrate this quickly, take a look at this code:
You can access the variable inside the function, and all nested functions, but not outside it.
As long as the variable is declared inside the function, it’s available in the entire function.
Lets take a look at an example where this is slightly problematic:
Both the variable “i”, and the variable “myFunctionScopedVariable” is available after the loop.
This is not so cool. It’s almost never what you want. Ugh. It just feels wrong…
But that is they way that var works.
There is actually another quirk with var, and that is hoisting. It’s not really specific to var, but it’s behaviour is a bit weird.
What hoisting does, is that it moves all declarations to the top of it’s scope. However, it does not move the initialization.
What that means in practice, is that this code block:
will be changed to something like this:
AND, to highlight the initialization part more clearly too (Thanks to Umamaheswararao Meka for pointing this out!)
This will actually be translated to:
which is why it does not behave the same way as:
The let keyword
Now that you mostly understand what goes on with var, we can start looking at let, and how it actually works, compared to var.
The main difference between var and let is that let is block scoped, instead of function scoped.
This means that a lot of the crazyness we saw above, is not going to happen with let. Phew!
More specifically, a variable created with the let keyword is available inside the block it was created, and any nested blocks as well.
Also, it acts like it is not hoisted, but I’ll come back to that.
The first example still works the same way with let:
The second example, however, will now start throwing some errors our way:
Sanity restored. This is most certainly what I wanted, and definitely what I meant.
And it’s not only for functions and loops; this is the behaviour for all blocks. This code explains it better:
But there is also another difference I briefly mentioned earlier, and that is that let “pretends” not to be hoisted.
It actually is hoisted, but if you try to use it before it’s actual declaration, an error will be thrown.
The space between the start of the block, and the declaration is called the “Temporal Dead Zone”. Don’t try to use your variables in that zone.
Allow me to demonstrate:
I personally think this is perfectly reasonable. But you have to keep it in mind, especially if you are refactoring code.
There is one more example I would like to point out, and that is a special case with let, that you might want to know about.
This will result in the following output:
You wouldn’t really think that let would fix this, but it turns out that it does!
The ES6 spec says that let in a for loop is scoped not only to the loop, but to each iteration.
Which means that this code:
will result in the following output:
Again, sanity resorted.
The const keyword
Now that we know a lot about var and let, let’s take a look at the const keyword.
The difference between let and const is not too big.
In fact, all the differences between var and let are also true for var and const.
In other words, let and const is almost the same. They are both block scoped and work the same way.
The only thing that makes const different is that is a constant:
A variable created with const cannot be changed after it is initialized.
And just like constants in most languages (as far as I know…), you have to initialize it when you declare it.
This is good, but you have to keep one thing in mind:
Objects in a const variable are not immutable.
That means that you can still do this:
Which is fine, and also makes the const something that can be used in almost all cases.
We now know how var, let and const work. We also know how they differ from each other.
It’s time to figure out when exactly we should use the different ones.
When to use var
I would say: almost never.
And I really mean that. I see very few good reasons why you might want to use var.
It would have to be because you really want function scoped variables. For the most part, that’s absolutely not necessary, and is only confusing.
When to use let and const
I grouped these two together, because their usage is dependent on when you wouldn’t use the other.
Any variable that you need to redefine later should use let, and any other variable should for the most part be const. If you make a mistake, most modern tools will give you a heads up anyways.
You should stop using var as soon as you can.
There are few good reasons to ever use it, if you have access to let and const.
I also think you should use const whenever you can (whenever you don’t need to reassign a variable).
const should be your default choice, only using let when you really have to.
It makes your code clearer and more explicit about it’s variables.
If you have any questions, comments or constructive criticism (I’d love to get my views challenged with a good discussion), reach out to me on twitter or in the comments.
You can find me on twitter here: gjermundbjaanes
Follow me on Twitter: @gjermundbjaanes