Let command and const command

Let command

usage

ES6 has added the let command to declare variables. Its usage is similar to var, but the declared variables are only valid within the code block where the let command is located.
The counter for the for loop is very suitable for using the let command.

No variable promotion exists

The var command will experience a phenomenon of variable boosting, where variables can be used before declaration and have an undefined value. This phenomenon is somewhat strange, according to general logic, variables should be used only after declaration statements.

To correct this phenomenon, the let command changed its syntax behavior and declared variables must be used after declaration, otherwise an error will be reported.

Temporary dead zone

As long as the let command exists within the block level scope, its declared variables are “bound” to this region and are no longer affected by external factors.

block scope

Why do we need a block level scope

There is no block level scope, which brings many unreasonable scenarios
In the first scenario, the inner variables may overwrite the outer variables.
In the second scenario, the loop variable used for counting leaks into a global variable.

Block level scope of ES6

Let actually adds a block level scope to JavaScript.

ES6 allows for arbitrary nesting of block level scopes.

The inner scope can define variables with the same name as the outer scope.

The emergence of block level scope actually eliminates the need for widely used anonymous immediate execution function expressions (anonymous IIFE).

Block level scope and function declaration

ES5 stipulates that functions can only be declared within the top-level scope and function scope, and cannot be declared at the block level scope.

ES6 introduces block level scope, explicitly allowing functions to be declared within block level scope. ES6 stipulates that within the block level scope, the behavior of function declaration statements is similar to let and cannot be referenced outside the block level scope.

Originally, changing the processing rules of functions declared within the block level scope would obviously have a significant impact on old code. In order to alleviate the incompatibility issues caused by this, ES6 specifies in Appendix B that the implementation of the browser may not comply with the above regulations and have its own behavior.

Allow functions to be declared within block level scope.

Function declarations are similar to vars, which elevate to the global scope or the head of the function scope.

At the same time, the function declaration will also be elevated to the head of the block level scope it belongs to.

Considering the significant behavioral differences caused by the environment, it is advisable to avoid declaring functions within the block level scope. If necessary, it should also be written as a function expression rather than a function declaration statement.

Additionally, there is one thing to note. The block level scope of ES6 must have curly braces. Without curly braces, the JavaScript engine considers that there is no block level scope.