Monday, March 2, 2020

let keyword in JavaScript

The "let" keyword in JavaScript


let


JavaScript supported only two scopes Global and Function scope prior to the introduction of let and const. Any variable declared outside the function has the GLOBAL scope and any variable declared within the function or as the parameter of the function has the FUNCTION scope.  ECMA 2015 specifies let and const keywords in JavaScript. We can provide the block scope to the variables in JavaScript with the let keyword.

For example,

<script>
  var v1='something global';
  //v2,v3 and v4 not Accessible here
  function fun(v2,v3)
  {
    var v4='something local to this function';
    //CODE HERE
    //V1 is accessible here
    //v2,v3 and v4 have FUNCTION Scope
  }
</script>

The "block" 


In JavaScript, the code can be written within a block. A block is nothing but the lines of code enclosed between {..}

<script>
  {
        var v5='in the block';//local scope

  }
</script>

variables declared within the block can not be accessed outside the block, but as we know we can redeclare the variable in JavaScript, There can be problems like,


<script>
  var v5='outside the block';//global scope
    {
        var v5='in the block';//local scope

    }
</script>

The "let" keyword


The "let" keyword helps us to enable the resolution between the two variables, However, Internet Explorer does not support the let.


<script>
  var v5='outside the block';//global scope
    {
       let var v5='in the block';//local scope

    }
</script>

You can see the difference in the example below,


Without "let",


<script>
  var count=10;
for(var count=1;count<6;count++)
        {
        document.write('<br>inside for loop Count ='+count);
        }
       
document.write('<br>outside for loop Count='+count);
</script>
Output:
inside for loop Count =1
inside for loop Count =2
inside for loop Count =3
inside for loop Count =4
inside for loop Count =5
outside for loop Count=6

With "let"

<script>
  var count=10;
for(let count=1;count<6;count++)
        {
        document.write('<br>inside for loop Count ='+count);
        }
       
document.write('<br>outside for loop Count='+count);
</script>
Output:
inside for loop Count =1
inside for loop Count =2
inside for loop Count =3
inside for loop Count =4
inside for loop Count =5
outside for loop Count=10

Global Scope

For the global scope "let" works exactly the same as var declaration, It means that, in the example below v1 and v2 has the same GLOBAL scope.

<script>
  
        var v1=15;
        let v2=15;//same GLOBAL scope

  
</script>

but form the HTML window object the scope is not the same, as window.v1 will work but window.v2 will not work. The variables declared as let do not belong to the JavaScript window object.

Redeclaring variables


In JavaScript redeclaration of variables is possible, so we can write,

<script>

        var v=15;
        let v='The Red Car';//redeclaration

  
</script>

but the redeclaration is limited with let declarations, it not possible to redeclare the variables with let in the same scope.

<script>
  
        var v1=15;
        let v1='The Red Car';//Not Allowed
        {
             var v2=70;
             let v2='The Red Car';//Not Allowed
         }

        let v3=15;
        let v3='The Red Car';//Not Allowed
        {
             let v4=70;
             let v4='The Red Car';//Not Allowed
         }

  
</script>

but on different scopes it is possible.

<script>
  
        var v1=15;
        {
             let v1='The Red Car';//Allowed
         }

        let v2=15;
        {
             let v2='The Red Car';//Allowed
         }

  
</script>

Hoisting

The variables declared using var can be hoisted(read JavaScript Hoisting), it means it can be used before it is declared, but it is not possible to hoist a variable that is declared using 'let'. We can not use a variable declared using let before declaring it. Hoisting of let variables is not possible. The outcome will be a reference error.