'var' vs 'let' Keyword in Javascript

Different between var and let in javascript, and use of let keyword in coding.
In Javascript, apart from declaring variable with var keyword, you can also use let keyword too. This page will give you how different between this two commands.

Credit: this page is simpiled version of MDN Docs.

Table of Contents

1 Definition
2 Use of let Keyword
3 Browser Support

Definition 

let command will declare your local varible which can be used in block scope only. For example,

<script>
{
    let x = 1;

    //this is OK.
    console.log('x inner scope:', x);
}

//this will throw an error.
console.log('x outer scope:', x);
</script>

Code above will display the value of x correctly in first console.log because it use variable in same scope. And throw error in the second console.log because it use variable x outside scope.

This command will be much different from var command because var will declare variable in current clousure. For example,

<script>
{
    //this will declare variable in current closure. 
    // (current closure here is 'window' variable)
    var x = 1;
    console.log('x inner scope:', x);
}

console.log('x outer scope:', x);    
console.log('window.x:', window.x);
</script>  

In code above, var x = 1; will be eqivalent to window.x = 1;. Thus, code above will display output like this:

Use of let Command

let command will be very useful when you use within anonymous function inside loop:

function createSampleList()
{
    var list = document.getElementById("list");

    for (var i = 1; i <= 5; i++) 
    {
      //itemIndex will be created each loop independently.
      let itemIndex = i;
      let item = document.createElement("li");
      
      item.appendChild(document.createTextNode("Item " + itemIndex));

      item.onclick = function (ev) {
        console.log("Item " + itemIndex + " is clicked.");
      };
      
      list.appendChild(item);
    }
}

The result will be like this

Code above is work as expected because let will create local variable each loop. Unlike var that uses same variable in whole loop. So, if you change from let to var, it will display itemIndex = 5 in all loop:

function createSampleList()
{
    var list = document.getElementById("list");

    for (var i = 1; i <= 5; i++) 
    {
      //itemIndex will be created only once in current scope
      // (current scope here is 'createSampleList' function)
      var itemIndex = i;
      let item = document.createElement("li");
      
      item.appendChild(document.createTextNode("Item " + itemIndex));

      item.onclick = function (ev) {
        console.log("Item " + itemIndex + " is clicked.");
      };
      
      list.appendChild(item);
    }
}

The result will be like this

Using let make code much cleaner because you don't have to create extra function to preserve closure like when using var command.

Browser Support

As of writing date (30 May 2016), MDN says that almost all desktop modern browser support let keyword. For mobile, it is supported only on chrome for android and no support for ios platform right now.

Happy Coding!