Introduction to JavaScript declaration hoisting (with examples)

This article brings you an introduction to JavaScript declaration improvement (with examples). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Javascript declaration promotion

Before analyzing declaration promotion, I think it is necessary to know two points:

1. Two ways for the engine to query variables

The way the engine queries variables can be divided into two ways: LHS and RHS. You can roughly understand the meaning through "L" and "R", which are the left and right sides of the assignment operation respectively. (It cannot just be understood as the left and right sides of "=", because there are many forms of assignment operations.)

Let me briefly talk about my understanding of these two query methods:
LHS: Assignment Who is the target of the operation? (Query variable)
RHS: Who is the source of the assignment operation. (Query the value of the variable)

This may be a little difficult to understand. For example:

function foo(a){
    //这里存在一个隐式变量分配，LHS查询变量a，并赋值2.
    //隐式a = 2;
    //左边LHS查询变量b，查询作用域中是否存在b这个变量。
    //右边RHS查询变量a的值，将a赋值给b。
    var b = a;
    //返回a,b是RHS查询变量a的值和变量b的值并使用。
    return a + b;
}
//左边LHS查询变量c，查询作用域中是否存在c这个变量。
//右边RHS引用函数foo，将2作为参数传进去。
var c = foo(2);

2. Exceptions

One thing to emphasize about exceptions must be in strict mode. . Because in non-strict mode, if the LHS query cannot find the queried variable in the top-level global scope, it will create a variable with that name and return it to the engine.

ReferenceError: Related to scope determination failure. (For example: the required variable cannot be found in the scope)
TypeError: The scope determination was successful, but the operation on the result is illegal or unreasonable. (For example: trying to make a function call on a non-function type value, or refer to a property in a null or undefined type value)

For example:

"strict"
function foo() {
    console.log(a) //undefined
    console.log(b) //ReferenceError
}
var a = 2;

Declaration promotion

1. Preliminary understanding

When writing JavaScript code, many times you will feel that the code will be executed from top to bottom. But when it comes to statement promotion, this idea will be broken.

For example:

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

运行结果为: 2

If it is executed top-down according to common sense, then the expected result of a execution should be undefined, but why is it 2?
This is the result of statement promotion.

2. Further understanding

When you have a preliminary understanding of statement promotion, you encounter the following code:

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

运行结果为：undefined

After you have a preliminary understanding of statement promotion, you will naturally think that the statement is will be promoted, but when assigned when declaring, the value of the variable cannot be obtained.

In fact, the running steps of the above code can be broken down into:

var a; //声明提升
console.log(a); //打印a的值
a = 2; //对a进行赋值

It turns out that statement promotion is literal statement promotion, and the rest of the operations (such as assignment and other logic) are still in place. step.

Declare a function to perform corresponding operations, and you will get the result of function declaration promotion. It can be found from this: The declarations of variables and functions will be promoted and executed in front of other code.

3. Gradually understand

Through several experiments, we can gradually understand that in fact, declaration promotion means: The declaration of variables and functions will be promoted in other codes (current function domain).

At this point, some people will think that if it is a function expression, will it also be promoted?

The answer is: no. Moreover, even named function expressions cannot be used before the name identifier is assigned.

For example:

foo(); //TypeError
bar(); //ReferenceError
var foo = function bar(){};

The code is decomposed into:

var foo; //变量声明提升
foo(); //foo对undefined值进行函数调用导致非法操作，故TypeError
bar(); //bar函数并没有声明，故ReferenceError
foo = function bar(){}; //对foo进行赋值

So: Function expressions cannot be used before the name identifier is assigned a value.

Note: 1. Each scope will be promoted. (So the scope formed within the function will also have a promotion operation, and the promotion operation is limited to the current internal scope of the function)
2. When functions and variables are promoted, the function Prioritize promotion.
3. Function declarations inside a normal block are usually promoted to the top of the scope.

4. In-depth understanding

When reading "Javascript You Don't Know", in the process of learning let, you will find that there is an explanation: declarations using let will not Promoting within scope. The declaration does not exist until the declared code is run.

For example:

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

运行结果是：ReferenceError: Cannot access 'a' before initialization. //初始化前无法访问"a"

Then I went back to the code I ran before, replaced let with var, and the returned result was undefined.

Combining the two, plus reading, it took me two months to understand the article let, and I found that I have a newer understanding of whether let is improved.

The author divides js variables into three parts: Create (create), initialize (initialize) and assign (assign) .

The reason why the above operations have different responses does not mean that let is not created, but that there is an initialization process that is not executed. And using the variable before initialization will form a temporary dead zone.

After testing var, let and function, it can be concluded that:

The creation and initialization of var is promoted, and the assignment will not be promoted.

The creation of let is promoted, initialization and assignment will not be promoted.

The creation, initialization and assignment of functions will be promoted.

This article is all over here. For more other exciting content, you can pay attention to the JavaScript Tutorial Video column on the PHP Chinese website!

The above is the detailed content of Introduction to JavaScript declaration hoisting (with examples). For more information, please follow other related articles on the PHP Chinese website!