Detailed explanation of the use of let command in js ES6

ES6 adds a new let command to declare variables. Its usage is similar to var, but the declared variable is only valid within the code block where the let command is located

letCommand

Basic usage

ES6 adds a new let command to declare variables. Its usage is similar to var, but the declared variable is only valid within the code block where the let command is located.

{
 let a = 10;
 var b = 1;
}

a // ReferenceError: a is not defined.
b // 1

The above code is in the code block and declares two variables using let and var respectively. Then these two variables are called outside the code block. As a result, the variable declared by let reports an error, and the variable declared by var returns the correct value. This shows that the variable declared by let is only valid in the code block in which it is located.

For loop counter, it is very suitable to use the let command.

for (let i = 0; i < 10; i++) {}

console.log(i);
//ReferenceError: i is not defined

In the above code, counter i is only valid within the body of the for loop, and an error will be reported if it is referenced outside the loop.

If the following code uses var, the final output is 10.

var a = [];
for (var i = 0; i < 10; i++) {
 a[i] = function () {
  console.log(i);
 };
}
a[6](); // 10

In the above code, the variable i is declared by var and is valid in the global scope. So every time it loops, the new i value will overwrite the old value, causing the final output to be the value of i in the last round.

If let is used, the declared variable is only valid within the block-level scope, and the final output is 6.

var a = [];
for (let i = 0; i < 10; i++) {
 a[i] = function () {
  console.log(i);
 };
}
a[6](); // 6

In the above code, the variable i is declared by let. The current i is only valid in this cycle, so i in each cycle is actually a new variable, so the final output is 6.

No variable promotion

let does not have the "variable promotion" phenomenon like var. Therefore, variables must be used after they are declared, otherwise an error will be reported.

console.log(foo); // 输出undefined
console.log(bar); // 报错ReferenceError

var foo = 2;
let bar = 2;

In the above code, the variable foo is declared with the var command, and variable promotion will occur. That is, when the script starts running, the variable foo already exists, but has no value, so undefined will be output. The variable bar is declared with the let command, and no variable promotion will occur. This means that the variable bar does not exist before declaring it, and if it is used, an error will be thrown.

Temporary dead zone

As long as the let command exists in the block-level scope, the variables it declares will be "binding" in this area and will no longer be affected by the let command. external influences.

var tmp = 123;

if (true) {
 tmp = 'abc'; // ReferenceError
 let tmp;
}

In the above code, there is a global variable tmp, but let declares a local variable tmp in the block-level scope, causing the latter to bind this block-level scope, so before let declares the variable, tmp Assignment will report an error.

ES6 clearly stipulates that if there are let and const commands in a block, the variables declared by these commands in this block will form a closed scope from the beginning. Any use of these variables before declaration will result in an error.

In short, within the code block, the variable is not available until it is declared using the let command. Grammatically, this is called the "temporary dead zone" (TDZ).

if (true) {
 // TDZ开始
 tmp = 'abc'; // ReferenceError
 console.log(tmp); // ReferenceError

 let tmp; // TDZ结束
 console.log(tmp); // undefined

 tmp = 123;
 console.log(tmp); // 123
}

In the above code, before the let command declares the variable tmp, it belongs to the "dead zone" of the variable tmp.

The "temporary dead zone" also means that typeof is no longer a 100% safe operation.

typeof x; // ReferenceError
let x;

In the above code, the variable x is declared using the let command, so before it is declared, it belongs to the "dead zone" of x. As long as the variable is used, an error will be reported. Therefore, typeof will throw a ReferenceError when running.

As a comparison, if a variable is not declared at all, using typeof will not report an error.

typeof undeclared_variable // "undefined"

In the above code, undeclared_variable is a variable name that does not exist, and the result is "undefined". Therefore, before let, typeofoperator is 100% safe and will never report an error. This is no longer true. This design is to help everyone develop good programming habits. Variables must be used after they are declared, otherwise an error will be reported.

Some "dead zones" are hidden and not easy to find.

function bar(x = y, y = 2) {
 return [x, y];
}
bar(); // 报错

In the above code, the reason why an error is reported when calling the bar function (some implementations may not report an error) is because the default value of parameter x is equal to another parameter y, and y has not been declared at this time, which belongs to the "dead zone" ". If the default value of y is x, no error will be reported because x has been declared at this time.

