In the case of Javascript function declarations, the following applies as a reminder of how execution context works in Javascript (also known as precompiling). Literally, “variable promotion” means that variable and function declarations are physically moved to the front of the code. The position in the code will not be moved, but will be put in memory at compile time in a different order from the code. Although the improvement of variable function declaration has little impact on the actual coding, especially now the popularity of ES6, but as a front-end is a basic knowledge, must master, is one of the knowledge points that many large factories must ask in front of the interview. It’s nothing new to share here, just as a study note to speed up your understanding.

Variables are known to be products of var and function in ES5, while let and const in ES6 do not have variables promoted.

Variable ascension

The way the JavaScript engine works is it parses the code, gets all the declared variables and functions, and then runs them line by line. As a result, all variable declarations will be pushed to the head of the code. This is called the following in the case of variable elevation.

Here’s how to declare variables, including functions:

function hoistingVariable() { if (! devpoint) { var devpoint = 1; } console.log(devpoint); } hoistingVariable(); // Here is the output // 1Copy the code

The scope of the variable is the body of the function. When parsing, we look for the declared variable in that scope. Although devpoint is not declared in if, according to the rule of variable promotion, the variable declaration is promoted to the first line of the function, but no value is assigned. The actual effect is equivalent to the following code:

function hoistingVariable() { var devpoint; if (! devpoint) { devpoint = 1; } console.log(devpoint); } hoistingVariable();Copy the code

Next, add some confusing code like this:

var devpoint = "out"; function hoistingVariable() { var devpoint; if (! devpoint) { devpoint = "in"; } console.log(devpoint); } hoistingVariable(); console.log(devpoint); // Here is the output // in // outCopy the code

For the declaration of the same name, the personal understanding is to find the scope first, the nearest principle, the function body declaration (if there is a declaration var), only look for the function inside the search, is not affected by the function outside the declaration.

Remove the declaration statement from the above function body, and the output is different.

var devpoint = "out"; function hoistingVariable() { if (! devpoint) { devpoint = "in"; } console.log(devpoint); } hoistingVariable(); console.log(devpoint); // The following is the output // out // outCopy the code

After the declaration is removed from the body of the function, you need to find the declaration outside the body of the function. According to this statement, the if statement inside the function will not be executed if it is declared and assigned.

The following code adjusts the order of assignments as follows:

var devpoint; function hoistingVariable() { if (! devpoint) { devpoint = "in"; } console.log(devpoint); } devpoint = "out"; hoistingVariable(); console.log(devpoint); // The following is the output // out // outCopy the code

As stated above, the variables in the function body are declared externally, but not assigned, and the function is promoted and for execution. Assign a value to Devpoint before the function is executed, and then it becomes out.

Function increase

As mentioned above, variable promotion also includes the declaration of functions, and different methods of function declaration are executed differently. This kind of problem is straight into the code.

function hoistingFun() { hello(); function hello() { console.log("hello"); } } hoistingFun(); // Here is the output // helloCopy the code

The above code works because the function declaration is promoted, and the hello function is promoted to the top. It works as follows:

function hoistingFun() { function hello() { console.log("hello"); } hello(); } hoistingFun(); // Here is the output // helloCopy the code

If you declare the same function in the same scope, the following function overwrites the previous one.

function hoistingFun() { hello(); function hello() { console.log("hello"); } function hello() { console.log("hello2"); } } hoistingFun(); // The following is the output // hello2Copy the code

Both function declarations are promoted, in the order in which they are declared, overriding the previous declarations.

In this case, the function declaration takes precedence over the variable declaration. The function declaration takes precedence over the variable declaration. In this case, the function declaration takes precedence over the variable declaration.

function hoistingFun() { hello(); function hello() { console.log("hello"); } var hello = function () { console.log("hello2"); }; } hoistingFun(); // Here is the output // helloCopy the code

The above code has the following compilation logic:

function hoistingFun() { function hello() { console.log("hello"); } hello(); hello = function () { console.log("hello2"); }; } hoistingFun(); // Here is the output // helloCopy the code

Let’s look at an example of declaring variables externally and functions internally:

var hello = 520; function hoistingFun() { console.log(hello); hello = 521; console.log(hello); function hello() { console.log("hello"); } } hoistingFun(); console.log(hello); // [Function: hello] // 521 // 520Copy the code

As mentioned above, a variable or function declared in the body of a function only acts on the body of the function. It is limited to the body of the function and is not affected by external declarations. The compiled logic of the above code is as follows:

var hello = 520;

function hoistingFun() {
    function hello() {
        console.log("hello");
    }
    console.log(hello);

    hello = 521;
    console.log(hello);
}
hoistingFun();
console.log(hello);
Copy the code

In variable declarations, functions take first place, always at the top of the scope, followed by the execution order of function expressions and variables.

Look at the following code:

var hello = 520; function hello() { console.log("hello"); } console.log(hello); // Here is the output // 520Copy the code

Based on the principle that function declarations have the highest priority, the execution logic of the above code is as follows:

function hello() {
    console.log("hello");
}
hello = 520;
console.log(hello);
Copy the code

Why promote?

As for why to promote, here do not do detailed introduction, provide some reference articles, interested can go to check

  • “Note 4. Two Words About” Collieries “”
  • Understanding Variable Promotion in JavaScript by Nature

Best practices

In modern Javascript, there are many ways to avoid the problem of raising variables. Using lets and const instead of var, using tools such as ESLint to avoid repeating variable definitions, and in some front-end development teams, you can do some formalize scaffolding for the team. For example, project initialization forces a project’s directory, esLint’s optimal configuration, and so on, procedural specification is more reliable than human prodding.

Var var var var var var var var var var var var var var var var var var

console.log("1a", myTitle1); if (1) { console.log("1b", myTitle1); var myTitle1 = "devpoint"; } if (1) {// here the code is having an error that cannot be executed console.log("3c", myTitle2); const myTitle2 = "devpoint"; } // Here is the output // 1a undefined // 1b undefinedCopy the code

conclusion

Through self-learning variable function improvement, I have deepened my understanding of it. I can confidently give answers to similar questions involved in the front-end interview, which is a kind of harvest.