Var, let & const
Tags: javascript, programming
Published: 2021-08-19 10:41:59

#So, what is var, let & const
These are the keywords used to declare variables in javascript.

Declaring variables is one of the most important and repetitive thing you will be doing in programming.
```
var message = "Hello world!";
```
Here, "message" is the variable created using the var keyword.

Similarlly, let and const is also used in the same manner.

#Who is older?
**Var** is definitely the older one. Let and const was later introduced in ES6(2015) version of javascript, keeping some drawback of var in mind.

#What kind of difference do they have?
They have difference in **scope**, **re-declaration** and **hoisting**. In simple words, the accessibilty of variables (scope), the ability to manipulate the variables (re-declaration / update) and the mechanism of moving variable to the top before code execution (hoisting).

#So, lets dive into the difference now!
**Scope** : Scope is basically a location from where a variable can be accessed or used.

**Types of scope** : (a) Global scope (b) Function scope (c) Block scope

**Var** :
Var is globally scoped or function scope. Which means if a variable is declared outside of a function then it is globally scoped i.e it can be accessed globally or it can be accessed from any portion of the code.
```
    var message = "Hello";

    function showMessage(){

      console.log(message); //output "Hello"

      //The message variable can be used here
    }

      console.log(message); //output "Hello"

      //The message variable can be used here
```
And if a variable is declared inside a function then it can only be accessed within that function.
```
    function showMessage(){

      var message = "Hello";

      console.log(message); //output "Hello"

      //The message variable can be used here
    }

      console.log(message); //output "message is not defined"

      //The message variable cannot be used here

```
**Let & const** :
Let & const variable is block scoped. Block means the area of code which is wrapped with curly braces {} is called block.
```
      function blockFunc(){

        //This is a block area

      }

      if(condition){

        //This is a block area

      }
```
So, let & const variables which is declared inside a block can be accessed only within that block
```
      if(condition){

        let message = "Hello";

        const greeting = "Welcome";
        
        //message variable can be used here

        //greeting variable can be used here
      }     
      
        //message variable cannot be used here

        //greeting variable cannot be used here
```
**Re-declaration or update** : Here we are going to see the ability to re-declare or update the value of a variables

**Var** :
Var can be re-declared and updated.Which means we can re-declare a variable with new value or update the value of a variable.
```
      //re-declaration

      var message = "Hello";

      var message = "Welcome";

      console.log(message); // output "Welcome"

      //update
      
      var message = "Hello";

      message = "Welcome";

      console.log(message); // output "Welcome"
```
**Let** :
Let cannot be re-declared but it can be updated.Which means we can update the value of a let variable. If we try to re-declare the variable then it will give us an error.
```
      //re-declaration

      let message = "Hello";

      let message = "Welcome";

      console.log(message); // output "message has already been
      declared"

      //update
      
      let message = "Hello";

      message = "Welcome";

      console.log(message); // output "Welcome"
```
**Const** :
Const can neither be re-declared or updated. Its value remains constant. So, it is necessary to assign a value when declaring a const variable.
```
      //re-declaration

      const message = "Hello";

      const message = "Welcome";

      console.log(message); // output "message has already been
      declared"

      //update
      
      const message = "Hello";

      message = "Welcome";

      console.log(message); // output "Assignment to constant 
      variable"
```
**Hoisting** : It is a process of moving all the variable declarations to the top of a scope before code execution.

**Var** :
Var is hoisted to the top of its scope and initialized as undefined.
```
      console.log(message); // output "undefined"

      var message = "Hello";
```
Technically, a variable should not be able to access before declaration but due to hoisting this is possible
```
      // Under the hood the above code works as

      var message = undefined; // This line is written due to 

      hoisting

      console.log(message); // output "undefined"

      var message = 'Hello';
```
**Let** :
Let is hoisted to the top of its scope like var but it is not initialized.
```
     // So, if you do this it will give you an error.

      console.log(message); // output "Cannot access 'message' 

      before initialization"

      let message = "Hello"; 
```
```
      //Under the hood of the above code.

      let message; // This line is written due to 

      hoisting

      console.log(message); // output "Cannot access 'message' 

      before initialization"

      let message = "Hello"; 
```
**Const** :
Const variables are hoisted to top as well but not initialized, just like let. So, it gives the same error as let if you try to access a variable before declaration and initialization.
```
      // So, if you do this it will give you an error.

      console.log(message); // output "Cannot access 'message' 

      before initialization"

      const message = "Hello"; 
```
So, finally these were the differences between an old var and the new let & const.Hopefully it has given you an insight in what they really are.