JavaScript : Var, Let and Const

The biggest transition of JavaScript came when the 6th version of ECMAScript was launched, a lot of shiny new features came out. And now, since it’s 2022, it’s assumed that most of the developers have become familiar with those features.
I know I am a little late to write an article on this topic as let and const introduced in ES6 and now it is 2022, but still, a lot of developers didn’t know why we use let and const over var? and they just use those variables for sake of declaration.

Bit of history on variable declaration:

At the beginning of JavaScript, there is only one way to declare a variable and that is using the var keyword. With ES6, two new ways to define variables were introduced with let and const. Now, all the major browsers are compatible with the let and const keywords, and most of the developers are using let and const nowadays.

The question is, what makes them different from var, which we were using initially? what’s the big idea? Why there are three different ways to define a variable?

Before we can understand the difference between them, we need to understand what is scoping and hoisting in JavaScript. I am not covering these two topics here but you can check out this article on scoping and hoisting.

Var

Earlier only var is there and he is the king of variable declarations. But there are some issues associated with variables declared with var, though. That is why let and const introduced.

Var declarations are globally scoped or function scoped. That means if a variable is declared with var outside a function then it is in the global scope(accessible anywhere). Otherwise, if they are inside a function we can only access them inside the function.

Let’s look at the example to understand further,

variable with ‘var’ keyword

Here ‘car’ is globally scoped because it exists outside the function while ‘bike’ is declared within a function, so we cannot access the ‘bike’ variable outside the function that is why we got an error as it is in functional scope.

Problems with the var keyword

One of the issues with the var keyword is they can be re-declared inside the same scope. And another issue with var is these variables are not blocked scope which means if var is declared within any {}(block statements), they are not scoped to that block but to the entire global scope.

Let’s see an example to demonstrate those issues with var:

Issues with var keyword

Here the ‘car’ is re-declared and we can see that the count variable is accessible outside the for loop, which is a block statement.
To overcome these issues let and const introduced.

Let

It’s an enhanced version of var, it solves all the problems that come with the var keyword. Like, let is a block-scoped variable and we cannot re-declared but can be updated(re-assigned). You’ll see in the below example as it shows that let is preferable over var.

a variable declared with let

Here we can see that we can update the variable but cannot be re-declared that is why it throws an error and variables that are declared with let and const in block statements( if-else, while, for loop, etc..) are not accessible anywhere.

These facts make let a better choice than var. As it solves both the issues that came with var.

Const

Const declarations share some similarities with let declarations, but const variables cannot be updated or re-declared. It maintains the constant values.
Unlike var and let, if we are using const then it must be initialized at the same time when we declared the variable.
Let’s see with an example:-

const should declared and initialize at the same time

Apart from this, const behaves exactly the same as let. I personally prefer let and const over var. But there are some cases when var is also useful as it is hoisted to the top and initialized with a value of ‘undefined’.

Conclusion:

Let’s summarize the article:-

• While var and let can be re-declared without being initialized but const should be initialized during declaration.
• They all are hoisted at the top but with var, it is initialized with a default value, unlike let and const are not initialized.
• For scoping and re-declaration see the below table for better clarity

Major difference between var vs let vs const

We should make an habit to use const and let over var to avoid unnecessary confusion/errors.