Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
August 11, 2022 12:39 am GMT

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.

buy me a coffee


Original Link: https://dev.to/qbentil/javascript-let-vrs-var-vrs-const-pn5

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To