Javascript variable Declaration

This article is also posted on another independent blog http://qingbob.com/blog/%E8%B0%88javascript%E5%8F%98%E9%87%8F%E5%A3%B0%E6%98%8E

This article is a basic review and a summary of the interview experience.

I encountered an interview question in my previous interview.

var a =10;
(function(){    console.log(a);
    var a =20;}
)()

• What are the results of the 5-line code log?
• Ifvar a = 20;Andconsole.log(a)What about statement order reconciliation?

The answer to this question isundefined. Not 10.

The key is that the javascript variable Declaration has a hoisting mechanism, and the variable declaration will always be promoted to the top of the scope (note that the test is only a declaration and has not been assigned a value ). In fact, the preceding statement is equivalent:

Var a = 10;
(Function (){
Var a; // declare the variable hoisting first.
Console. log (a); a = 20; // revalue
})()

 

A little more simplified:

Bla = 2
Var bla;

// This is a split line, and the effects of upstream and downstream code are the same

Var bla; bla = 2;

That is, use it first and then declare it (note that the declaration has not been assigned a value). In this way, the declaration and value assignment are separated. Therefore, we recommend that you declare the variables you need at the top of the function.

Likewise, we can understand that the following code also reports an error.

F () // obviously there is a mistake here, because f has not been assigned a function
Var f = function () {console. log ("Hello ");
}

But there is a problem. If I modify the function declaration in the above example f, will it still report an error?

F () // can it be run?
Function f () {console. log ("Hello ");
}

Here I want to emphasize the two types of function declarations.var f = function () {}Andfunction f() {}Difference.

In fact, all function declarations in javascript (Function declarations) And variable Declaration (Variable declarations) Will be promoted to the top of their scope. Note that there is only one function Declaration, that isfunction f() {}. Whilevar f = function () {}What is it? You can think of it as assigning an anonymous function (you can also take the function name, which will be explained below) to a variable.

In the above two examples, we also want to implement the effect of first use and then definition. Only the second method is useful. Although function f is defined after it is used, in the javascript interpreter, it is still defined before the execution statement.

In the first example, the execution result is as follows:

Var f; f () // no function is defined. Of course, f = function () {console. log ("Hello") cannot be executed ");
}

In this case, although javascript allows execution before declaration,But do not do this. Please follow the good habit of declaring and then using it.

Let's look at another situation. If I define the previous function

var f =function(){};

1. Add the function name to the anonymous function on the right.
2. Execute a function using the function name on the right
3. Can it be successful?

var f =function ab(){};ab();

The answer is no, because the above Code defines the f functionNamed Function Expressions)Instead of the real function declaration,Note that this function name is only useful in the function scope.. The following code fully demonstrates its significance:

var f =function foo(){
    return typeof foo;
};

typeof foo;// "undefined"f();// "function"

 

So what is the significance of such a statement? Well, as far as the information I have found, the advantage of doing so is that it is easy to debug.

Next, let's look at some unexpected edges. Although I think a programmer may find it a bit difficult to write the following code, and it should be avoided in practice, it is worth mentioning as an exam question. For example, compare the following two pieces of code:

function value(){
    return 1;
}

var value;alert(typeof value);//"function"

function value(){
    return 1;
}

var value =1;alert(typeof value);//"number"

What I want to explain in the first code is:The function declaration overwrites the variable declaration.Note that the declaration has not been assigned a value. For example, in the Code, although the variable with the same name is declared again after the function, the result of typeof is still function

The second part of the code is as follows:Function declaration does not overwrite variable assignment or Initialization, As shown in the code.

Name Resolution Order

Why is the above result? Why does the function declaration overwrite the variable declaration. This is because name resolution order. I don't know how to translate this term.Name Resolution SequenceRight.

In javascript, a variable name can enter the scope in four ways.

• Language built-in, All scopes havethisAndargumentsKeywords
• Format parametersFunction parameters are valid throughout the scope.
• Function Declaration
• Variable Declaration

The four orders listed above are the order of the highest priority (I keep this in mind. The test result is that the priority of parameters and functions is higher than that of built-in languages. You can name the formal parameter arguments or define a function named arguments, the built-in argument of the result is overwritten.), Once a variable name has been declared, it cannot be overwritten by other lower-priority variable declaration forms.

References:

• Named function expressions demystified
• Function-declarations-vs-function-expressions
• JavaScript Scoping and Hoisting
• Answering Baranovskiy's JavaScript quiz