"Advance (hoist)" For variables and function declarations in JavaScript

Variable declaration "was advanced"

The syntax of JavaScript is similar to C, Java, C #, and is collectively referred to as Class C syntax. Students with C or Java programming experience should be familiar with the "declare first, later use" rule, and if you use an undeclared variable or function, you will get an error during the compile phase. However, JavaScript is able to use them before variables and functions are declared. Let's take a closer look at the mystery.

Take a look at the code first:

(function () {  //referenceerror:nosuchvariable is not defined  console.log (nosuchvariable);}) ();

Running the above code immediately error, but this is what we expect, because the nosuchvariable variable is not defined at all! Then take a look at the following code:

(function () {  //outputs:undefined  Console.log (declaredlater);  var declaredlater = "Now it ' s defined!";  Outputs: "Now it ' s defined!"  Console.log (Declaredlater);}) ();

First of all, the above code is correct and there is no problem. But, why not the error? The declaredlater variable is defined after the call statement? Why is the output of undefined?

This is actually a JavaScript parser, the parser will put all the variables and functions declared in the current scope at the beginning of the scope, but only the declaration of the variable is advanced to the beginning of the scope, and the assignment operation is left in place. The code above for the parser actually looks like this:

(function () {  var declaredlater;//Declaration is advanced to the scope at the beginning!  //outputs:undefined  Console.log (declaredlater);  Declaredlater = "Now it ' s defined!"; Assignment operation is still in place!  Outputs: "Now it ' s defined!"  Console.log (Declaredlater);}) ();

This is why the above code does not report the reason for the exception! After the variables and functions have been "advanced", the Declaredlater variable is actually placed in front of the calling function and, according to the JavaScript syntax, the declared and unassigned variables are automatically assigned to undefined, so the first print The value of the Declaredlater variable is undefined, which is then assigned to the Declaredlater variable, so the second re-print variable will output now it's defined!.

Let's look at one more example:

var name = "Baggins";(function () {    //Outputs: "Original name was undefined"    console.log ("Original name is" + N AME);    var name = "Underhill";    Outputs: "New name is Underhill"    console.log ("New name is" + name);}) ();

In the above code, we first declare a variable name, we want to be able to print the name variable for the first time to output the name variable defined in the global scope, and then define a local name variable in the function overrides the global variable, and finally output the value of the local variable. The result of the first output, however, is completely inconsistent with our expectations, because the local variables we define are "ahead" in their scope, that is, they become the following form:

var name = "Baggins";(function () {    var name;  Note: The name variable is in advance!    //Outputs: "Original name was undefined"    console.log ("Original name is" + name);    Name = "Underhill";    Outputs: "New name is Underhill"    console.log ("New name is" + name);}) ();

Because JavaScript has this "quirks", you'll see that many coding guidelines suggest that you put variable declarations at the top of the scope so you can always remind yourself.

function declaration "Advanced"

The front is about variables, and then we're talking about functions.

The function is "advanced" in two cases, one is a function declaration, the second is a function as a value assigned to the variable.

First of all, on the code:

Outputs: "Yes!" isithoisted (); function isithoisted () {      console.log ("yes!");}

As shown above, the JAVASCRIPT interpreter allows you to use before the function declaration, that is, the function declaration is not just the function name "is advanced", the definition of the entire function is "advanced"! So the above code can be executed correctly.

Consider the second case: The function is assigned as a value to the variable. (Do you remember?) In JavaScript, a function can also be given a variable as a value! ) or the code first:

Outputs: "Definition hoisted!" Definitionhoisted ();//typeerror:undefined is not a functiondefinitionnothoisted (); function definitionhoisted () {      console.log ("Definition hoisted!");} var definitionnothoisted = function () {      console.log ("Definition not hoisted!");};

We made a comparison in which the definitionhoisted function was executed properly, conforming to the first type; the definitionnothoisted variable was "advanced", but his assignment (that is, the function) was not advanced, from this point on, And the variables we talked about earlier are exactly the same, and because the default value of the "advanced" variable is undefined, the reported error is "Type mismatch" because undefined is not a function, and of course it cannot be called.

Summarize

The above explanation can be summarized as follows:

• The declaration of a variable is advanced to the top of the scope, and the assignment remains in place
• function declaration the entire "being ahead"
• When a function is assigned to a variable as a value, only the variable is "advanced" and the function is not "advanced"

Feel more about yourself by practicing the above examples. Also, as a best practice: variable declarations must be placed at the top of the scope/function (JavaScript has only function scopes!). ）。

This article source: http://www.bootcss.com/article/variable-and-function-hoisting-in-javascript/

(RPM) "Advance (hoist)" For variables and function declarations in JavaScript