Steal a free time at noon to make a summary of the use of es6let

Scope block

• Variables declared in scope blocks are not affected externally, as shown in the example

{
let a= 10;
{
let a= 20;
console.log('Subdomain', a);// 20
}
console.log('Parent scope', a);// 10
}

• The variables declared by let are only valid in the code block where the let command is located, as shown in the example

// Example 1
{
let a= 10;
var b= 20;
}
console.log(a)  // ReferenceError: a is not defined
console.log(b)  // 20 

//Example two
// If you use var declaration, it will be promoted to the outer variable. In this case, i will be promoted to the outer variable, that is, to the previous execution context
var a = [];
for (var i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // After the loop is executed, i is assigned to 10, so the final result is 10

// Use let to declare i. The current i is only valid in this cycle, so the i of each cycle is actually a new variable, so the final output is 6
// Another special feature of for loop is that the part of loop variable setting is a parent scope, while the inner part of loop body is a separate child scope
var a = [];
for (let i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 6

• The block level scope of ES6 allows you to declare the rule of a function, which is only true if you use braces. If you do not use braces, an error will be reported.
• Considering that the behavior differences caused by the environment are too large, you should avoid declaring functions within the block level scope. If necessary, it should also be written as a function expression instead of a function declaration statement

'use strict';
{
if (true) // Report errors
function func() {

}
}

There is no variable promotion

Temporary dead zone (in the words of Mr. Ruan Yifeng)

• Before using let declaration, this variable cannot be used. Otherwise, an error will be reported. See Chestnut:

{
let a= 10;
{
// In this scope, a has not been declared complete
console.log(a); // ReferenceError: a is not defined
let a= 20;   // If it is not declared here, no error will be reported. A refers to a of the parent scope
console.log(a); // 20
}
}

Repeat declaration of the same variable in scope is not allowed, see Example

// Report syntax error
{
let a= 10;
let a= 20; 
}
// Therefore, parameters cannot be redeclared inside a function
function func(arg) {
let arg= 20;
}

Significance

• ES6 specifies that temporary deadband and let and const statements do not have variable promotion, The main purpose is to reduce runtime errors and prevent unexpected behavior by using the variable before it is declared
• Internal variables may override external variables

var a= 10;
function func(){
console.log(a);  // undefined
if(false) {
var a= 20; // In this execution context, variable promotion and scope chain determination will be done during the creation of 'variable pair image'. Therefore, the output of console is the internal a, which does not change the external a, which is equivalent to redefining a variable a, pointing to the address of stack memory different from the external a variable, and also because of different execution context and different variable pair image
}
}
func() 
console.log('Outer layer a',a)  // 10