Comprehensive understanding of function declarations, function expressions, and variable promotion

How to declare functions

There are usually two ways to declare a function:

 foo(){}; // Function declaration var foo = function(){}; // Function expression

The difference

1. Function expression can be executed directly with brackets after it

2. Function declaration will be pre-parsed in advance

Pre-analysis

Let's first look at an example:

 foo(); // Function declaration foo_later(); // foo_later is not a functionfunction foo(){ console.log('function declaration'); }var foo_later = function(){ console.log('function expression'); }

As you can see, the function declaration foo is preparsed, and it can be executed before its own code; the function expression foo_later cannot. To solve this problem, we must first figure out the working mechanism of the JavaScript parser.

Variable boost (hoist)

The JavaScript parser will hoist the variables and function declarations in its own scope. That is to say, the above example is actually understood and parsed by the parser into the following form:

 function foo(){ console.log('function declaration'); } // All function declarations are advanced var foo_later; // Function expressions (variable declarations) only advance the variables, and the assignment operation is not advanced foo(); foo_later(); foo_later = function(){ console.log('function expression'); }

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

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

 console.log(declaredLater); var declaredLater = "Now it's defined!";console.log(declaredLater);

This code can be parsed into the following form:

 var declaredLater; console.log(declaredLater); // undefineddeclaredLater = "Now it's defined!";console.log(declaredLater); // Now it's defined!

The variable declaration is mentioned first (so no error in the variable exists will be reported), but the assignment is not advanced, so the first output result is undefined.

It should be noted that

Since function declarations are preparsed, 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 with "2". This is because the two function declarations are pre-parsed before the if statement is executed, so the if statement is useless at all. When aaa() is called, the following function is directly executed.

Summarize

Through the above explanation, we can summarize it as follows:

•The declaration of the variable is advanced to the top of the scope, and the assignment remains in place

• Function declaration of the entire "before"

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

Experience it more by practicing the above examples. Also, as a best practice: variable declarations must be placed at the top of the scope/function (JavaScript only has function scope!).

The above article comprehensively understands function declarations, function expressions, and variable improvement is all the content I share with you. I hope you can give you a reference and I hope you can support Wulin.com more.