I believe many people will have such a question, what is promotion? How to understand this concept? I still remember a sentence the teacher said on the platform in the first C language class in college, which is still fresh in my memory: “The order of code execution is from top to bottom”. But is this really the case in JavaScript? My answer is not entirely correct.

hello = 2;
var hello;
console.log(hello);
Copy the code

Maybe after reading this code a lot of people will think undefined.

Maybe you’re wrong…

Just to get the details straight, after the var hello declaration hello = 2, many people think the variable was reassigned, so it’s given the default value undefined. But the answer is 2.

console.log(world)

var world = 3;
Copy the code

Maybe a lot of people thought it was 3, sorry, you’re wrong again! The result is undefined

Think about it another way

All declarations, including variables and functions, are processed first before any code is executed.

Before this, many people may be confused about the concept of declaration, such as calling a function first and then defining, it is important to note that each scope is promoted.

foo();

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

Copy the code
foo(); Var foo = function bar(){// do someThing}Copy the code
Function declaration

Function declarations are promoted, but function expressions are not. Why? Foo () does not cause ReferenceError because foo holds the memory address of bar, and foo is promoted and assigned to its scope (global), but foo is not assigned at this time. If it were a function declaration rather than a function expression, it would assign a value, and foo() would raise TypeError if an illegal operation resulted from a function call on the value of undefined.

Foo () //ReferenceError var foo = function bar(){//do someThing}Copy the code
Why function first

Function declarations and variable declarations are promoted, but we need to understand one detail: functions are promoted before variables

foo(); //1 var foo; function foo(){ console.log(1); } foo = function(){ console.log(2); }Copy the code

Why is it one and not two?

We can understand it as follows:

function foo(){ console.log(1); } foo(); //1 foo = function (){ console.log(2); }Copy the code
Repeat definition

Looking at the following code, we can conclude that although foo is defined repeatedly, subsequent functions override previous ones.

foo(); //3 function foo(){ console.log(1); } var foo = function () { console.log(2); } function foo(){ console.log(3); }Copy the code

Take a look at the code below

foo(); TypeError: foo is not function var z = true; if(z) { function foo() { console.log("z"); } } else { function foo() { console.log("x"); }}Copy the code
Come to the conclusion

Var a = 2; var a = 2; We usually think of it as a statement, but the engine doesn’t think of it that way, it says var a = 2; As two separate declarations, the first is the compile phase task and the second is the execution phase task.

The second is that wherever the declaration is used, the code itself is processed first before execution, and this process can be understood as all declarations (variables and functions) are moved to the top of their scope. This process is called promotion.

Finally, the declaration itself is promoted, but assignment operations, including assignment of function expressions, are not.