DEV Community

Bentil Shadrack
Bentil Shadrack

Posted on

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();
Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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.
Enter fullscreen mode Exit fullscreen mode

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();
Enter fullscreen mode Exit fullscreen mode

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

Top comments (2)

Collapse
 
smlka profile image
Andrey Smolko

Hey, I have one comment from my side.
You said - "let" and "const" cannot define global variables.
That is not correct as they can. Global scoped let and const do not create a property in global object as you mentioned but it does not influence on variable scoping.

Collapse
 
qbentil profile image
Bentil Shadrack

Awesome!.
Thank you. I will do that