function bar(x = 2, y = x) {
 return [x, y];
}
bar(); // [2, 2]

ES6 stipulates that variable promotion does not occur in temporary dead zones and let and const statements, mainly to reduce runtime errors and prevent the variable from being used before the variable is declared, resulting in unexpected behavior. Such errors are very common in ES5, and now with this provision, it is easy to avoid such errors.

In short, the essence of the temporary dead zone is that as soon as you enter the current scope, the variable to be used already exists, but it is not available. You can only obtain and obtain the variable after the line of code that declares the variable appears. Use this variable.

Does not allow repeated declarations

let does not allow repeated declarations of the same variable in the same scope.

// 报错
function () {
 let a = 10;
 var a = 1;
}

// 报错
function () {
 let a = 10;
 let a = 1;
}

Therefore, parameters cannot be redeclared inside a function.

function func(arg) {
 let arg; // 报错
}

function func(arg) {
 {
  let arg; // 不报错
 }
}

Block-level scope

Why do we need block-level scope?

ES5 only has global scope and function scope, but no block-level scope, which brings many unreasonable scenarios.

In the first scenario, the inner variable may overwrite the outer variable.

var tmp = new Date();

function f() {
 console.log(tmp);
 if (false) {
  var tmp = "hello world";
 }
}

f(); // undefined

上面代码中，函数f执行后，输出结果为undefined，原因在于变量提升，导致内层的tmp变量覆盖了外层的tmp变量。

第二种场景，用来计数的循环变量泄露为全局变量。

var s = 'hello';

for (var i = 0; i < s.length; i++) {
 console.log(s[i]);
}

console.log(i); // 5

上面代码中，变量i只用来控制循环，但是循环结束后，它并没有消失，泄露成了全局变量。

ES6的块级作用域

let实际上为JavaScript新增了块级作用域。

function f1() {
 let n = 5;
 if (true) {
  let n = 10;
 }
 console.log(n); // 5
}

上面的函数有两个代码块，都声明了变量n，运行后输出5。这表示外层代码块不受内层代码块的影响。如果使用var定义变量n，最后输出的值就是10。

ES6允许块级作用域的任意嵌套。

{{{{{let insane = 'Hello World'}}}}};

上面代码使用了一个五层的块级作用域。外层作用域无法读取内层作用域的变量。

{{{{
 {let insane = 'Hello World'}
 console.log(insane); // 报错
}}}};

内层作用域可以定义外层作用域的同名变量。

{{{{
 let insane = 'Hello World';
 {let insane = 'Hello World'}
}}}};

块级作用域的出现，实际上使得获得广泛应用的立即执行函数表达式（IIFE）不再必要了。

// IIFE 写法
(function () {
 var tmp = ...;
 ...
}());

// 块级作用域写法
{
 let tmp = ...;
 ...
}

块级作用域与函数声明

函数能不能在块级作用域之中声明，是一个相当令人混淆的问题。

ES5规定，函数只能在顶层作用域和函数作用域之中声明，不能在块级作用域声明。

// 情况一
if (true) {
 function f() {}
}

// 情况二
try {
 function f() {}
} catch(e) {
}

上面代码的两种函数声明，根据ES5的规定都是非法的。

但是，浏览器没有遵守这个规定，为了兼容以前的旧代码，还是支持在块级作用域之中声明函数，因此上面两种情况实际都能运行，不会报错。不过，“严格模式”下还是会报错。

// ES5严格模式
'use strict';
if (true) {
 function f() {}
}
// 报错

ES6 引入了块级作用域，明确允许在块级作用域之中声明函数。

// ES6严格模式
'use strict';
if (true) {
 function f() {}
}
// 不报错

ES6 规定，块级作用域之中，函数声明语句的行为类似于let，在块级作用域之外不可引用。

function f() { console.log('I am outside!'); }
(function () {
 if (false) {
  // 重复声明一次函数f
  function f() { console.log('I am inside!'); }
 }

 f();
}());

上面代码在 ES5 中运行，会得到“I am inside!”，因为在if内声明的函数f会被提升到函数头部，实际运行的代码如下。

// ES5版本
function f() { console.log('I am outside!'); }
(function () {
 function f() { console.log('I am inside!'); }
 if (false) {
 }
 f();
}());

