let, const and var : Crystal Clear

merudra754

Rudra Pratap

Posted on May 3, 2023

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"; 
Enter fullscreen mode Exit fullscreen mode
console.log(name);  // referenceError: cannot access name without intitialization
let name = "rudra";
Enter fullscreen mode Exit fullscreen mode

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

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

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

Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode
let name = "rudra";
let name = "pratap";
console.log(name); // SyntaxError: Identifier 'name' has already been declared
Enter fullscreen mode Exit fullscreen mode
const name = "rudra";
const name = "pratap";
console.log(name); // SyntaxError: Identifier 'name' has already been declared
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode
let name = "rudra";
name = "pratap";
console.log(name); // pratap

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

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.
💖 💪 🙅 🚩
merudra754
Rudra Pratap

Posted on May 3, 2023

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related