What is the difference between Var, Let and Const

The introduction of ECMAScript 2015, introduced two new ways of declaring variables – “let and const”. But was there a need to do so when we already have “var” to begin with? There were some problems with var which were later founded out and to came up with the solutions for that problem, let and const were introduced, but why two. This blog will cover all of it like the difference between var, let, and const and also the problems which var had.

let’s begin…

VAR

Before the introduction of ES6, var was the sole proprietor for declaring a variable in JavaScript. But there were problems associated with it. 

Before going into more detail, how about understanding the word scope first as it will be used many times, and we need to understand it for declaring variables too.

Scope

Scope is just a part of JavaScript that tells us the accessibility of a variable – where it can be declared & used and where not. 

Let’s understand this with the help of an example – 

Scope is of three types – 

• Functional Scope
• Global Scope
• Block Scope

Functional Scope

Variables declared inside a function are called local variables and have a function scope. Local variables are accessible from anywhere inside the function. 

Global Scope

Variables declared outside any function or parenthesis are called global variables and have global scope. They are accessible from anywhere inside the program.

Any variable declared inside a function without any of the keywords is also considered a global variable

Block Scope

Variables declared inside a block of curly braces or parenthesis are also local variables but they have block scope. They can only be accessed inside that block.’

Let’s see an example to understand them – 

The above example contains a variable i declared with the keyword var and has been declared inside a function making its scope functional. Thus, it can be accessed from both inside and outside of the ‘for loop’ but within the braces of function. 

While in this above example, i is declared with let making it a variable with block scope. Because of this, it is not accessible outside of the curly braces. 

A set of parenthesis also falls in the block scope category, but when attached with curly braces like in this case.

Scope of VAR

As told already, variables declared with var have both functional and global scope. It depends upon where it is declared.

Hoisting in Var

Hoisting is a process where all the variable declarations are done at the top of their scope.

console.log (greeter);
var greeter = "say hello"

it is interpreted like this:

var greeter;
   console.log(greeter); // greeter is undefined
greeter = "say hello"

In the case of var, variable declarations can be made anywhere and can be accessed from anywhere within its scope. This is because variables declared with var without any value are considered undefined.

Problems with var

The variables declared by var can be re-declared and updated which can cause errors later in the code. Due to this, let and const are added as the keywords for declaring a variable.

Check the below example – 

let

After the introduction of ES6, let was introduced as one of the keywords for declaring a variable. It has taken the place of var as the most preferred keyword for declaring variables as it overcame the problems that var had,

Scope of let

Let is block-scoped which means that it can only be used with the set of curly braces whether used for declaring a variable or using its value, both must be done within the same curly braces. Let’s understand this with the help of an example – 

Hoisting in let

Variables declared by let need to be hoisted at the top of their scope.

Advantages of let over var

A variable defined by let can be updated but cannot be re-declared in the same scope.

Why not see an example to get a clear picture – 

Const

Const keyword is used to declare variables that can neither be updated nor re-defined.

Scope of Const

Just like let, it is also block-scoped but needs to be initialized first.

Hoisting of Const

It should also be hoisted at the top of its scope, in the same manner as let is done.

Advantages of Const

The term “const” can be practically misleading, as it does not define a constant value but it defines a constant reference for the value.

It means that in const – 

• A constant value cannot be re-assigned
• A constant array can not be re-assigned
• A constant object cannot be re-assigned

But we can – 

• Change the elements of a constant array
• Change the properties of a constant object

How about an example to understand this better –  

Conclusion

To sum it all up I will be differentiating them in a tabular form