Ateev Duggal

Oct 4, 2021

5 min read

Difference between Var, Let & Const

In the beginning, we only had the var keyword for declaring a variable in JavaScript. But after the introduction of ES6 in 2015, two new keywords were introduced — let and const.

But why was there a need for let and const to be introduced for the same reason we had var? We will discuss this and also the differences between them in this article with examples.

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 -

It is of three types -

Functional Scope

Variables declared inside a function are called local variables and have 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 -

Functional Scope

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.

Block Scope

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 undefinedgreeter = “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 that 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 -

Problem of var

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 -

let is Block Scoped

Hoisting in let

Variables declared by let needs 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 -

let can’t be re-declared

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 -

But we can -

How about an example to understand this better -

Conclusion

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

Difference between the three