Detailed explanation of the upgrade mechanism variable promotion function promotion example in JS

text

For some computer languages, when a program is executed, the translation of commands is usually executed line by line from top to bottom, which is usually calledCode explanation;

For other languages, this translation is pre-processed and is calledCode Compilation, so when the program is executed, it is runAlready compiled and executableComputer instructions.

JavaScript is usually consideredExplanatory, because it needs to be processed every time you execute js source code. But it is not entirely accurate to say so.We need to know, the JavaScript engine is actuallyDynamic CompilationThe program and then execute the compiled code immediately. The direct reason for variable declarations and function improvement in JavaScript is what the compiler does in the compilation stage.

During the elevation process, while the declaration seems to be promoted in the program, what actually happens is that the function and variable declarations are added to memory during the compilation phase.

1. Variable improvement

As far as variables and constants are concerned, the keyword var is promoted, and let and const are not allowed to be promoted.

a = 5;
(a);
var a; // 5

In the example above, use it before declaring the variable a. The program runs and displays output 5. The function of this program is as follows:

var a;
a = 5;
(a); // 5

However, in JavaScript, initialization will not be promoted.

(a);//undefined
var a = 5;

The functions of the above program are as follows:

var a;
(a);
a = 5;

During the compilation phase, only the declaration is moved to memory. Therefore, the value of the variable a is undefined because a is printed without initialization. Note: When a variable is used inside a function, the variable is only promoted to the top of the function.

var a = 4;
function greet() {
    b = 'hello';
    (b); 
    var b;
}
greet(); // hello
(b);//Uncaught ReferenceError: b is not defined

If a variable is used with the let (const) keyword, the variable is not promoted.

a = 5;
(a);// error
let a; 

To put it another way, variables are used together with the let(const) keyword, and the variable is promoted to a temporary dead zone (TDZ) and is not released from TDZ until the program executes the let(const) declaration statement of the variable.

2. Function improvement

Since both function declaration and variable declaration are promoted, the function will be promoted first, and then the variable will be, and the subsequent function declaration will override the previous one.

Code example:

foo();
var foo;
function foo(){
	(1);
}
foo = function(){
	(2);
};

The final result will output 1. Because function declarations will be promoted, and function expressions will not be promoted. This code can be understood as:

function foo(){
	(1);
}
foo();
foo = function(){
	(2);
};

3. Judgment order

When executing the first line of code in a function, how do you determine which variables exist in the lexical scope of the function? What does this variable represent? The judgment steps are as follows:

• Store parameters in the parameter list as variable identifiers in scope with value undefined;
• Assign the passed in real parameters to the identifier in the corresponding parameter list;
• Function promotion; if there is an identifier with the same name as the function name in the scope, the function replaces the value of the identifier;
• var upgrade; if there is an identifier with the same name in the scope, no changes will be made, otherwise the identifier will be added to the scope and the value is undefined;
• Execute the first line of code.

4. Other "improvement"

1. The statement as the result of the import is "promoted";

foo();
import { foo } from "foo";

In the above code, foo() can be run, not only because the static resolution of the import... statement determines what the foo value is during the compilation process, but also because it "elevates" the declaration at the top level of the module scope to make it available in the location used by the module.

The above is the detailed explanation of the upgrade mechanism variable promotion function improvement example in JS. For more information about the upgrade of JS variable promotion function, please pay attention to my other related articles!