Detailed explanation of the use of JavaScript functions

1. Declare a function
2. Calling a function
3. Function Parameters
4. Function return value
5. Use of arguments
6. A function can call another function
7. Two ways to declare a function
Summarize
1. Declare a function
2. Calling a function
3. Function Parameters
4. Function return value
5. Use of arguments
6. A function can call another function
7. Two ways to declare a function
Summarize

1. Declare a function

//Declare function function name() {
    //Function body code}

Function is a keyword for declaring a function. It must be lowercase. Since functions are generally defined to achieve a certain function, we usually name the function as a verb, such as getSum.

2. Calling a function

//Call function function name(); //Execute the function body code by calling the function name

The code in the function declaration itself will not be executed. The function body code will only be executed when the function is called.

3. Function Parameters

When declaring a function, you can add some parameters in the parentheses after the function name. These parameters are called formal parameters. When calling the function, you also need to pass corresponding parameters. These parameters are called actual parameters.

parameter	illustrate
Parameters	The parameters passed when the formal parameter function is defined are currently unknown.
Actual parameters	In fact, the parameter actual parameter passed when the parameter function is called is passed to the formal parameter

The role of parameters: Some values inside a function cannot be fixed. We can pass different values into the function through parameters when calling the function.

The problem of mismatch between the number of function parameters and actual parameters

Number of parameters	illustrate
The number of actual parameters is equal to the number of formal parameters	Output correct result
The number of actual parameters is greater than the number of formal parameters	Only the number of formal parameters is obtained
The number of actual parameters is less than the number of formal parameters	If multiple parameters are defined as undefined, the result is NaN.

function sum(num1,num2) {
    console.log(num1+num2);
}
sum(100,200); //The number of actual parameters is equal to the number of formal parameters, so the correct result is output sum(100,400,500,700); //The number of actual parameters is greater than the number of formal parameters, so only the number of formal parameters is taken sum(200); //The number of actual parameters is less than the number of formal parameters, so the formal parameters are defined as undefined, and the result is NaN

In JavaScript, the default value of a parameter is undefined.

4. Function return value

Often use return to return function values

return terminates the function

function add(num1,num2) {
    //Function body return num1+num2; //Note: the code after return will not be executed alert('There is a return before, I will not be executed');
}
var resNum = add(21,6); //Call the function, pass in two arguments, and receive the function return value through resNum alert(resNum); //27

If the function has a return, it returns the value after the return; if there is no return, it returns undefined.

The difference between break, continue and return

break : End the current loop (such as for, while)
continue : jump out of the current loop and continue to execute the next loop (such as for, while)
return : Not only can it exit the loop, but it can also return the value in the return statement and end the code in the current function body.

5. Use of arguments

When we are not sure how many parameters are passed, we can use arguments to get them. In JavaScript, arguments is actually a built-in object of the current function. All functions have a built-in arguments object that stores all the actual parameters passed.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function fn() {
            console.log(arguments); //It stores all the passed arguments console.log(arguments.length);
            console.log(arguments[2]);
            //You can traverse arguments as an array
            for (var i = 0; i < arguments.length; i++) {
                console.log(arguments[i]);
            }
        }
        fn(1, 2, 3);
        fn(1, 2, 3, 4, 5);
        //Pseudo-array is not a real array //1. It has the length property of an array //2. It is stored in an indexed manner //3. It does not have some methods of a real array such as pop() push(), etc.</script>
</head>
<body>
</body>
</html>

insert image description here

6. A function can call another function

function fn1() {
   console.log(111);
   fn2();
   console.log('fn1');
}
function fn2() {
   console.log(222);
   console.log('fn2');
}
fn1();

7. Two ways to declare a function

//1. Use function keywords to define custom functions (named functions)
function fn() {
}
fn();
//2. Function expression (anonymous function)
//var variable name = function() {};
var fun = function(aru) {
    console.log('I am a function expression');
    console.log(aru);
}
fun('FG');
//(1) fun is a variable name, not a function name //(2) The way to declare a function expression is similar to declaring a variable, except that the variable stores a value while the function expression stores a function //(3) Function expressions can also pass parameters

Summarize

This article ends here. I hope it can be helpful to you. I also hope you can pay more attention to more content on 123WORDPRESS.COM!