What is var,let and const?

In simple words we can say that, var let and const are used to declare a variable in javascript. Earlier before ECMA SCRIPT 6, we only had var in javascript to declare a variable but after the release of ES6, many new feature were introduced and one of the feature was addition of let and const which is used to declare a variable. If you are still struggling to understand the difference between var let and const, this article is for you. let's get started.

var

var is the oldest method to declare a variable in javascript, but eventually there were lots of issues regarding the use of var, Developers were having difficulty in coding a a application so, it was necessary to come up with some solution, so with the release of ES6 let and const were introduced, we will discuss the issues regarding var in detail later in the article, first let's understand more about var.

scope of var

The scope in javascript tells us about the availability of variables for use. The var is globally scoped and is also functional/local scope. In simple words we can say that when a variable is declared with var outside the function then we can say that the variable is globally scoped and if the variable is declared inside a function then it is called function/local scope. let's understand it with below code snippet:

var greet = 'hii' //globally declared
console.log(greet) // output-->'hii'

    function greeting()
{     
var sayHello = 'hello'   // declared in function
}
console.log('sayHello') //ouput-->error: sayHello is not defined

The major difference between global scope and functional scope is that when we declare a variable in outside the function(globally) it can be accessed anywhere in the code, while the variable declared inside a function can only be accessed inside a function.

var variables can be re-declared and updated

This means that we can re-declare as well as update the variable and we won't get an error.

re-declaring

var greet = 'hello'
var greet = 'hey'
console.log(greet) // output : 'hey'

updating

var greet = 'hello'
greet = 'hey'
console.log(greet) // output : 'hey'

Hoisting of var

Hoisting is a JavaScript mechanism where variables and function declarations are moved to the top of their scope before code execution. let's understand by below code snippet,

console.log(greet)//  output : undefined
var greet = 'hii

The above code gives undefined because when the javascript engine runs the code line by line it stores thee value of greet as special keyword undefined.

Problem with var

Here comes the weakness of var . I'll explain with below code snippet

    var greeter = "hey hi";
    var times = 4;

    if (times > 3) {
        var greeter = "say Hello instead"; 
    }

    console.log(greeter) // "say Hello instead"

So, since times > 3 returns true, greeter is redefined to "say Hello instead". While this is not a problem if you knowingly want greeter to be redefined, it becomes a problem when you do not realize that a variable greeter has already been defined before.

If you have used greeter in other parts of your code, you might be surprised at the output you might get. This will likely cause a lot of bugs in your code. This is why let and const are necessary.

let

let is Block scoped.

let is now used as an alternative of var. It also solves the problem of var that we discussed above.

let is block scoped

a block is always inside a curly braces {}. Anything inside curly braces is a block

Now if a variable is declared using let inside a block is available for use within that block only. let me explain you with a below code snippet

{
    let greet = 'hello'
    console.log(greet) // output: 'hello'
}
console.log(greet) //  output :greet is not defined

From the above code we can see that greet is not accessible outside the block, so we can say that let is block scoped

let can be updated but cannot be re-declared

updating

{
      let greet = 'hey'
          greet = 'hello'
      console.log(greet) // output : 'hello' 
}

re-declaring

{
       let greet = 'hey'
        let greet = 'hello'
      console.log(greet) // output : a is already been declared
}

Since a variable cannot be declared more than once within a scope, then the problem discussed earlier that occurs with var does not happen.

Hoisting of let

just like var, let is also hoisted at top, but when let is hoisted it goes into Temporal Dead Zone.the let keyword is not initialized. So if you try to use a let variable before declaration, you'll get a Reference Error.

What is Temporal Dead Zone?

The time period after the variable is declared but is not initialized is called temporal dead zone

const

Variables declared with const maintain constant values. const and let are almost similar. const is also block scoped.

const is neither updated nor re-declared

let me explain you with the below code snippet

updating

{
      const greet = 'hello'
            greet = 'hey'
      console.log(greet) // output : Uncaught TypeError: Assignment to constant variable.
}

re-declaring

{
       const greet = 'hello'
       const greet = 'hey'
console.log(greet) // output : Uncaught SyntaxError: Identifier 'a' has already been declared
}

Therefore every variable declared with const must be initialized at the time of declaration.

Hoisting of const

Just like let, const is also hoisted but it also goes into Temporal Dead Zone.

Conclusion

• var, let and const are used to declare a variable in javascript.

• var is global scope or functional/local scope, where else let and const are block scope.

• They are all hoisted at top of their scope, but var is initialized as undefined where else let and const goes into temporal dead zone

• var and let can be declared without being initialized but const must be initialized at the time of declaration.

I hope I explained it very well, but if still you got any doubt or you think that I missed something. Please let me know.