Talking about the promotion of JavaScript statement

1 citations and basic principles

Before learning about JavaScript declaration promotion, let's look at the following example:

console.log(a);
var a=2;

What will be the result of the operation? You may have the following guesses:

1. Error ReferenceError: a is not defined;

2. Print 2;

3. Print undefined.

The correct result is type 3, printing undefined.

Let's take a look at the specific reasons. In fact, for var a=2; This statement, JavaScript will treat it as two declarations:

Definition declaration var a, which will be carried out in the compilation stage; The assignment declaration a=2 will stay in place and wait for the runtime.

The so-called declaration promotion: JavaScript will promote var variable declaration and function declaration to the top of their respective scope, but the assignment operation will not be promoted.
Therefore, the above example is actually handled according to this process:

var a;
console.log(a);
a=2;

We also need to know that not only the var variable declaration will be promoted, but also the function declaration will be promoted. Now let's look at the following example

foo();
function foo(){
 console.log(a);
 var a=2;
}

The result of this example is to print undefined. This code will actually be understood as the following form:

function foo(){
 var a;
 console.log(a);
 a=2;
}
foo();

2 Frequently Asked Questions about Declaration Promotion

2.1 Functional expressions

Let's look at an example of a function expression:

console.log(foo);
var foo=function(){}

The result of the above code is to print undefined. In fact, the variable identifier foo is promoted, but its assignment operation is not promoted, which can be understood as the following form:

var foo;
console.log(foo);
foo=function(){}

Conclusion: Function declarations will be promoted, but function expressions will not be promoted.

2.2 Priority of Declaration

What happens if there are function declarations and var variable declarations with the same name in the same scope? Let's also look at another example:

function a(){}
var a;
console.log(a);

var a;
function a(){}
console.log(a);

In the above two ways, the running result is to print a () {}. That is, if there are function declarations and var variable declarations with the same name in the same scope, the function declaration has higher priority.
There is another case: if there are multiple function declarations with the same name in the same scope. In this case, what is declared later overrides what is declared earlier.

3 Exercises

3.1 Question 1

var getName = function() {
 console.log(1);
}
function getName() {
 console.log(2);
}
getName();

Answer: Print 1

Parsing: The order after promotion is as follows

var getName;// It has the same name as the function declaration, so it is invalid 
function getName() {
 console.log(2);
}
getName = function() {// Assignment 
 console.log(1);
};
getName();

3.2 Question 2

var a;
console.log(a);
a=2;

0

Answer: Print 1

Analysis: First of all, we need to sort out the promotion of the statement.
There are several key points in this topic, which we need to understand:

The a function within the function b is after return, but it does not fail, and it will be promoted by declaration, thus rising to the top of the scope of the b function.

Many children's shoes (such as my TAT) may mistakenly think that the answer to this question is 10, and think that we called the b function at the end and modified the global variable a. In fact, because the function a has a declaration promotion, the variable a in the global scope is "masked" in the function b, so a=10; In fact, the function a is re-assigned. In order to go into the 1-step test, you can comment out the a function, and you will find that the answer at this time becomes 10.

Note: This topic also involves the related knowledge of closures. Please see Reference [2] for a detailed analysis of this topic, which is very detailed.

var a;
console.log(a);
a=2;

1

4 References

[1] JavaScript You Don't Know

[2] The problem of duplication of variable name and function name in js, Charles_Tian

[3] The priority problem of the promotion mechanism of function declaration and variable declaration, the struggle history of a rookie

The above is the details of JavaScript announcement promotion. Please pay attention to other related articles on this site for more information about JavaScript announcement promotion!