Various scenarios using javascript under the for loop

foreword

The demos in this article refer to "You don't know javscript volume 5.4 loops and closures"

scene one

    for(var i=0;i<=5;i++) {
        console.log(i); // 0,1,2,3,4,5
    }
    console.log(i); // 6

Reason: If the variable defined by var has no function in the outer layer, it is a global variable by default. The console.log inside the for loop follows the IIFE (immediately executed expression) rule, and will immediately print the value corresponding to each loop, while the console.log outside the for loop. The log prints the global variable i, which is the value 6 of i jumping out of the loop.

scene two

  for(var i=0;i<=5;i++) {
        setTimeout(() => {
            console.log(i); // 6,6,6,6,6,6
        }, 1000)
    }

Reason: setTimeout is an asynchronous task. In the event loop mechanism, it is a macro task, and the for loop is also a (synchronous) macro task, (execution sequence: for loop > setTimeout), so setTimeout needs to wait until all for loops are executed The for loop needs i to jump out of the loop to terminate, so i=6; and then execute the setTimout internal method, i is 6 every time.

scene three

 for (var i=0;i<=5;i++) {
        (function () {
            setTimeout(() => {
                console.log(i); // 6,6,6,6,6,6
            }, 1000)
        }())
    }

Reason: Although there is a layer of immediate execution function inside the for loop, although the function itself has a scope on the surface, it does not store the i variable. The setTimeout method can only be executed after the for loop is terminated. At this time, i=6; Since the immediate execution function does not store the i variable itself, it will go to the outer layer to find the i variable; so the result printed by setTimeout is still 6.

scene four

 for (var i=0;i<=5;i++) {
        (function(j){
            setTimeout(() => {
                console.log(j); // 0,1,2,3,4,5
            }, 1000)
        })(i)
    }

Reason: A layer of immediate execution function is set inside the for loop, and each loop i variable is passed as a parameter to the inside of the function. Using the characteristics of the function scope, each i variable is stored, so each for loop, The value of the j variable in the function scope is different. After the for loop ends, setTimeout starts to be executed, and it will go to the upper function scope to find the j variable. So the printed result is 0,1,2,3,4,5.

scene five

 for (var i=0;i<=5;i++) {
        (function(){
            var j = i;
            setTimeout(() => {
                console.log(j);// 0,1,2,3,4,5
            }, 1000)
        })()
    }   

Reason: A layer of immediate execution function is set inside the for loop, and each loop i variable is passed as a parameter into the function and assigned to the j variable, so every for loop, the value of the j variable in the function scope is different, wait until After the for loop ends, setTimeout starts to execute, and it will go to the j variable from the upper function scope. So the printed result is 0,1,2,3,4,5.

scene six

for(let i=0;i<=5;i++) {
        setTimeout(() => {
            console.log(i);
        }, 1000)
    }

Reason: let will create a block-level scope, also known as a private scope, each for loop will store the i variable, after the execution of the for loop ends, setTimeout will get the value of i from the block-level scope of let every time Get the i variable value, so the printed result is 0,1,2,3,4,5.

scene seven

  for(var i=0;i<=5;i++) {
        let j = i;
        setTimeout(() => {
            console.log(j);
        }, 1000)
    }

Reason: The let statement can be used to hijack block-level scope, refer to 5.4 Loops and Closures - Return to Block Scope