Function expressions and function declarations in JavaScript and how function declarations differ from function expressions

Function expressions and function declarations

In ECMAScript, the two most common ways to create functions are function expressions and function declarations, the difference between which is somewhat confusing because the ECMA specification specifies only one point: a function declaration must have an identifier (Identifier) (commonly known as the name of the function), whereas a function expression can omit this identifier:

Function declaration:

function function name (argument: optional){function body}

Function expression:

function function name (optional) (argument: optional){function body}

So, you can see that if you don't declare a function name, it's definitely an expression, but if you do declare a function name, how do you decide whether it's a function declaration or a function expression? ECMAScript is distinguished by context; function foo(){} is a function expression if it is part of an assignment expression, and function foo(){} is a function declaration if it is contained within a function body or at the top of the program.

 function foo(){} //  Declare, because it's programmed 1 Part of the 
 var bar = function foo(){}; //  Expression, because it's an assignment expression 1 Part of the 
 new function bar(){}; //  Expression, because it is new expression 
 (function(){
  function bar(){} //  Declare, because it's the body of the function 1 Part of the 
 })();

One less common type of function expression is enclosed in parentheses (function foo(){}). It is an expression because the parentheses () is a grouping operator that can only contain expressions inside. Let's look at a few examples:

function foo(){} // function declaration
(function foo(){}); // Function expressions: included in grouping operators

Named function expression

var bar = function foo(){}; Is a valid named function expression, but one thing to keep in mind is that this name is only valid within the scope of the newly defined function, because the specification states that the identifier cannot be valid within the scope of the periphery:

 var f = function foo(){
  return typeof foo; // foo It's valid within the internal scope 
 };
 // foo Used externally is not visible 
 console.log(typeof foo); // "undefined"
 console.log(f()); // "function"
var f = function foo(){
return foo; // foo It's valid within the internal scope 
};
// foo Used externally is not visible 
console.log(typeof foo); // "undefined"
console.log( f()==f); // "function"
console.log(f.name);//foo

Now, if we want to do that, what is the use of a named function expression? Why do we name them?

As we said at the beginning: giving it a name makes debugging easier, because when debugging, if each item in the call stack has its own name to describe, then debugging process is very pleasant, not a good feeling.

ps: Difference between function declarations and function expressions in JS

The function declaration in Js refers to the following form:

function functionName(){ 
} 

A function is declared in this way, while a function expression is declared in the same way as an expression, such as:

     var functionName = function(){ 
}

Many friends may be confused when they see these two ways of writing, these two ways of writing are similar, it seems that they are also feasible in the application, so what is the difference between them?

In fact, js's parser does not treat function declarations and function expressions as peer friendly. For function declarations, js parser will read first, ensure that declaration has been parsed before all code execution, and function expression, like other basic types of variables 1 sample, only when performing to a 1 sentence for parsing, so in practice, they will still have differences, embodied in, when using the form of function declaration to define the function, can call statements written before the function declaration, while the latter, do so would be an error.