2.Scopes of the var and let.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script>
        var numArray = [];
        for (var i = 0; i < 3; i++) {
            numArray.push(i);
        }
        console.log(numArray);
        // returns [0, 1, 2]
        console.log(i);
        // returns 3


        /* 
        This behavior will cause problems if you were to create a function and store it for later use inside a for loop that uses the i variable. This is because the stored function will always refer to the value of the updated global i variable.
         */
        var printNumTwo;
        for (var i = 0; i < 3; i++) {
            if (i === 2) {
                printNumTwo = function () {
                    return i;
                };
            }
        }
        // 这里的i是全局变量
        console.log(printNumTwo());
        // returns 3


        // 使用let的情况
        'use strict';
        let printNumTwo;
        for (let i = 0; i < 3; i++) {
            if (i === 2) {
                printNumTwo = function () {
                    return i;
                };
            }
        }
        console.log(printNumTwo());
        // returns 2
        console.log(i);
        // returns "i is not defined"
        // i is not defined because it was not declared in the global scope

        // illustrate说明
    </script>
</body>

</html>