preface

Let’s take a look at how variable promotion and function promotion should be understood by beginners while learning javascript.

Variable ascension

First of all, we all know that the code is executed from the top down, next, we need to have a brief understanding of the JS code in the process of running, need to go through the stages, the code in the process of running, divided into the compilation stage and the execution stage, variable promotion occurs in the compilation stage, then we look at the following example

console.log(a)//undefined
var a = 'tdl'

a = 'tdl'
var a
console.log(a)//tdl

Copy the code

The result of the first part of the code is undefined, and the second part is TDL. Why this is the case? Many beginners may think that the output of both pieces of code is TDL, which involves the problem of variable promotion. We then execute on the next line of code, and simulate the processing of the two pieces of code during the precompilation phase, resulting in code like the following

var a = undefined
console.log(a)//undefined
a = 'tdl'

var a = undefined
a = 'tdl'
console.log(a)//tdl
Copy the code

We can think of variable promotion as bringing the variable declaration to the front, assigning it to undefined, and executing the code from the top down. Then in the a assignment phase, TDL is assigned to variable A instead of undefined. The code is executed in this order

Function increase

Know we should know about the function declaration simple function before ascension, and function expression, expression and distinguish function declarations and the easiest way is to see the function key words appear in the statement of the position (not just the value of one line of code, but a position) of the statement, if the first word of a function appear in the statement, it is a function declaration, Otherwise even the expression. Let’s look at the following two pieces of code

Name()//tdl
function Name(){
    console.log('tdl');
}

Name()
console.log(Name);//ReferenceError: Name is not defined
var a = function Name(){
    console.log('tdl');
}
Copy the code

From this we can see that the first section of code hi output TDL, the second section will report an error, let’s take a brief look at its precompilation process

function Name(){
    console.log('tdl');// The function declaration part is promoted
    Name()// The result TDL is printed after execution
} 

var a = undefined
Name()
console.log(Name);//ReferenceError: Name is not defined
function Name(){
    console.log('tdl');
}
Copy the code

In the first code, name is found, so the value of name is printed normally. In the second code, name is not found, so an error is reported.

conclusion

  1. Variable declarations and function declarations are promoted to the top
  2. Code is divided into compilation phase and execution phase, code is executed sequentially from top to bottom.
  3. JS learning the most basic point is to learn to understand the code, variable promotion and function promotion is an important basis.

Reference sources small Yellow Book