var vs let vs const

 In previous post we seen that how the variables can be declared in JavaScript using three keywords let, var and const.

Purpose of their usage is similar but there are some difference between  three. 

This post will describe about what is the difference between var, let and const according to their performance, scope, reusability etc.

var vs. let vs. const

Difference between var, let and const

Declaration and Initialization

var and let:-

Using ‘var’ and ‘let’ you can declare variables with or without value.

Example

'var' declaration and initialization

When variable declared using var and let, it is not necessary to initialize variable at the time of declaration.

//using var
var a;
a=5;
var x=7;
document.write("without initialization::-",a,"<br>");
document.write("with intialization::-",x,"<br>");

Output:-

'var' declaration and initialization

'let' declaration and initialization

//Using let
let b;
b=6;
let y=8;
document.write("without intialization::-",b,"<br>");
document.write("with intialization::-",y,"<br>");

Output:-

'let' declaration and initialization

'const' declaration and initialization

While declaring variable using const, it is necessary to initialize variable at declaration time otherwise it gives you error.

Following example shows first const variable is declared and then initialize. In output nothing will display but in console following error message displayed syntax error 'missing initializer in const declaration’.

//Using const
const c;
c=9;
document.write(c);

Output:-

'const' declaration and initialization

You can't access variable without initialize it, when declared with ‘var’, because its default value is undefined.

//access without initialization
var name;
document.write(name);//undefined

When you declare variable with 'let' without initialization in output ‘undefined’  is displayed.

//access without initialization
let name;
document.write(name);//undefined

'const' variable can not be used without initialization.

//access without initialization
const name;
document.write(name); //syntax error: Missing initializer in const’ declaration

Redeclaration

var:-
When you redeclare variable using ‘var’ in output newly added value of variable is displayed.

//Redeclaration using 'var'
var name=”niya”;
var name=”jiya”;
document.write(name);

Output:-

Redeclare variable using  'var'

let:-

When you redeclare variable using ‘let’ an error message display in console.

//Redeclaration using 'let'
let no=12;
let no=22;
document.write(no); //syntax error:Identifier ‘no’ has already been declared.

Output:-

Redeclare variable using 'let'

Note:-

In different block let variable can be reassign.

const:-

When you redeclare variable using ‘const’ an error message display in console.

//Redeclaration using 'const'
const no=12;
const no=22;
document.write(no);//syntax error:Identifier ‘no’ has already been declared.

Output:-

Redeclare variable using 'const'

Reassignment

var and let:-

Variables declared using ‘let’ and ‘var’ can be reassign.

//Reassigning using var
var mobile=”iphone”;

document.write("value before reassign:- ",mobile,"<br>");
 mobile=”realme”;
document.write("value after reassign:- ",mobile); 

Output:-

Reassign variable using 'var'

Reassigning 'let' variable

//Reassigning using let
let mobile="nokia";
document.write("value before reassign:- ",mobile,"<br>");
 mobile="samsung";
document.write("value after reassign:- ",mobile,"<br>");

Output:-

Reassign variable using 'let'

const:-

Variable declared using const can not be reassign because value of const variable remain unchanged.

In example reassigning city variable display error message in console.

//Reassigning using let
const city="Mumbai";
city="Ahmedabad";
document.write(city);//type error

Output:-

Reassign variable using'const'

Scope

var, let and const:-

Variables declared using ‘var’ have function scope. ‘let’ and ‘const’ also have function scope.

Example

In fun1() n is declared inside function so n is local variable and scope of variable n is limited to only fun1(). Outside fun1() is not accessible.

The function scope is supported by 'var', 'let' and 'const'.

var:-

//scope
function fun1()
{
var n=6;
document.write(n);
}
fun1();
document.write(n); //6

let:-

//scope
function fun1()
{
let n=6;
document.write(n);
}
fun1();
document.write(n); //6

const:-

//scope
function fun1()
{
const n=6;
document.write(n);
}
fun1();
document.write(n); //6

Output:-

Function scope

The output of about three code is same. All three types of declaration works in function scope.

After ‘let’ and ‘const’ came in use third scope is added that is block scope. Variables declared using ‘var’ not support block scope.

Let’s understand with example.

var:-

In example variable car_name is  declared with name ‘volvo’ and inside block car_name is redeclare with name ‘audi’.

//scope
var car_name="volvo";
document.write("car name before block:-",car_name,"<br>");
{
var car_name="audi";
document.write("car name inside block:-",car_name,"<br>");
}
document.write("car name after block:-",car_name,"<br>");

Output:-

Block scope of 'var'

In output first ‘volvo’ and then after two times ‘audi’ will display because when you declare variable with ‘var’ value is updated. Inside block and outside block scope updated value is used. 

 There is an issue with ‘var’ variable, the variable value inside block is also accessible outside the block.

let and const:-

The ‘let’ and ‘const’ solve the problem of 'var'. When variable declared using ‘let’ and ‘const’ are not accessible inside block. 

let:-

In example variable car_name is  declared with name ‘maruti_suzuki’ and inside block car_name is redeclare with name ‘bmw’.

//scope
let car_name=”maruti suzuki”;
document.write(car_name ,"<br>");
{
let car_name=”bmw”;
document.write(car_name,”<br>”);
}
document.write(car_name ,"<br>");

Output:-

Block scope ('let')

In output first value of ‘car_name’ display as ‘maruti suzuki’ which is declared outside block. After that updated value ‘bmw’ is display, because new value is assigned inside block. But when variable 'car_name’  access third time its old value is displayed, because variable declared using let are not accessible outside the block. 

const:-

In example the ‘const’ variable work similar as ‘let’.

//scope
const car_name="honda";
document.write(car_name,"<br>");
{
const car_name="hundai";
document.write(car_name,"<br>");
}
document.write(car_name,"<br>");

Output:-

Block scope ('const')

When variable declared using ‘let’ and ‘const’ inside the block, the scope of that variable is limited to that scope and can’t used outside the scope. The value of variable is updated. 

Summary

In post we have discussed about how variable declaration using ‘var’, ‘let’ and ‘const’ is different from each other.

Below table shows the short summary of their differences.

	var	let	const
Redeclaration	Yes	No	No
Reassignment	Yes	Yes	No
Initialization and declaration	Optional	Optional	Compulsory
scope	Function	Block	Block