javascript - Explain this function definition

Question

General definition function

const foo = function(){console.log('666')}; 
foo(); //666

or

function foo(){console.log('666')}; 
foo(); //666

So what is the explanation below?

const foo = function foo(){console.log('666')}; 
foo(); 

Answer 1

Actually, the questioner thinks the third way of writing is strange and seems useless, because he doesn’t understand the correct usage of this way of writing. The second example is more intuitive

To put it simply, the first and third are both function expressions, and the second is a function declaration. The third one is a more special function expression with special abilities.

To explain this problem, we need to understand 'What, How, Why'.

So the main difference between the first and second one is that the timing of their declarations is inconsistent. Function expressions will only assign values ​​to variables when the code is executed to that statement, while function declarations will be assigned when entering the current function execution context. Assign value in advance.

Intuitive example

console.log(foo); // undefined

var foo = function(){};
 
console.log(foo); // function(){}


console.log(bar); // function(){}

function bar() {}

console.log(bar); // function(){}

For the third type, the intuitive example is this

console.log(foo); // undefined

var foo = function bar(){
    console.log(bar); // function(){...}
    console.log(foo); // undefined
};
 
console.log(foo); // function(){}
console.log(bar); // undefined

So you can see the difference. The function identifier written in this way is different from the function declaration. It can be accessed inside the function, but cannot be accessed outside the function. So we see it written like this in many places. One advantage is that when calling itself when using recursion, the function has a name, which is more intuitive

Why is this happening?

When the browser parses, it actually pays the identifier after the expression to the current function object, so in the above example

foo.name; // bar

In the execution context within the function, the current function object is in the scope, so it can be called internally

Above

Answer 2

Add an explanation to the third definition: It itself is a function expression, not a function definition statement. A function expression can have a function name, but this function name can only be used in the function expression For internal use.
Refer to the Javascript Definitive Guide 8.1 Function Definition section:

Answer 3

There are many ways to define functions in MDN JavaScript functions:

• Function declaration (function statement)

• function expression

• Function generator declaration (function* statement)

• Function generator expression (function* expression)

• Arrow function expression (=>)

• Function constructor

• Constructor of generator function

For the original poster’s question, we only talk about function declarations and function expressions.

1) Function declaration

function name([param[, param[, ... param]]]) { 
    statements 
}

2) Function expression

let function_expression = function [name]([param1[, param2[, ..., paramN]]]) {
   statements
};

name is optional. When the function name name is omitted, the function becomes an anonymous function.

Seeing this, there is no need to continue talking about why there is a third way of writing, otherwise it will be really confusing, but here I have to talk about the difference between function declaration and function expression, which is mainly reflected in the issue of variable promotion:

JavaScript only hoists declarations, not initializations. There is variable promotion under function declaration, but not under function expression. Therefore, function expression calls the function first and then declares the function and an error will be reported.

Answer 4

The firstfoo => The unnamed function
The third foo => The named function

But the execution contents of the two function are the same. They both assign this function to foovariable initialization object

As for the second one, just declare a function normally and then call the function

Answer 5

The third type is assignment operation! Assign function to foo! If you use foo before, it is the same as using an undefined variable in advance! If you console.log(foo) after the piece of code you wrote to print the entire function, adding a () will naturally call this function!
Just remember that the single equal sign is always an assignment operation in js, and the right side of the equal sign is the content of the assignment! Don't think about it too much! Even if you write 100 more functions after the equal sign, it will only be an assignment at most!