A comprehensive understanding of function declarations and function expressions, variable elevation _javascript techniques

How a function is declared

There are usually two ways to declare a function when you define it:

Foo () {};   function declares
var foo = function () {};  function expression

The difference

1, function expression followed by parentheses can be directly executed
2. The function declaration will be resolved in advance

Pre-resolution

Let's take a look at the first example:

Foo ();     function declaration
Foo_later ();   Foo_later is not a function

function foo () {console.log (' function declaration ');}
var foo_later = function () {Console.log (' function expression ');}

As you can see, the function declaration foo is parsed, it can be executed before its own code, and the function expression Foo_later is not. To solve this problem, we first need to find out the working mechanism of the JavaScript parser.

Variable elevation (hoist)

The javascript parser moves variables and function declarations forward (hoist) within its scope, that is, the example above is actually parsed by the parser into the following form:

function foo () {console.log (' function declaration ');}  The function declaration is all in advance
var foo_later;   A function expression (variable declaration) only moves the variable forward, and the assignment operation is not in advance

foo ();       
Foo_later ();   


Foo_later = function () {Console.log (' function expression ');}

This also explains why calling a function before a function expression returns an error because it has not been assigned, just an undefined variable and of course cannot be executed.

Again, we can try to guess the output of the following code:

Console.log (declaredlater);  

var declaredlater = "Now it ' s defined!";

Console.log (Declaredlater);  

This piece of code can be parsed into a form:

var Declaredlater;     

Console.log (declaredlater);  Undefined

declaredlater = "Now it ' s defined!";

Console.log (declaredlater);  Now it ' s defined!

The variable declaration is referred to as the first (so there is no error that the variable does not exist), but the assignment is not advanced, so the first output is undefined.

It is to be noted that

Because function declarations are resolved, do not use this method to declare different functions. Try to guess the output of the following example:

if (true) {
 function aaa () {
  alert (' 1 ');
 } 
}
else{
 function aaa () {
  alert (' 2 ');
 }

AAA ();

Unlike what we expected, the code pops up "2". This is because two function declarations are resolved before the IF statement is executed, so if statements are not used at all, the following function is executed directly when calling AAA ().

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 entire "Being advanced"

• When a function is assigned to a variable as a value, only the variable is "advanced" and the function is not "advanced"

Try to feel more about yourself by practicing the example above. Also, as a best practice: The variable declaration must be placed at the top of the scope/function (JavaScript has only function scopes!). ）。

The above comprehensive understanding of function declaration and function expression, variable ascension is small to share all the content of everyone, hope to give you a reference, but also hope that we support the cloud habitat community.