ES6 的运行结果就完全不一样了，会得到“I am outside!”。因为块级作用域内声明的函数类似于let，对作用域之外没有影响，实际运行的代码如下。

// ES6版本
function f() { console.log('I am outside!'); }
(function () {
 f();
}());

很显然，这种行为差异会对老代码产生很大影响。为了减轻因此产生的不兼容问题，ES6在附录B里面规定，浏览器的实现可以不遵守上面的规定，有自己的行为方式。

允许在块级作用域内声明函数。
函数声明类似于var，即会提升到全局作用域或函数作用域的头部。
同时，函数声明还会提升到所在的块级作用域的头部。
注意，上面三条规则只对ES6的浏览器实现有效，其他环境的实现不用遵守，还是将块级作用域的函数声明当作let处理。

前面那段代码，在 Chrome 环境下运行会报错。

// ES6的浏览器环境
function f() { console.log('I am outside!'); }
(function () {
 if (false) {
  // 重复声明一次函数f
  function f() { console.log('I am inside!'); }
 }

 f();
}());
// Uncaught TypeError: f is not a function

上面的代码报错，是因为实际运行的是下面的代码。

// ES6的浏览器环境
function f() { console.log('I am outside!'); }
(function () {
 var f = undefined;
 if (false) {
  function f() { console.log('I am inside!'); }
 }

 f();
}());
// Uncaught TypeError: f is not a function

考虑到环境导致的行为差异太大，应该避免在块级作用域内声明函数。如果确实需要，也应该写成函数表达式，而不是函数声明语句。

// 函数声明语句
{
 let a = 'secret';
 function f() {
  return a;
 }
}

// 函数表达式
{
 let a = 'secret';
 let f = function () {
  return a;
 };
}

另外，还有一个需要注意的地方。ES6的块级作用域允许声明函数的规则，只在使用大括号的情况下成立，如果没有使用大括号，就会报错。

// 不报错
'use strict';
if (true) {
 function f() {}
}

// 报错
'use strict';
if (true)
 function f() {}

do 表达式

本质上，块级作用域是一个语句，将多个操作封装在一起，没有返回值。

{
 let t = f();
 t = t * t + 1;
}

上面代码中，块级作用域将两个语句封装在一起。但是，在块级作用域以外，没有办法得到t的值，因为块级作用域不返回值，除非t是全局变量。

现在有一个提案，使得块级作用域可以变为表达式，也就是说可以返回值，办法就是在块级作用域之前加上do，使它变为do表达式。

let x = do {
 let t = f();
 t * t + 1;
};

上面代码中，变量x会得到整个块级作用域的返回值。

JavaScript ES6 的 let 和 var 的比较

在javascript 1.7中， let 关键词被添加进来， 我听说它声明之后类似于”本地变量“， 但是我仍然不确定它和 关键词 var 的具体区别。

回答：
不同点在于作用域， var关键词的作用域是最近的函数作用域（如果在函数体的外部就是全局作用域）， let 关键词的作用域是最接近的块作用域（如果在任何块意外就是全局作用域），这将会比函数作用域更小。
同样， 像var 一样， 使用let 声明的变量也会在其被声明的地方之前可见。

下面是Demo 例子。

全局（Global）

当在函数体之外它们是平等的。

let me = 'go'; //globally scoped 
var i = 'able'; //globally scoped

函数（Function）
当瞎下面这种， 也是平等的。

function ingWithinEstablishedParameters() { 
  let terOfRecommendation = 'awesome worker!'; //function block scoped 
  var sityCheerleading = 'go!'; //function block scoped 
};

块（Block）
这是不同点， let 只是在 for 循环中， var 却是在整个函数都是可见的。

function allyIlliterate() { 
  //tuce is *not* visible out here 
 
  for( let tuce = 0; tuce < 5; tuce++ ) { 
    //tuce is only visible in here (and in the for() parentheses) 
  }; 
 
  //tuce is *not* visible out here 
}; 
 
function byE40() { 
  //nish *is* visible out here 
 
  for( var nish = 0; nish < 5; nish++ ) { 
    //nish is visible to the whole function 
  }; 
 
  //nish *is* visible out here 
};

The above is the detailed content of Detailed explanation of the use of let command in js ES6. For more information, please follow other related articles on the PHP Chinese website!