Regression Basics: JavaScript variable Promotion

From me:

JavaScript's variable declaration has a hoisting mechanism, it is a basic JavaScript knowledge point, but also a relatively easy to make mistakes, usually in development, large and small projects will encounter.

It is the JavaScript engine that, when executed, promotes the declaration of all variables to the front of the current scope.

Of course, function declarations can also be promoted. The function expression is then not promoted.

Original: Back to Basics:javascript hoisting

Regression Basics: JavaScript variable Promotion

Variable declarations are one of the most fundamental parts of all programming languages. However, JavaScript has a weird point, called variable elevation (hositing), which makes a seemingly insignificant statement a small bug. This article explains what variable elevation (hositing) is, and how you can avoid this big pit.

JavaScript is a particularly flexible language that allows you to declare variables almost anywhere. For example, the immediate execution function expression (iife) below declares 2 variables and then displays them with a bullet box. As a note, you should never use a bullet box, but we're proving it here.

(function () {  var1;   var 2 ;   var 3 ;   " " " " + Baz);}) ();

This looks like a witty JavaScript code. As expected, he displays the string "1 2 3" . Now, suppose you move the frame position, just below.

(function () {  var1;   " " " " + baz);   var 2 ;   var 3 ;}) ();

If someone really writes this code, then that might be an error. Obviously, the box bar baz takes place before and after the declaration. However, this is completely effective JavaScript, which does not throw an exception at all. Instead, the pop-up box is displayed "1 undefined undefined" .

Based on the previous experiment, it seems that you can refer to a variable that doesn't exist before. Now, let's do the same iife, but remove baz the declaration and think of it as below. Immediately, we have a 引用错误（ReferenceError） , because baz there is no definition.

(function () {  var1;   " " " " + baz);   var 2 ;}) ();

It's really interesting. To understand what's going on here, you need to understand the variable elevation (hoisting). variable elevation (hoisting) is the behavior of the JavaScript compiler, which moves all variables and function declarations to the highest point in the current scope. However, only declarations have been promoted. Any assignment behavior is left in the place where they are located. So our second example, Iife, is actually equivalent to the following code:

(function () {  var  foo;   var Bar;   var Baz;   1 ;   " " " " + baz);   2 ;   3 ;}) ();

Now, you can figure out why the second example doesn't throw an exception. After the variable is lifted (hoisting), bar and baz actually before the box has been defined, although the display undefined. In the third example, it baz is completely removed. Therefore, there is no variable that can be promoted, causing the popup to throw an exception.

function variable promotion (hoisting)

As mentioned before, function declarations can be promoted as well. The function assigned to the variable is then not promoted. For example, the code below will run as expected, because the function declaration is promoted.

foo (); function foo () {  alert ("hello! " );}

However, the example below is hard to fail. foothis variable declaration is promoted before the function is called. Then, because foo the assignment was not promoted, an exception was thrown that attempted to invoke a non-function variable.

foo (); var foo = function () {  alert ("hello! " );};

Summarize

Variable elevation (hoisting) is easy to understand, but it is a frequently overlooked detail in the JavaScript language. Without a proper understanding of variable elevation (hoisting), your program is prone to small bugs. To help you stay away from these bugs, many developers (and static analysis tools) advocate placing a separate variable declaration at the start of each scope. Since this is the basis of how the JavaScript compiler detects your code, it is valid for this rule-even if I break the rules.

Regression Basics: JavaScript variable Promotion