JavaScript 'let' vrs 'var' vrs 'const'

In JavaScript, variables can be declared using these three different methods:

• var
• let
• const.

In this write-up, I will explicitly show you the difference between these three ways of creating variables.✨

All three of these three keywords have similarities in their syntax. However, they differ in the following criteria:
1. Scope
2. Redeclaration
3. Hoisting.

Scope Differences

"var" - is function scoped, thus it is only accessible within the function it is defined.

"let" and "const" are block scoped, thus accessible within the block in which it's defined.

Defining Function Scope Variable:

function myFunc()
{
   var x = "X";
   let y = "Y";
   const z = "Z";
   console.log(x, y, z);  //OUTPUT: "X Y Z"
   {
      var a = "A"
      let b = "B"
      const c = "C"
   }
   console.log(a);  //OUTPUT: A
   console.log(b);  //OUTPUT: Uncaught ReferenceError: b is not defined
   console.log(c);  //OUTPUT: Uncaught ReferenceError: c is not defined

}

myFunc();

NB: variable a is still defined beacause it was declared with var and it is still within the function myFunc().

Defining Global Variables

"var" can be used to define global variables.

"let" and "const" cannot define global variables.

   var x = "X";
   let y = "Y";
   const z = "Z";

   console.log(window.x);  //OUTPUT: A
   console.log(window.y);  //OUTPUT: Undefined
   console.log(window.z);  //OUTPUT: undefined

Redeclaration:

Variables declared with "var" can be declared again in the scope within which it's defined.

But it is not possible with the case of "let" and "const".

   var x = "A";
   var x = "B"
   console.log(x);  //OUTPUT: B, last declaration is printed.

   let y = "A";
   let y = "B"; // Uncaught SynthaxError

   const z = "A";
   const z = "B"; // Uncaught SynthaxError

At this point, 'const' and 'let' are almost the same.
And yes! they are. Except for one difference.
Thus,
The value of variables defined by "let" can be changed after assigning some values.
It is impossible to do so with "const". It's value is assigned one and is not mutable.

   var x = "A";
   x = "B"
   console.log(x);  //OUTPUT: B, last declaration is printed.

   const y = "A";
   const y = "B"; // Uncaught TypeError: invalid assignment to const y.

Hoisting Difference

When variable is declared with "var" (but not initialized) at the end of the function, It is moved to the top of it's scope by the JavaScript runtime and, therefore, there will be no error by the runtime if that variable is used before being declared.

Variables declared with "let" and "const" are only accessible after their declaration.

function myFunc()
{

   console.log(a);  //OUTPUT: undefined
   console.log(b);  //OUTPUT: Uncaught ReferenceError: b is not defined
   console.log(c);  //OUTPUT: Uncaught ReferenceError: c is not defined

   var a = "A"
   let b = "B"
   const c = "C"

   console.log(a);  //OUTPUT: A
   console.log(b);  //OUTPUT: B 
   console.log(c);  //OUTPUT: C 

}

myFunc();

Conclusion:

• Use 'var' for function scope or Global scope variables
• Use 'let' & 'const' for block scope variables

NB: use 'const' only to defined variables whose value is not change at any part of the application.

I am Bentil!
You can support me to keep writing more stuffs like this.