3 minutes reading time (689 words)

Difference between let and var keyword in JavaScript

Difference-between-Let-and-Var-in-JS

When any developer is working in JavaScript, He/She often uses let, var keywords. Most of us use it randomly as there has been a lot of confusion regarding the use of let and var in JavaScript. So, I am trying to clear most of the confusion by presenting one example.

So let’s check the difference between `let` and `var `with one example:

 let keyword

 var keyword

 Definition: `let` allows you to declare variables that are   limited in scope to the block, statement, or expression on   which it is used.

 Definition: `var` is rather a keyword which   defines a variable functional scope regardless of   block scope

 xyz =

 {

 foo : function ()

 {

      let x=15;

                  if (x==15) {

                let x = 120;

   console.log(‘X=>’,x);

        }

       console.log(‘X=>’,x);

 }

 }

 xyz.foo();

 xyz =

 {

 foo : function ()

 {

     var x=15;

                 If (x==15) {

         var x = 120;

         console.log(‘X=>’x);

     }

     console.log(‘X=>’,x);

 }

 }

 xyz.foo();

 Output : -

 X=>120

 X=>15

 Output : -

 X=>120

 X=>120

 

So `let` definition says it all,  The scope of `let` variables are limited in scope to the block, statement, or expression on which it is used.

Hence here in `let` example the first `x` variable is declared under scope of foo function but the next `x` variable is written in if statement block which means the second variable is totally different from first `x` variable and that’s why value of second `x` is available only within the if statement block scope. And hence console shows 120 value of x within the if statement block.

When compiler comes out from the if statement block, the next console statement shows the value of x as 15 because here x is available which is declared above if and hence its persisted with the previous value which has been assigned.

In `var` keyword case, the var scope is global which has impacted output in the example :

x is 15 before if statement but in if block the same variable is redeclared once again to value 120 and hence console from if block prints 120, Later when compiler comes out of block statement it carries same value which is assigned in if block statement.    

var is having global scope and hence it doesn’t care the scope of the variable inside the if statement block which means the x variable is same as the variable which is declared before if statement and after if statement.

What to Use When?

`let` variables should be used when the variable has to have limited scope and will be used within the limited scope, Should be used in for loops, while loops or inside blocks of if conditions.
            For example ,

            for(let i=1;i<=10;i++)

            {

              console.log(i) // Here it will print 1,2,3...10

            }

             console.log(i);

        //This line has to throw error as i is undefined as the scope of i is within the for loop block.

         Let’s say in above example we use var keyword,

        I.e

            for(var i=1;1<=10;i++)

            {

              console.log(i) //Here it will print 1.. 10 same as let variable

            }

            console.log(i) // This line will print 10

Because the var scope is global and hence the value is printed which is changed in for the loop.

Note: It is logged as 10 because the for loop terminates after checking the incremented value of i.

Some gotchas:

  1. Even if the let and var variable is defined globally, the let variable will not be added to the global window object. For example, let letX=” this is let variable”; var varX=” this is var variable”, and then if you try to console the values as follow, it will give different output
    1. console.log(window.varX); //this is a var variable
    2. console.log(window.letX); //undefined
  2. We can re-declare var variables in the same scope but we can’t re-declare let variables in the same scope.

For example:

         Assume we are using strict mode

   'use strict';

   var varTemp = "this is a temp variable";

   var varTemp = "this is a second temp variable"; //replaced easily

We cannot do the same thing with let

   'use strict';

    let letTemp = "this is a temp variable";

    let letTemp = "this is a second temp variable" //SyntaxError: letTemp is already declared

0
JTicketing 2.2.0 is here with event waiting list
Shika 1.2.9 is here with improved Shika JTicketing...

Related Posts