let, const and var : Crystal Clear

New Javascript developers often run into problem while using let, const and var. Due to unfamiliarity with their use cases and differences, they introduce subtle bugs in their codes.

In this article, I will explain the differences between these three keywords and their use cases.

The Genesis

var
var keyword was introduced in Javascript from its inception, in 1995. It was the only keyword which was used to declare variables.

let and const
let and const were introduced in EcmaScript 6 (in year 2015). They have almost replaced var.

Differences

let, const and var can be distinguished on the basis of four factors: hoisting, redeclaration, reassignment and scope.

Lets understand each topic one by one.

Hoisting

It is the phenomenon in which a variable or a function can be accessed before it is declared in the code.

var	let	const
Hoisted and are accessible	Hoisted but they are inaccessible because they reside in Temporal Dead Zone until they are not initialized	Hoisted but they are inaccessible because they reside in Temporal Dead Zone until they are not initialized

console.log(name); // undefined
var name = "rudra"; 

console.log(name);  // referenceError: cannot access name without intitialization
let name = "rudra";

Scope

Scope of a variable means the area in the code where a variable can be accessed.

var	let	const
function scoped	block scoped	block scoped

{
    var name = "rudra";
}
console.log(name); // rudra

{
    let name = "rudra";
}
console.log(name); // referenceError: name is not defined

{
    const name = "rudra";
}
console.log(name); // referenceError: name is not defined

Redeclaration

Redeclaration means if a variable is already declared then if it is possible to declare another variable with the same name.

var	let	const
Yes	No	No

var name = "rudra";
var name = "pratap";
console.log(name); // pratap

let name = "rudra";
let name = "pratap";
console.log(name); // SyntaxError: Identifier 'name' has already been declared

const name = "rudra";
const name = "pratap";
console.log(name); // SyntaxError: Identifier 'name' has already been declared

Reassignment

Reassignment means if a variable is already initialized with some value, then is it possible to assign another value to it later.

var	let	const
Yes	Yes	No

var name = "rudra";
name = "pratap";
console.log(name); // pratap

let name = "rudra";
name = "pratap";
console.log(name); // pratap

const name = "rudra";
name = "pratap";
console.log(name); // typeError: Assignment to constant variable.

Tip

1. Always use let and const, forget that there exist any var keyword in Javascript. Use var only when you need some variable to be hoisted.
2. Always use const if you are certain that the value in the variable is not going to change.