As a developer and tutor, I got asked this question quite a few times. In fact, I have seen many developers use var and have no clue on why they were using it. Especially if you are learning to program from older books, you may only see var being used.
let and const may resemble a new or fancy feature of JavaScript. Yet, it’s not the case. They come as a way of improving your code, not just make it fancier. By knowing their difference, you’ll get more comfortable at choosing which one is best for you. And not just use them “because”.
Let’s look at the difference between var, let, and const in this article.
Assignment between let, var & const
The first difference is that you can assign a variable name using var twice. You cannot do this with let or const.
For example, let’s create a firstName variable.
var firstName = "John"You can reassign the same variable using var as many times as you want:
var firstName = "Jane"This will simply reassign the name variable to “Jane” again.
If you would try to do it with let, it wouldn’t work:
let firstName = "John"
let firstName = "Jane" // brings an error (name is already assigned)Using let, you would have to proceed differently like so:
let firstName = "John"
firstName = "Jane" // this would work!On the other hand, you can assign a value using const only once!
const firstName = "John"
firstName = "Jane" // this brings an error (assignement to a constant variable)The fact that you can’t use let twice for the same variable firstName makes your code less error-prone. You know that you can’t declare the same value twice.
Now let’s look at the second difference between var, let & const: scope
Let & const are block-scoped. var is global-scoped
What does this mean? In JavaScipt, a scope is defined by the context of availability of the variable. When a variable from anywhere, we say it’s global-scoped. When it’s available from a function, we say it’s local-scoped. By default, var is global-scoped while let and const are local scoped. Here’s an example with var and let (or const)
const firstName = "John"function sayName(){
const firstName = "Elena";
console.log(firstName); // logs "Elena"
}console.log(firstName); // logs "John"
This code above is going to have the same output as using let.
Now let’s see what happens when we use var
var color = "blue"function sayColor(){
var color = "red";
console.log(color); // logs "red"
}console.log(color); // logs "red"
What happened? In the first example, we create a firstName variable and assign it to “John”. We then define a function sayName that creates its variable firstName and logs it to the console. Even if we have the same name for firstName, the two values exist in different scopes: one locally (within sayName) and the other globally. Thus, their value won’t collide because of the keyword const (or let ).
However, this will differ when using var which overwrites the previous value for color. Using let & const instead of var gives you that feature.
The reason we use let & const instead of var is that your code becomes more predictable. Now you know why you should const & let by default and avoid var.
