1. Why does variable promotion occur?

1.1 javascript code to explain the execution process

The reason for the variable boost has to do with the execution of the javascript code:

Javascript is a scripting language interpreted and executed by the browser. Different from Java C, javascript needs to be compiled and then run. Javascript is interpreted and executed by the BROWSER JS interpreter

The JS execution process is divided into the pre-compilation period and the execution period (code block as the unit, while the explanation and execution). During the pre-compilation period, the JS interpreter will process all the declared variables and methods in this code segment, and bring the variables and methods to the front of the corresponding scope. This process only declares the variables. Does not initialize or assign (default is undefined by default)

Ex. :

console.log(a,"a") //undefined "a"
var a = "I am a"
Copy the code

Because variable A is declared at the top of the scope, it is not initialized or assigned. The code above should compile like this

var a // Promote the variable declaration to the front of the corresponding scope. The default value is undefined
console.log(a,"a") //undefined "a", so a is undefined
var a = "I am a"
Copy the code

1.2 javascript scope

Here’s another example:

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

This is what the code above looks like when compiled

    var a // Promote the variable a declaration to the front of the corresponding scope. The default value is undefined
    console.log(a);
    var a = 1;
    console.log(a); 
    (function(){
        var a // Promote the variable a declaration to the front of the corresponding scope. The default value is undefined
        console.log(a);
        var a =2;
        console.log(a); }) ()// undefined 1 undefined 2
Copy the code

This example is not only related to the JS code execution process, but also related to the SCOPE of JS. JavaScript is a function level scope, where new scope is created. So the a declared outside of the function is not the same as the A declared inside the function

Block-level scope: When entering a block, like if statements (code wrapped in {}), new variables are declared in this block-level scope that do not affect the outer scope. For example, C function-level scope: when you enter a function, new variables are declared in the function scope. These variables do not affect the external scope.

2. Function promotion

Var fn =function(){} var fn =function(){} var fn =function(){} (Variable form declaration)

Use the function keyword statement definition

bar() function bar() { console.log(1); } // Output result 1Copy the code

It’s like this

function bar() { console.log(1); } bar() // Output result 1Copy the code

Use variables to declare functions

bar()
var bar = function() {
  console.log(1);
}
TypeError: bar is not a function
Copy the code

Declare a function using a variable expression, in which case the function is equivalent to a variable. So a function that uses a variable declaration is the same as a variable promotion, so the above example is equivalent to this

var bar // The variable bar declaration is promoted to the front of the corresponding scope. The default value is undefined
bar()
var bar = function() {
  console.log(1);
}
TypeError: bar is not a function
Copy the code

As you can see from the above two examples, function promotion exists only for functions declared by the function keyword. The function declaration is promoted to the top of the scope, and the declaration content is promoted to the top with it.

Function fn(){} function fn(){} Take the following two examples

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

What is the output of these two pieces of code? Function fn(){} function fn(){} function fn(){

conclusion

  • In JSPrecompiled periodAll declared variables and methods in this code segment are processed by the JS interpreter.To bring a variable and method to the front of the corresponding scope, this procedure only declares the variable, and does not initialize or assign a value (default is undefined by default).
  • All declarations are promoted to the top of the scope.
  • The same variable is declared only once; others are ignored or overwritten.
  • The function declaration is promoted along with the part of the function definition.
  • JS is a functional scope. New variables are declared in the function scope, and these variables do not affect the outer scope.

Portal: # let insight – Is there a variable boost in let?