Var, let & const

#javascript #programming

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.