javascript - Regarding the variables declared by let, how does it work in this code?

Question

A piece of code used to enhance the display is as follows:

for(var i=0;i<aLi.length;i++){
    var oldColor=null;
    aLi[i].onmouseover=function(){
        oldColor=this.style.backgroundColor;
        this.style.backgroundColor="#ccc";
    }
    aLi[i].onmouseout=function(){
        this.style.backgroundColor=oldColor;
    }
}

Here this.style cannot be replaced by aLi[i].style, because i has already completed the cycle;
But if the value of i is declared with let, it is completely different, and it can also be called accurately in the event function Value of i:

for(let i=0;i<aLi.length;i++){
    var oldColor=null;
    aLi[i].onmouseover=function(){
        oldColor=this.style.backgroundColor;
        consol.log(i);
        aLi[i].style.backgroundColor="#ccc";
    }
    aLi[i].onmouseout=function(){
        this.style.backgroundColor=oldColor;
    }
}

When the event function is triggered, shouldn't it be an error that i cannot be found? Why can it run successfully

Answer 1

ES6 adds a new let command for declaring variables. Its usage is similar to var, but the declared variable is only valid within the code block where the let command is located.

    {
      let a = 10;
      var b = 1;
    }
    a // ReferenceError: a is not defined.
    b // 1

The above code is in the code block and declares two variables using let and var respectively. Then these two variables are called outside the code block. As a result, the variable declared by let reports an error, and the variable declared by var returns the correct value. This shows that the variable declared by let is only valid in the code block in which it is located.

For loop counter, it is very suitable to use the let command.

for (let i = 0; i < 10; i++) {
  // ...
}

console.log(i);
// ReferenceError: i is not defined

In the above code, counter i is only valid within the body of the for loop, and an error will be reported if it is referenced outside the loop.

If the following code uses var, the final output is 10.

var a = [];
for (var i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 10

In the above code, the variable i is declared by the var command and is valid in the global scope, so there is only one variable i globally. Every time the loop loops, the value of variable i will change, and the console.log(i) inside the function assigned to array a in the loop points to the global i. In other words, all the i's in the members of array a point to the same i, causing the output of the last round of i at runtime, which is 10.

If you use let, the declared variable is only valid within the block-level scope, and the final output is 6.

var a = [];
for (let i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 6

In the above code, the variable i is declared by let. The current i is only valid in this cycle, so i in each cycle is actually a new variable, so the final output is 6. You may ask, if the variable i is redeclared in each cycle of the loop, how does it know the value of the previous cycle and thus calculate the value of this cycle? This is because the JavaScript engine will internally remember the value of the previous cycle, and when initializing the variable i of this cycle, calculations will be performed on the basis of the previous cycle.

In addition, another special feature of the for loop is that the part that sets the loop variable is a parent scope, and the inside of the loop body is a separate child scope.

for (let i = 0; i < 3; i++) {
  let i = 'abc';
  console.log(i);
}
// abc
// abc
// abc

The above code runs correctly and outputs abc 3 times. This indicates that the variable i inside the function and the loop variable i are not in the same scope, but have separate scopes.