28th JS in Let and Var

• Let and Var

Declare a variable in JS with a let declaration in addition to a var. For Var in the previous scope has been said, this time the main difference between the two:

There is such a demo on the MDN:

var list = document.getElementById ("list");  for (var i = 1; I <= 5; i++) {  var item = document.createelement ("LI");  Item.appendchild (document.createTextNode ("Item" + i));   = i;   function (EV) {    console.log ("Item" + j + "is clicked.") );  };  List.appendchild (item);}

The intent of the above code is to create 5 Li, and click on different Li to print out the current Li sequence number. If you use Var instead of let, you will always print out Item 5 is Clicked, because J is a function-level variable, 5 intrinsic functions point to the same J, and the last assignment of J is 5.

For the above results, if you do not use let, there is a way to break. The method is to wrap the scope of J with a closed packet. Modify the following:

 <script>var  list = document.getElementById ("list" ); for  (var  i = 1; I <= 5; I++) { var  item = document.createelement ("LI" );  Item.appendchild (document.createTextNode ( "Item" + i));   var  J = I; Item.onclick  = (function   (j) { Span style= "color: #0000ff;" >return  function   () {Console.log (  "Item" + j + "is clicked."  );  }) (j); List.appendchild (item);}  </script> 

The above is the use of the closure of the method at the time of binding has been the value of J has been passed to the corresponding click event, so the same result can be achieved. It's so subtle! But for the ease of the program is a very small test.

Let's start by saying why we can achieve this result:

let allows you to limit the scope of a variable to a block-level domain. The difference is thatvar declares that the variable is either global or function-level, but not block-level. var Look at some of the official demos.

On the top level of a program or function, let's behave like Var:

functionvartest () {varx = 31; if(true) {    varx = 71;//same variable!Console.log (x);// in} console.log (x); // in}functionLettest () {Let x= 31; if(true) {Let x= 71;//different variableConsole.log (x);// in} console.log (x); // to}

The result above shows that let is only used within {}. When it comes to the opening question, it's easy to explain.

With Let, J becomes a block-level field (that is, a block of curly braces that generates a block-level field each time the curly brace is entered), so 5 intrinsic functions point to different J. If all two definitions are on the outermost layer, the effect is the same as follows:

var x = ' global '= ' global '; Console.log (this. x); Console.log (  this. y);

• Let the staging dead zone and error

Defining a variable with let in the same function or in the same scope will cause TypeError.

if (x) {let  foo;   // TypeError thrown.}

However, referencing this variable before the variable declaration results in a referenceerror result because the Let variable is in the "Staging Dead Zone" (from the beginning of the block to the declaration).

function do_something () {  //  referenceerrorlet  foo = 2;}

You may encounter such an error in the switch statement because a switch has only one action block.

Switch (x) {  case 0: let    foo;       Break ;        Case 1:    //  TypeError for redeclaration.     Break ;}

The loop body is a variable that can be referenced with let in the for Declaration, even though it does not appear between curly braces.

var i=0;  for (Let i=i; i <; i++ ) {  console.log (i);}

let块Provides a way to get the value of a variable within the scope of a block without affecting the value of the variable with the same name outside the block.

var x = 5; var y = 0= x+10, y = +) {  console.log (x//  ///  5

Summing up, for let in some places do have its advantages, but also make up for the block scope of JS in the blank.

28th JS in Let and Var