JavaScript 'let' vrs 'var' vrs 'const'
Tags: javascript, webdev, programming
Published: 2022-08-11 00:39:00

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:
```javascript
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.
```javascript
   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".
```javascript
   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.`
```javascript
   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.
```javascript
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.
<a href='https://www.buymeacoffee.com/qbentil' target="_blank">
![buy me a coffee](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jf2285oqld8zpevvsqvt.png)