Function declarations are different from function expressions

Function declaration

Function declarations directly use the function keyword followed by a function name that takes a parameter to the function, such as defining a function that takes the sum of two numbers, as shown in the following example.

function sum(num1, num2) { alert(num1 + num2); } the sum (1, 2); // The pop-up window displays: 3Copy the code

One of the most important features of function declarations is function declaration promotion, which means that the function declaration is read before the code is executed. Whether the function declaration is written first or after, the function declaration will be improved.

The following code executes normally:

The sum (1, 2); Function sum(num1, num2) {alert(num1 + num2); }Copy the code

Functional expression

Declare an anonymous function that assigns a value directly to an event

window.onload = function() {
    alert('Hello');
}
Copy the code

Assign an anonymous function to a variable using an anonymous function expression.

Var func = function(){} var func(); var show = function() { alert('Hello'); }; show(); Hello / / play windowCopy the code

This form looks like a regular variable assignment statement. The difference between a function expression and a function declaration, however, is that the function expression must be assigned before it can be used. So this code will execute in error:

show(); Var show = function() {alert('Hello'); var show = function() {alert('Hello'); };Copy the code

[Note] : When using an anonymous function expression, the function call statement must be placed after the function declaration statement!!

The anonymous function has not been assigned to the show variable. If the function is called before the expression, the error “show is not a function.

This happens because when the parser loads data into the execution environment, the parser reads the function declaration first and makes it available before any code is executed. In the case of functional expressions, they are not actually parsed until the parser reaches the line of code on which they reside. Functions created in function expressions are called anonymous functions because there is no identifier after the function keyword.

The difference between the two

Function f = function() {// f} function f() {// f} function f() {// f}Copy the code

First, the significant differences:

  • In the first declaration, the var declaration, functions can only be called after the var statement has been declared

  • The second declaration is the function declaration. Functions can be called before the function declaration

And that’s because,

  • In the first case, the function expression is assigned to the variable F at run time

  • In the second case, the function expression is assigned to the identifier F before the code runs, in the code parsing phase

Here are two examples to prove this:

Corresponding to the first case:

var fn = function () {
     // F1
}

console.log(fn) 
    
fn = function () {
     // F2
}
Copy the code

The result of console is

ƒ fn() {// F1}Copy the code

Because assignments occur during code run time, the code can only fetch previous assignments from where it runs console.log(fn) up and down

Corresponding to the second case:

function fn() {
      // F1
}

console.log(fn)
    
function fn() {
      // H2
}
Copy the code

The result of console is

ƒ fn() {// F2}Copy the code

Because the assignment occurs during code parsing, the parsing is already complete when the code runs to console.log(fn), and the result of parsing is the function fn behind it, so this result is printed

At runtime, JS code is divided into two parts — check the load phase and the execution phase.

Check the loading stage: it will detect the syntax error of the code first, and declare variables and functions

Execution stage: variable assignment, function call, etc., all belong to the execution stage.

How anonymous functions are called

Anonymous functions are functions that have no name.

Calls to expressions

const add = function (x, y){
    return x + y;
}
const sum = add(1, 2)

console.log(sum)
Copy the code

Anonymous function call

Const sum1 = function(x, y){return x + y; } (1, 2); Const sum = (function(x, y){return x + y; const sum = (function(x, y){return x + y; }) (1, 2); console.log(sum1); // new Function("x","y","return x+y") (1,2)Copy the code

Self-executing anonymous functions

Self-executing functions are defined and called together. We create an anonymous function and execute it immediately. Since external variables cannot reference it, it is released soon after execution. Crucially, this mechanism does not pollute global objects.

Let’s look at some of the more interesting expressions of self-executing functions:

/ / the following two bracket () will be executed immediately (function () {/ * code * /} (), / / it is recommended to use this (the function () {/ * code * /}) () / / / / but this is also can be used Var I = function () {return 10; var I = function () {return 10; var I = function () {return 10; } (); true && function () { /* code */ } (); 0, function () { /* code */ } (); If you don't care about the return value, or if you're not afraid of being difficult to read, you can even add unary operations to function! function () { /* code */ } (); ~function () { /* code */ } (); -function () { /* code */ } (); +function () { /* code */ } (); // The new keyword can also be used, But I'm not sure its efficiency / / http://twitter.com/kuvos/status/18209252090847232 new function () {/ * code * /} new function () {/ * code */} () // If you want to pass arguments, just add parentheses ()Copy the code