JavaScript ‘let’ vrs ‘var’ vrs ‘const’

In JavaScript, variables could be declared utilizing these three completely different strategies:

On this write-up, I’ll explicitly present you the distinction between these 3 ways of making variables.✨

All three of those three key phrases have similarities of their syntax. Nonetheless, they differ within the following standards:
1. Scope
2. Redeclaration
3. Hoisting.

Scope Variations

“var” – is operate scoped, thus it is just accessible throughout the operate it’s outlined.

“let” and “const” are block scoped, thus accessible throughout the block during which it is outlined.

Defining Operate Scope Variable:

operate 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 just not outlined
   console.log(c);  //OUTPUT: Uncaught ReferenceError: c is just not outlined

}

myFunc();

NB: variable a remains to be outlined beacause it was declared with var and it’s nonetheless throughout the operate myFunc().

Defining World Variables

“var” can be utilized to outline international variables.

“let” and “const” can’t outline international 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” could be declared once more within the scope inside which it is outlined.

However it isn’t doable with the case of “let” and “const”.

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

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

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

At this level, ‘const’ and ‘let’ are virtually the identical.
And sure! they’re. Apart from one distinction.
Thus,
The worth of variables outlined by "let" could be modified after assigning some values.
It's not possible to take action with "const". It is worth is assigned one and isn't mutable.

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

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

Hoisting Distinction

When variable is said with “var” (however not initialized) on the finish of the operate, It’s moved to the highest of it is scope by the JavaScript runtime and, due to this fact, there might be no error by the runtime if that variable is used earlier than being declared.

Variables declared with “let” and “const” are solely accessible after their declaration.

operate myFunc()
{

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

   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 operate scope or World scope variables
• Use ‘let’ & ‘const’ for block scope variables

NB: use ‘const’ solely to outlined variables whose worth is just not change at any a part of the applying.

I’m Bentil!
You’ll be able to assist me to maintain writing extra stuffs like this.