ES6, I would say, has revolutionized the year old variable concepts of Javascript by introducing the new let and const keywords. And no other developer will disagree on the fact that this approach has given the chance to themselves to prevent their scripts from getting infected by the mess of variables.

What I am going to do here is I will write about some of the key characteristics of var, let and const.

Before jumping straight into the different concepts of var, let and const, there is another concept called ‘hoisting’ which I think is essential to have an idea about.

Hoisting

let’s take a look at the following code.

i = 34
console.log(`Let’s see what happens to i: ${i}`);
var i

Even if the variable i is assigned before it’s declaration, this piece of code will compile and print the value of i successfully. Why? Because, when javaScript compiles it’s code, it pulls all of it’s variable declarations to the top. But, leaves the variable assignments and other statements on the place as it is. As a result, during the compilation this piece of code will turn into something like this:

var i
i = 34
console.log(`Let’s see what happens to i: ${i}`);

As you can see that now it makes sense of why this code didn’t show any error. This process of moving the variable declarations to the top, is called hoisting in javascript.

In the case of let and const, hoisting does not apply to them. So, there is no way that we can assign a let or a const variable before their declaration.

Scoping of Var

var in javascript is function scoped. And there are two types of scopes.

1. Global
2. Local

When we do not declare and Initialize a variable within any functions then it will be available throughout the script. Also means, that the variable is globally scoped.

On the other hand, if the variable is declared inside a function then it will only be available within the scope of that particular function.

Take a look at the following code:

(function(){
var one=10;
console.log(`variable one from inside the function: ${one}`);
})()

This will print out the value of the variable ‘one’ because the variable was declared, assigned and printed from within the function.

Now, what if we try to print it from outside the function? This will show a Reference Error because the variable is local scoped means it is only available from within the function.

Let’s see what this code will do:

var one=10;
(function(){
console.log(`variable one from inside the function: ${one}`);
})()
console.log(`variable one from outside the function: ${one}`);

Now as you can see that the variable isn’t declared and assigned inside the boundary of any function, it will be available for the entire script. As a result, this will print out the value regardless of where we want to print it out on the script.

This property of var makes the variable available inside the window object.

If you can go your chrome console and try to print out window.one you will see that the variable is available there as well. Which is not a good thing. Because, it can override the existing properties of the window object.

Scoping of let and const

Unlike var, let and const are not function scoped but block scoped. This means the let and constant variables will only be available inside it’s block. Take a look at this piece of code:

(function(){
if(true){
let count = 2;
console.log(`count is ${count}`)
}
})()

The value of count will successfully be printed because the let is declared within the block. If the variable was declared outside of the scope of the block then it would throw a Reference error obviously because let is not function scoped. Look at the following code:

(function(){
if(true){
let count = 2;
}
console.log(`count is ${count}`)
})()

count variable will not be printed because let is only available inside the scope of the block, not the scope of the function.

Same thing would happen with the const.

let and const can not be reassigned like var

A var can be reassigned. Look at the following code:

var count = 1;
var count = 3;
var count = 5;
console.log(count);

Try doing it with let or const. They will throw Syntax Error. This features of let and const eliminates the possibility of accidentally reassigning a variable.

const is still mutable

A const variable can not be reassigned. And it has to be declared and initialized in the same statement. Means, you can do this:

const aConstVariable = 4;

But, you can not do this:

const aConstVariable;
aConstVariable = 4;

Once declared and initialized, a const can never be changed. So, does that make it totally immutable? Nope. It isn’t. You can still update the value of a const object. But, you never can totally reassign it. Means, you can do this:

const aConstObj={
a:1,
b:2
}
aConstObj.b=5;
console.log(`value of b now is: ${aConstObj.b}`);

But, not this:

const aConstObj={
a:1,
b:2
}
//Reassigning the variable with an updated value of b
aConstObj={
a:1,
b:5  
}
console.log(`value of b now is: ${aConstObj.b}`);

Conclusion

The best practice would be to use const as much as possible. If it is absolutely necessary to reassign a variable then let would still be the best choice.

At the end the point of using all these different ways is to write cleaner, more readable and more efficient code.

Thanks for being with me here. Happy coding!!