Let’s talk about declaration promotion in JavaScript

This article brings you relevant knowledge about JavaScript, which mainly introduces the relevant content about statement promotion. Statement promotion is a feature of the JavaScript parser, which will affect the functions in the code. , the effect of the variable declaration statement is extracted to the front of the scope where it is located. Let's take a look at it. I hope it will be helpful to everyone.

[Related recommendations: JavaScript video tutorial, web front-end]

Statement improvement (hosting) is A feature of the JavaScript parser, it will extract the function and variable declaration statements in the code to the front of the scope where they are located.

Function promotion

JavaScript supports calling functions before function declaration.

say();function say() {  console.log("Hello");
}

The parser will scan the code within the scope and extract the function declaration to the front of the execution code. So, this is how the parser looks at this code:

function say() {  console.log("Hello");
}say();

In addition to ordinary functions, async function, function *, async function * Also has the same lifting effect.

var Variable declaration promotion

var Variable declarations of keywords will be promoted, but variable assignments will not be promoted.

console.log(foo); // undefinedvar foo = "bar";console.log(foo); // 'bar'

The parsing result of the above code is:

var foo;console.log(foo);
foo = "bar";console.log(foo);

This may lead to some strange problems:

var x = "x in global";

(function () {  // 这里期望读取全局变量
  console.log(x); // 结果为undefined. 
  /* ... */
  // 在函数内某处
  var x = "x in function";
})();

In the past, in order to avoid this strange improvement, everyone generally Put the var declaration at the beginning of the scope.

var x='x';var y='y';function (){    var x;    var foo;    // ...}

Of course, now we choose not to use var, but instead use the more reasonable let and const.

let and const Variable declaration and dead zone

Then, let and const are There is no variable promotion? ——Not necessarily.

Look at this example:

const x = "x in global";

(function () {  // 这里期望读取全局变量
  console.log(x); // ReferenceError: Cannot access 'x' before initialization
  /* ... */
  // 在函数内某处
  const x = "x in function";
})();

An execution error is reported, indicating that const x = "x in function"; One line affects the upper area code within the scope.

The parser will scan the const and let declarations in the current scope. Using variable names before the declaration statement will trigger ReferenceError. This avoids the var promotion problem and ambiguous code patterns mentioned above. The

class keyword has the same effect, and new an undeclared class will also cause a ReferenceError.

new MyClass(); // ReferenceError: Cannot access 'MyClass' before initializationclass MyClass {}

Some people think that this situation is not an improvement, after all, the declaration and assignment are not made in advance; others think that these statements have an impact before they are executed, and their effect is improved. Personally, I prefer the latter, which is the promotion of identifiers (variable and class names).

Summary

The effects of some JavaScript declaration statements will affect the entire scope where they are located. This phenomenon is called promotion.

There are 3 types of promotion:

• #function Both declaration and assignment of keywords are promoted.
• var Keyword declarations are promoted, but assignments are not.
• let, const, class The identifier is promoted, forming a dead zone, and neither declaration nor assignment is promoted.

[Related recommendations: JavaScript video tutorial, web front-end]

The above is the detailed content of Let’s talk about declaration promotion in JavaScript. For more information, please follow other related articles on the PHP Chinese website!