“This article has participated in the good article call order activity, click to see: back end, big front end double track submission, 20,000 yuan prize pool for you to challenge!”

Js variable promotion

JavaScript is a single-threaded language, so execution must be sequential. But instead of analyzing and executing line by line, it’s analyzing and executing section by section, with the compile phase first and then the execution phase. During the compile phase, milliseconds before the code actually executes, all of the variable and function declarations are detected and added to memory within a JavaScript data structure called the Lexical Environment. So these variables and functions can be used before they are actually declared.

Let’s start with a simple example:

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

If this code were executed from top to bottom, it would definitely output undefined, whereas JavaScript is not a top-down language. The output of this code is 2. Surprise? So, why does this happen? The key point here is — variable increase. It will elevate the declarations of all variables in the current scope to the top of the program. Therefore, the above code is equivalent to the following code. Does that make sense?

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

Let’s look at another example:

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

What does this code output? Output 2? This code is actually going to print undefined. Why is that? Var a = 2; var a = 2; var a = 2;

  1. var a;
  2. a = 2;

Js will only promote var a, so this statement is equivalent to:

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

So, why is there a variable increase?

Why does the phenomenon of variable increase occur? Because JS, like other languages, goes through compilation and execution phases. While in the compilation phase, js will collect all variable declarations and declare variables in advance, and other statements will not change their order, so in the compilation phase, the first step has been executed, and the second part is executed in the execution phase until the execution of the statement.

Variable declarations

Js variable declarations can be roughly divided into three types: var declarations, let and const declarations, and function declarations. When a function declaration appears in conjunction with other declarations, it can cause some conflicts. Let’s move on:

 fn();
 function fn () {
     console.log('fn');
 }
 var fn = 2;
Copy the code

What do you think the output will be? Does that make an error? The output is actually going to be FN. That explains the question we just asked, when a function declaration comes along with other declarations, which one is going to prevail? The answer is that function declarations are above all else; after all, functions are the aristocracy of JS.

What about multiple function declarations?

 fn();
 function fn () {
     console.log('1');
 }
 function fn () {
     console.log('2');
 }
Copy the code

The output of the above code is 2. This is because when there are multiple function declarations, the last one replaces the previous one.

Here’s one last example:

 fn();
 var fn = function () {
 console.log('fn');
 }
Copy the code

After the above understanding, look at this is not very simple ah? This is the same as the second example, var fn = function() {} and this is what we call a function expression. It’s actually divided into two parts:

  1. var fn;
  2. fn = function() {};

As we can see from example 2, the result of this should be an error (fn is undefined because fn is declared but not assigned).

conclusion

So, to sum up.

  1. Js will promote the variable declaration to the top of js. In the case of var a = 2, the var a step will be separated and promoted.
  2. The essence of variable promotion is that the JS engine declares all variables when compiling, so all variables have been declared when executing.
  3. When there are multiple variables with the same name, the function declaration overrides the other declarations. If there are multiple function declarations, the last function declaration overrides all the previous declarations.