Difference between Let Const and Var

In javaScript, we can declare the variable using var, let, and const keywords. In this article, I am going to explain the exact difference between var, let, and const. How these keywords work differently based on the scope and hoisting.

Scope

The scope could be functional Scope, Block Scope, or global Scope. In general, Scope represents the area, where we have declared variables and where we can access that variable in our Program, I know this is a little confused but just keep this term in mind. There are three types of scope in JavaScript.

Global Scope
Block Scope
Functional Scope

Var has a global and functional scope, If we declare a variable using the var keyword outside the function, we will be able to access that variable anywhere in our code. Let's see an example.

if(true){
var a=10;
console.log(a) //10
}
console.log(a)//10

As we can see in this example, we have declared variable a inside the block. we can access the var inside the block scope as well as outside the block scope.

Let and Const has a block and functional scope, If we declare a variable using the Let and Const keyword, we can access the Variable inside that block only, but if we try to access the variable outside the block then it will give an error.

if(true){
let a = 10;
console.log(a) //10
}
console.log(a)// Reference Error : a is not defined

In this example, we can see that we have declared variable a using let inside if block. we can access that inside the block but, if we try to access the variable outside the block then It will give a Reference error.

Hoisting

Hoisting is the default behavior in javascript, In Which, we can use variable and function names before declaring it. The JavaScript moves all the declarations of variables and functions at the top of the scope so that there will not be any errors. This is called hoisting.

Var Let and Const all of these are hoisted, In the case of var, it is hoisted in the global scope but In the case of let and Const, it is Hoisted in the block Scope.

//var a = undefined (Hoisted)
if(true){
var a=10;
console.log(a) //10
}
console.log(a)//10

In this Example var, a is hoisted on the top of the global scope.


if(true){
//const = undefined (Hoisted)
const a=10;
console.log(a) //10
}
console.log(a)//10

In this Example Const, a is hoisted on the top of the block scope.

Redeclaration and Reassign

We can redeclare and reassign the value of the variable which is declared using var.
```
var a = 10;
var a = 30;
console.log(a) // 30
```
We can reassign the value of a variable that is declared using Let but we cannot redeclare.
```
let a = 10;
   a = 30;
console.log(a) // 30
```
we cannot redeclare and reassign the value of a variable that is created using const.

Let and Const are introduced by Es6. Before Es6 var keywords were used in JavaScript Now, It is recommended that we should use the Let and Const keywords for declaring variables.

Conclusion

In this article, we have discussed when and where to use the var let and const keywords based on the scope and hoisting. In the next blog, we will discuss about how variables are hoisted in the Execution context and how it works. Hope you liked this blog.

Do share your feedback in the comments and help me to improve.

ThankYou.

saurabh Chawda