What does es6 temporary Zenless Zone Zero mean?

In es6, the temporary dead zone is a syntax error, which refers to the let and const commands that make the block form a closed scope. Within a code block, before a variable is declared using the let/const command, the variable is unavailable and belongs to the variable's "dead zone" before the variable is declared; this is syntactically called a "temporary dead zone". 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 it is declared, resulting in unexpected behavior.

The operating environment of this tutorial: Windows 7 system, ECMAScript version 6, Dell G3 computer.

What is the temporary dead zone

#In ES6, within a code block, before using the let/const command to declare a variable, the variable is is unavailable and belongs to the "dead zone" of the variable before it is declared. Grammatically, this is called the "temporary dead zone" (TDZ). The ES standard does not explicitly mention TDZ, but we often use it to describe the non-improving effect of let and const.

The difference between let/const and var

Before ES6, there were only two types of JS scopes, global scope and function scope. But in ES6, block-level scope appeared, that is, block-level scope can be defined using let/const. So among the new features of ES6, the easiest way to see the role of TDZ is through the use of let/const. There are two main differences between let/const and var:

• let/const uses block scope; var uses function scope
• Before let/const is declared If you access the corresponding variables and constants, a ReferenceError will be thrown; but if you access the corresponding variables before the var declaration, you will get undefined

console.log(Vname); // undefined;
console.log(Lname); // ReferenceError
var Vname = 'xiaoxiao';
let Lname = 'xiaoxiao';

Practice proves that when we use var definition before it is declared You will get undefined when using let's variable, but an error will be thrown when using let's undefined variable. Because variables declared by let in ES6 do not have the effect of variable promotion.

var x = 10;
if (true) {
    x = 20; // ReferenceError
    let x;
 }

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.

typeof's "dead zone" trap

We all know that using typeof can be used to detect the data type of a given variable, or you can use It determines whether the value is defined. When undefined is returned, it means that the value is undefined; However, if a variable defined by const/let is used before typeof is declared, an error will be reported

typeof x; // ReferenceError
let x;

Because x is declared using let, then it is a temporary dead zone before x is declared. When using typeof An error will be reported. Therefore, variables declared using let/const are not necessarily safe when using typeof.

typeof y; // 'undefined'

But it can be seen that if we just use typeof without defining it, no error will be reported. From this we can see that as long as there is no clear provision to use const/let definition, there will be no error.

The "dead zone" trap of passing parameters

For example, in the following piece of code, we are using

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

bar(); // 报错

in the above code , the reason why calling the bar function reports an error (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]

Another difference between using var and let statements.

// 不报错
var x = x;

// 报错
let x = x;
// ReferenceError: x is not defined

Affected by the "dead zone", when using let to declare a variable, as long as the variable is used before the declaration is completed, an error will be reported. The above line belongs to this situation. Before the declaration statement of variable x is executed, the value of x is obtained, resulting in an error "x is not defined".

Summary

ES6 stipulates that variable promotion does not occur in temporary dead zones and let and const statements, mainly to reduce runtime errors and prevent Using a variable before it is declared can lead to unexpected behavior. Mistakes like this are very common in ES5, and now that this provision is in place, it's easy to avoid them.

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

Note: TDZ was originally designed for const, but the subsequent design for let was also consistent.

Note: In the ES6 standard, identifiers declared for const are still often variables, called constant variables. Constants created with const declarations can't be re-assigned in JS, but they are not immutable. There is still a big difference between the two concepts.

【Related recommendations: javascript video tutorial, web front-end】

The above is the detailed content of What does es6 temporary Zenless Zone Zero mean?. For more information, please follow other related articles on the PHP Chinese website!