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
- 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.
- Always use const if you are certain that the value in the variable is not going to change.
Top comments (0)