Hoisting in JavaScript (variable upgrade and function declaration)

This article mainly introduces you about the relevant content of HOISTING in JavaScript, and shares it for your reference to study. In the following, let’s take a look at the detailed introduction.

How to “move” to the top of the scope / variable “move” to the top of the scope. Term Hoisting (promotion) is used in many JavaScript blog posts to explain the analysis of the identifier. In fact, hoisting (promotion) This word is used to interpret variables and function declarations how to be upgraded to function or global scope. You can’t find this term in any JavaScript document. We said that Hoisting is just uses its literal meaning to make a metaphor.

If you have a basic understanding of the JavaScript scope of work, so more in-depth understanding of Hoisting (upgrading) helps you build more powerful basics. (April Fool Terminal Note: As a general concept in JavaScript, the variable upgrade and function declaration are often asked when developing interviews at the front end, or appears in the front-end development pen test questions. Visible to understand the importance of Hoisting (improved).)

In order to better understand the basics, let’s review “Hoisting (upgrading) means what it means. Also, give you a reminder, JavaScript is an explanatory language, which is different from the compiletable language, which means that the JS code is executed progressively.

Please consider the following example:

Console.log (NotyetDeclared); // Print ‘undefined’ Var NotyetDeclared = ‘Now IT is declared ‘; hoisting (); function hoisting () {console.log (NotyetdECLARED); // Print ‘undefined’ var NotyetDeclared = ‘Declared Differently’; console.log (notyetdeclared); // Print ‘Declared Differently’}

  After analyzing the sample code above, several issues are proposed:  
Chapter 6, why can the function declare before?
Chapter 1, did not throw errors, because this time the variable NotyetDeclared does not exist?

Chapter 4, NotyetDeclared has declared in the global scope, why is it in line 9 or undefined? JavaScript is very logical, all of which have a clear explanation.

    We explain from the top that when the code is executed in JavaScript, a execution period will be established. There are two main implementation periods in JavaScript – Global Performance Period and Function Performance Period (April Fool Terminal Note: Special Note, Performed Period, During the Period, the context of the context, the context of the execution period, The context that is usually said is the value of this. Since JavaScript is based on a single-thread execution model, only one code can be performed each time.
  • For the above code, this process is shown in the figure:
  • The call stack of the above example code:

The program started from the global execution period on the stack (STACK).

When the HOISTING () function is called, a new function is executedThe context is pushed onto the stack (STACK) and the global execution period is suspended.

After the HOISTING () execution is completed, the HOISTING () executive context is popped from the stack (STACK), and the global execution period is restored. This process is self-explanatory, but it does not really explain the exception we see when the sample code is executed. When performing the execution of the context tracking code, the lexical environment tracking identifier is mapped to a particular variable. The lexical environment is basically an internal implementation of the JavaScript scope mechanism. Typically, the lexical environment is associated with a specific structure of the JavaScript code, such as a function or a FOR cycle code block. Whenever a function is created, the reference to the lexical environment created will be passed in an internal property named[[Environment]].

All of these terms covers a simple and very logical concept. Allow it to decompose. The lexical environment is an interesting name for tracking variables and functions in the block block. In addition to tracking local variables, function declarations, and parameters, each lexical environment also tracks their parent lexical environments. So the above sample code will be parsed in the JavaScript engine. The lexical environment of the above code, as shown: JavaScript中Hoisting详解 (变量提升与函数声明提升)


    If it is understood, please See the following three articles:
  • In-depth understanding of the scope of JavaScript and context
  • JavaScript core concept domain and closure
  • example analysis JavaScript Scope

In order to parse the identifier in the lexical environment, the JavaScript engine will check the reference to the current environment. If reference is not found, move to an external environment by using [Environment]]. This will continue until the identifier is found, or throws a ‘Not DEFined ‘(undefined) errors.

Basically, the implementation of JavaScript code is divided into two phases. The first phase registered all variables and function declarations in the current lexical environment. After completing, the second phase of JavaScript execution started!

So, in detail, the first phase: it works in two steps.

JavaScript中Hoisting详解 (变量提升与函数声明提升) Scans the code in the current function declaration. Function expressions and arrow functions are skipped. For each discovered function, a new function will be created and bind it to the environment using the function name. If the name of the identifier already exists, its value will be overwritten.

Then scan the variables of the current environment. Find the variable defined using the var and the variables other than other functions, and register an identifier, which is initialized to undefined. If an identifier is present, the value will remain unchanged.


Defined with let and const is a block variable, which is slightly different from VAR. Learn more in another article. Now you should have a certain understanding of the basic concept of the lexical environment, then let us return to the sample code and explain these issues.

    When setting the global context, the environment will be scanned and the HOANTING () function is attached to the identifier. Then in the next step, the variable NotyetDeclared is registered, and its value is initialized to undefined. Follow this step to continue to understand the code.
  • Now let’s explain the three issues raised in the sample code:
  • Chapter 6, why can the function declare before?
Section 1, the hoisting () function has been registered in the identifier, and when the JS code starts executing in the global execution period of the second phase, it will find the Hoisting language environment, and Find the function before it is defined.

Chapter 1, did not throw an error, because this time the variable NotyetDeclared does not exist?

Similarly, NotyetDeclared is registered to the identifier and initializes the undefined in the first phase, so no errors will not be thrown.
  • Chapter 4, NotyetDeclared has declared in the global scope, why is it in line 9 or undefined?

Now we enter the function hoisting environment. In the first stage, NotyetDeclared is registered and initialized to undefined, because in this lexical environment, NotyetDeclared variables have not been registered. If the 12th line does not contain a VAR keyword, then the situation is different. I hope that now you can clearly see that Hoisting in JavaScript is only to explain one of its principles. From a technical point of view, functions and variables will not move anywhere.

The above is the full content of this article, I hope this paper will bring a certain help to everyone’s learning or work, if you have any questions You can leave a message to communicate, thank you for your support of Tumi Cloud.

© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment