The difference between JS pre-parsing and variable promotion in web interview

What is pre-analysis?

concept:

Before the JS code is executed from top to bottom, the browser will parse all variable declarations first. This stage is called pre-parsing.

Detailed explanation

Look for var and function declarations in the scope (anonymous functions do not have function declarations, so they will not be hoisted), then declare them in advance, leave the assignment operations in place, and then execute the code from top to bottom. This is a pre-analysis process.

The difference between variable and function preparsing

During pre-parsing, all variables declared with var and functions declared with function are promoted to the top of the scope.

Variables declared with var are only declared in advance during pre-parsing, and the assignment statement remains in place;

Functions declared by function will be declared and defined in advance during pre-parsing. When the function is executed, pre-parsing will be performed inside the function.

Note: Anonymous functions do not have function declarations, so they will not be promoted.

Repeated declaration of var variable

When var is declared repeatedly: if it already exists, the compiler will ignore var and continue compiling;

If it does not exist, search up along the application domain chain.

If not found, the variable will be declared in this scope.

Variable and function promotion precedence

Summarize:

Function promotion has a higher priority than variable promotion and will not be overwritten when a variable with the same name is declared, but will be overwritten after the variable is assigned a value.

The following content is reproduced from:

https://blog.csdn.net/caoyafeicyf/article/details/53172532

A Deeper Look at Why Function Priority is Greater Than Variable Priority

The browser's pre-parsing process

Let’s start with a small question.

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

The result is the function body function foo(){}
Then the following question:

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

The result is also the function body

function foo(){}

So many people say that the priority of function declaration is greater than that of variable declaration.

So, why? This starts with the browser's pre-parsing.

Pre-analysis process

Search for pre-parsed keywords

Look for the var keyword

Find the function keyword

Perform pre-parse

First, use the var keyword to declare the identifiers, so that these identifiers are defined. After the identifiers are defined, no error will be reported when using this identifier. However, since no value is assigned, its value is undefined.

So far, the identifier holds a reference to the function.

A few details to note

• When the var keyword is used repeatedly for the same identifier, all but the first use are ignored.
• When preparsing, variable declarations are processed first, and function declarations are processed second.
• There is no need to worry about who has higher priority. These are just superficial phenomena.
• Understand the pre-analysis process, everything is just a passing cloud

After reading the pre-parsing principle, let's go back to the two questions at the beginning of this article, analyze the pre-parsing process, and understand in detail why the priority of the function is higher than the priority of the variable. follow me

Let’s look at the first one first

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

The pre-analysis process is:

var foo;<----var in variable declaration
var foo;<----var extracted from the function declaration
foo = function () {} <----Function declaration extracted assignment console.log(foo);

Let’s look at the second one

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

The pre-analysis process is:

var foo;<----var in variable declaration
var foo;<----var extracted from the function declaration
foo = function () {} <----Function declaration extracted assignment console.log(foo)

Compare the two, what do you notice? It turns out that their pre-parsing process is the same, which is why functions have higher priority than variables.

If you understand the above content, then here is another question:

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

How does the browser parse it? Let's follow my train of thought:

1. The parser first searches for the var keyword and finds it in the first line, extracting it to the beginning.
2. The parser searches for the function keyword and finds it in the second line. It first separates var + function name and finds that it is the same as the first step, so it does not process it. Then it starts to separate the function assignment, that is, a=function (){} , where a is the function body.
3. The parser then processes the variable assignment, a=1 , and the function body of the previous step is overwritten, and a=1 at this time.
4. Finally, we process console.log(a) and the result is naturally 1.

Here is the code process processed by the parser:

var a;<----var in variable declaration
var a;<----var extracted from the function declaration
a=function (){}<----Function declaration extracts the assignment a=1;
console.log(a);

The above is the detailed content of the difference between JS pre-parsing and variable promotion in web interviews. For more information about JS pre-parsing and variable promotion, please pay attention to other related articles on 123WORDPRESS.COM!