In-depth analysis of JS functions

This time I will bring you an in-depth analysis of JS functions. What is the difference between function declaration and function expression? What are the precautions for using JS functions? The following is a practical case, let’s take a look.

What is the difference between function declaration and function expression (*)

Function declaration: function bar() {}
Function expression: var fuc = foo(){}
1. The function bar will be hoisted before the entire program is executed, so it is available in the entire scope of the specified bar function. There is no problem even if it is called before the function is defined.
2. For function declarations, the name of the function is required, but for function expressions it is optional. Therefore, anonymous function expressions and named function expressions appear.
3In this function

var foo = function bar() {
bar(); // Works};
bar(); // ReferenceError命名函数bar赋值给了变量foo，所以在函数声明外是不可见的，但在bar`函数内部仍然可以调用。这是因为Javascript对命名函数处理的机制，函数的名称永远在函数内部的作用域中有效。

What is the declaration prefix of a variable? What is function declaration prefix (**)

The so-called variable declaration prefix means that in a scope block, all variables are declared at the beginning of the block. The following is an example of three pieces of code:
Code 1:

var a = 1;
function main() {
console.log(a);//1
}
main();//输出1`

Code 2:

1 var a = 1;
2 function main() {
3  console.log(a);
4 var a = 2;
5 }
6 main()//输出undefined

Code 3: Why does code 2 output undefined

1 var a = 1;
2 function main() {
3 var a;
4  console.log(a);
5 a = 2;
6 }

The declaration of a function is to promote the entire function to the front of the current scope (behind the preceding variable declaration).

var num = 1;
console.log(doubleNum(num));//2
function doubleNum(num){ return num2;}

is equivalent to

//函数的声明前置
var num;
function doubleNum(num){ return num2;}
num = 1;
console.log(doubleNum(num));//2

What is argument (*)

arguments is an array-like object. Represents the parameter list passed to a function. All parameters of a function can be obtained inside the function by using the arguments object. This object creates an entry for each argument passed to the function, with entries indexed starting from 0.

How to implement overloading of functions (**)

can be achieved through the length of arguments and the type of parameters. Example:

function sumOfSquares(a, b, c){
if(arguments.length<3){
c = 0;
}
return aa+bb+c*c
}
sumOfSquares(2,3,4);   // 29
sumOfSquares(1,3);   // 10

What is the expression to execute the function immediately? What does it do (***)

Immediate execution of a function usually has the following two ways of writing:
(function(){...})();
(function(){ .. .}());//Recommended to use
In Javascript, a pair of parentheses "()" is an operator, following the function name, indicating that the function is called.
Reference-Immediate execution function in JavaScript

What is the scope chain of a function (****)

Scope is the accessible range of variables and functions, controlling variables And the visibility and life cycle of functions. The scope of variables in JavaScript has global scope and local scope.
The scope chain is when the code is executed in an environment, a scope chain (scope chain, not referred to as sc) of the variable object will be created to ensure orderly access to the variables and functions that the execution environment has access to. The first object in the scope is always the variable object (VO) of the environment where the currently executing code is located

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Related reading:

How to use CSS3 to create a login box

##JavaScript array-string-mathematical function

JS Dom and event summary

The above is the detailed content of In-depth analysis of JS functions. For more information, please follow other related articles on the PHP Chinese website!