1. Trouble caused by var

1. Understanding scopes in JavaScript (pre-ES6)

1. Global scope

The variable name is bound to the Windows object

2. Function scope

The variable name, defined in the function here, has an RHS query when the print statement is executed, providing a variable shading effect

3. Variable improvement

Here we can see that printing without a statement is the same as printing after a statement. The reason for this is that during compilation, we collect all declarations (including variables and functions), process the declaration part of the code before any (non-declarative) code is executed, and bind it to the appropriate scope.

The actual order of execution looks like this:

Only declarations are promoted, the rest of the code remains the same)

3. In Use strict mode, undeclared variables cannot be used

1. Undeclared variables are used in non-strict mode

When assigning an undefined variable in non-strict mode, the variable is first looked up against the scope chain (LHS), and if the variable is not found, the global scope creates a variable with the same name

2. An error will be reported if an undeclared variable is used in strict mode

Because active or implicit creation of global variables is prohibited in strict mode, an error will be reported if the variable is not found in the scope chain

2. Classic case (loops and closures)

Here we define a for loop that outputs 1 to 5, each output interval of 1 second (expected value), and the actual result is as follows:

The reason for this is that the callback of the setTimeout function is executed after the loop, and the loop ends when I <5. When I =5, the loop ends and the callback is executed, so the final result is to repeat the value of I five times (when I =5). If we dig deeper into lexical scopes, we can see that although we can get an I value each time we loop, they are enclosed in a shared global scope, so there is really only one I value

Var solution

In es6, there were only global scopes and function scopes, and function scopes have the effect of masking variables.

Here we define an immediate execution function that wraps around the delay function, attempting to close the variable I through function scope

There is no change in the result because the scope of the function is empty. When executing the callback function, it will look up the lexical scope chain to find the global scope I (where I =5).

That will do. The idea is that the immediate-execution function (IIFE) creates the scope by declaring and executing a function immediately, and each delay function closes the scope created by the immediate-execution function in each iteration

2. New variable declaration in ES6

1. Compare let,const, and var

1. Block-level scope is added for different scopes

2. Temporary dead zone, variables must be declared before use

3. Do not declare the same variable twice in the same scope

Let’s look at the result of repeated declarations of variables a and b:

2. Let vs. const

1. Const declarations cannot be changed2. Const must be declared when assigned3. References (Pointers) to const objects cannot be changed, but property values can be changed

3. Classic cases and ES6 solutions

Since there is a block-level scope in each for loop, we use let or const instead of var declarations directly, without the drawback of variable promotion