The difference between Javascript function declaration and function expression

The difference between Javascript function declaration and function expression

Javascript Function is everywhere and powerful! Javascript functions can make JS have some object-oriented features, realize encapsulation, inheritance, etc., and also make code reuse. But things have two sides. Javascript functions are sometimes more "willful". If you don't understand its "disposition", it is likely to create some unexpected troubles (bugs) for you.  

There are two types of Javascript Function:

1) Function Declaration;


// 
    function funDeclaration(type){
        return type==="Declaration";
    } 

2) Function Expression.


// 
    var funExpression = function(type){
        return type==="Expression";
    } 

The code above looks very similar, and it doesn't feel much different. But in fact, a "trap" in Javascript functions is reflected in the two types of function definitions in Javascript. Let's look at two pieces of code (marked as code 1 and code 2 respectively):


funDeclaration("Declaration");//=> true
    function funDeclaration(type){
      return type==="Declaration";
  }
funExpression("Expression");//=>error
      var funExpression = function(type){
        return type==="Expression";
   }
 funDeclaration funDeclaration 
 funExpression funExpression 
 Javascript Function 
 
 
 
 Javascript function hoisting( 
/
 <JavaScript >  

Code 1 JS function is equivalent to:


function funDeclaration(type){
        return type==="Declaration";
    }
    funDeclaration("Declaration");//=> true 

Code 2 JS function is equivalent to:


var funExpression;
    funExpression("Expression");//==>error
    funExpression = function(type){
        return type==="Expression";
    } 

When the above code runs, only the funExpression variable is defined, but the value is undefined. Therefore, function calls cannot be made on undefined. At this time, the assignment statement of funExpression has not been executed yet. In order to further deepen the difference between the two types of JS functions, a more confusing example is given below, please see the following code (code snippet 4):


var sayHello;
    console.log(typeof (sayHey));//=>function    
    console.log(typeof (sayHo));//=>undefined
    if (true) {
        function sayHey() {
            console.log("sayHey");
        }
        sayHello = function sayHo() {
            console.log("sayHello");
    }
    } else {
        function sayHey() {
            console.log("sayHey2");
        }
        sayHello = function sayHo() {
            console.log("sayHello2");
        }
    }    
    sayHey();//=> sayHey2    
    sayHello();//=> sayHello 

Analysis: sayHey is created with a function declaration. The JS compiler upgrades the function definition during JS parsing. That is to say, when parsing JS code, the JS compiler (conditional judgment does not form a new scope, two Each sayHey function definition is promoted beyond the conditional judgment) It is detected that there are two sayHey definitions with the same name in the scope. The first definition is promoted first, and the second definition is promoted (the second definition is in the first definition). Below), the second definition covers the first sayHey definition, so sayHey() outputs sayHey2; and sayHello is created with a function expression, and the content of the expression can only be determined when JS is running (not during parsing) (The conditional judgment here is effective), so the sayHello expression executes the first function definition and assignment, then sayHello() outputs sayHello.

The code of code segment 4 is actually equivalent to the following code (code segment 5):


var sayHello;
    function sayHey() {
            console.log("sayHey");
        }
    function sayHey() {
            console.log("sayHey2");
    }
    console.log(typeof (sayHey));//=>function    
    console.log(typeof (sayHo));//=>undefined
    if (true) {
       //hoisting...
        sayHello = function sayHo() {
            console.log("sayHello");
    }
    } else {
       //hoisting...
        sayHello = function sayHo() {
            console.log("sayHello2");
        }
    }    
    sayHey();//=> sayHey2    
    sayHello();//=> sayHello 

Some people may wonder if the definition of the function sayHey is the second one covering the first one? We can output the source code of sayHey, there are pictures and the truth, as shown in the following figure:

summary

There is a difference between function declarations and function expressions in Javascript. Function declarations are promoted during JS parsing. Therefore, in the same scope, no matter where the function declaration is defined, the function can be called. The value of a function expression is determined when JS is running, and the function can be called after the expression assignment is completed. This slight difference may lead to unexpected bugs in the JS code and let you fall into an inexplicable trap.

Finally, attach the core steps of the two functions sayHello and sayHey in code segment 4 (personal understanding, if you have any objections, please leave a message to discuss):

The figure above is a schematic diagram of the main steps executed by the sayHello function.

Original Published time: March 31, 2018
the original author: Zhangze Li

This article Source: Open Source China for reprint please contact the original author