What does javascript variable promotion mean?

In JavaScript, variable promotion means that within the scope of a variable, no matter where the variable is declared, it will be promoted to the top of the scope, but the order of variable initialization remains unchanged. The actual implementation of variable hoisting is that JavaScript variable and function declarations are placed into memory during the compilation phase.

The operating environment of this tutorial: windows7 system, javascript version 1.8.5, Dell G3 computer.

What is variable promotion?

Variable hoisting (Hoisting) is people’s understanding of how JavaScript execution context works, and it is not an official change.

Literally understood, variable promotion means that the declarations of variables and functions will be moved to the front of the scope in the physical layer. Although this understanding is not accurate, the effect is the same.

In layman's terms, variable promotion means that within the scope of a variable, no matter where the variable is declared, it will be promoted to the top of the scope, but the order of variable initialization remains unchanged.

The actual implementation of variable promotion is that the declaration of JavaScript variables and functions will be placed into memory during the compilation phase. This means that users can use a function or variable before it is formally declared.

To understand the implementation of variable promotion, we must first clarify the following two points:

• javascript code is not executed line by line.

• javascript execution is divided into 2 steps:

  • Compilation (lexical interpretation/pre-interpretation)

  • Execution

Variable promotion helps understanding

console.log(a);
var a = 'ghostwu';

For the above code example, the first line of code, you may think that an error is reported, Because the a variable is not defined before a is output, but the correct result is undefined.. According to the above explanation of the js execution code, combined with the actual code, when we encounter var a = "ghostwu" to define a variable, js actually regards this sentence as two stages, var a occurs in the compilation stage , a = 'ghostwu' occurs in the execution phase. Then var a will be promoted to the front of the current scope, a = 'ghostwu' stays in place waiting for the execution phase, so look at the following case:

 a = 'ghostwu';
 var a;
 console.log( a );
 
 //上面这段代码经过编译之后，变成下面这样

 var a;  //被提升到当前作用域的最前面
 a = 'ghostwu'; //留在原地，等待执行
 console.log( a ); //输出ghostwu
 
 
 
  console.log( a ); 
   var a = 'ghostwu';

   //上面这段代码,经过编译之后，变成下面这样
   
   var a;
  console.log( a );//输出undefined,而不会报错
   a = 'ghostwu';

Function declaration promotion

Before explaining function declaration promotion, let’s first understand the two common ways of defining functions

         //函数声明, 形如:
         function show(){
             console.log( '函数声明方式' );
         }
 
         //函数表达式, 形如:
         var show = function(){
             console.log( '表达式方式' );
         }

Because function expression The declaration of expressions and functions will have different interpretation effects during the compilation phase, so the declaration of the function will be promoted. For an example, see the following code:

         show();
         function show(){
             console.log( a );
             var a = 'ghostwu';
         }


//函数声明会被提升，所以上面的代码经过编译之后，就变成下面这样

    function show(){    //函数声明被提升到 当前作用域的最前面
    var a;    
     //var声明被提升到当前作用域的最前面, 注意，他不会提升到函数的外面, 因为当前的作用域是在函数中
    console.log( a );
    a = 'ghostwu';
   }
   show();//输出undefined

But the function expression will not be promoted, see below Example:

show(); //报错,show is not a function
var show = function(){
 console.log( 'ghostwu' );
}
//对于上面这段表达式代码，经过编译之后:
var show;
show();  //执行之后就是 undefined(), 所以在表达式定义之前，调用函数报错了
show = function(){
  console.log( 'ghostwu' );  
}

But look at the following case:

show(); //你好
var show;
function show(){
console.log( '你好' );
}
show = function(){
   console.log( 'hello' );
}

Why does the above code output "Hello"? Because when a function declaration or variable declaration with the same name appears, the function declaration will is promoted first, variable declarations are ignored. So after compilation, it becomes:

function show(){
   console.log( '你好' );
}
show(); //你好
show = function(){
  console.log( 'hello' );
}
show();//如果这里在调用一次，就是hello, 因为show函数体在执行阶段被重新赋值了

But if there is a function declaration with the same name, the latter one will overwrite the previous one, as follows:

show(); //how are you
var show;
function show(){
console.log( 'hello' );
}    
show = function(){
console.log( '你好' );
}
function show(){
console.log( 'how are you!' );
}  

//上面的代码经过编译之后，变成如下形式:
function show(){
   console.log( 'how are you!' );
}
show(); //how are you
show = function(){
 console.log( '你好' );
}
show(); //如果在这里再执行一次，结果：你好

Note:

• #Variable promotion only promotes the declaration of the variable, and does not promote the assignment.

• Because there is such a thing as variable promotion, in order to avoid the bad effects caused by variable promotion, we'd better use let when defining variables. instead of var.

【Related recommendations: javascript learning tutorial】

The above is the detailed content of What does javascript variable promotion mean?. For more information, please follow other related articles on the PHP Chinese website!