Thursday, March 1, 2018

Javascript var vs let vs const

   In JavaScript we can define variable with var now with ES6 we can also define variable with let & const.but there is subtle difference in scope of variable defined with var & let.
There is further difference due to hoisting behaviour for var in javascript.

var:
  var is used in javascript to declare a variable along with optional initialization of variable.
  e.g. var x=10; or var t;

The scope of a JavaScript variable declared with var is its current execution context while the scope of a JavaScript variable declared outside the function is global.

    function varScopeDemo(){
      var x ='initial';

      console.log(x);
      if(1==1){
       var x='first';
       console.log(x);
      }
      console.log(x);
    }

to run this code snippet go to chromiuim browser & run it on console.

output:

    initial
    first
    first

Here var x='first'; redefine variable 'x' with 'first' as initial value ,outside if block when we printed x it has value assigned in if block.so scope of variable defined in function is not limited to block in which it is define.

Now lets replace var in our function with 'let'

    function letScopeDemo(){
      let x ='initial';

      console.log(x);
      if(1==1){
       let x='first';
       console.log(x);
      }
      console.log(x);
    }

output:
    initial
    first
    initial

'let' create a variable with the scope limited to the block on which it is used thats why console.log outside if block has value assigned before iof block & not from if block initialization.

Now lets move to 'const'.

    function constScopeDemo(){
      const x ='initial';

      console.log(x);
      if(1==1){
       const x='first';
       console.log(x);
      }
      console.log(x);
    }

output:
    initial
    first
    initial

in terms of scope 'const' are same as 'let'

Now let us try another code snippet

    function constScopeDemo(){
      const x ='initial';

      console.log(x);
      if(1==1){
        x='first';
       console.log(x);
      }
      console.log(x);
    }

Output:
    Uncaught TypeError: Assignment to constant variable.

Here when we try to execute 'constScopeDemo' function we get an error because 'const' statement can assign value once and they cannot be reassigned.


we need to assign value to variable defined with const else it result in an error
below line when execute result in error
    const name;
output:
    Missing initializer in const declaration

Hoisting in javascript:

Hoisting is JavaScript's default behavior of moving all declarations to the top of the current scope.JavaScript only hoists declarations, not initializations.

Consider following code snippet

    var x = 8;
    console.log(x + " " + y + " " + t);
    var y = 64;

output:
    Uncaught ReferenceError: t is not defined

Now lets modify this snippet little bit

    var x = 8;
    console.log(x + " " + y );
    var y = 64;

output:
     8 undefined

Here y is defined after its use in console.log but due to Hoisting its declartion is taken up in snippet so when we go to console.log statement variable is defined but it has value undefined because
initializations is not hoisted.

Lets check hoisting behaviour with 'let',in following code snippet again 'y' is declared after use.

    let x = 8;
    console.log(x + " " + y );
    let y = 64;


output:
    Uncaught ReferenceError: y is not defined

Here we not getting 'y' with undefined value but variable 'y' is not yet defined.

Mixing var & let

    consider code snippet below

        let count = 40;
        var count = 30;
    output:
        Identifier 'count' has already been declared

    this happen irrespective of let comes first or var comes first.

closure :

consider code snippet below

    for (var i = 0; i < 5; ++i) {
      console.log('log:' + i);
      setTimeout(function () {
        console.log(i);
      }, 100);
    }
output:
    5 5 5 5 5

on contratory

for (let i = 0; i < 5; ++i) {
  console.log('log:' + i);
  setTimeout(function () {
    console.log(i);
  }, 100);
}

output:0 1 2 3 4

There is difference in behaviour between let & var because ,the let in the loop can re-binds it to each iteration of the loop, making sure to re-assign it the value from the end of the previous loop iteration.
  


No comments:

Post a Comment