Let’s talk about the definition and basic use of JavaScript functions

1. Define with function statements

Let’s give an example first. The function of this function is to return the sum of array elements;

function sumArray(arr) {  
    var sum = 0;  
    for(var i = 0,aLength = arr.length;i < aLength;i++) {  
        sum += arr[i];  
    }  
    return sum; }

There is a space after the keyword function . sumArray is the name of the function. Its naming convention is the same as that of variable names: it can only contain letters, numbers, underscores and dollar signs. It cannot start with a number and cannot be a keyword. .

The parameters in parentheses, also called formal parameters , only require the parameter name. Parameters can be 0 , 1 or more, separated by , and {} contains the function body . Contains one or more statements. The function body is used to implement the function of the function.

The keyword return is followed by the return value of the function, and the function can also have no return value. After the function is finished running, the statement " return will exit the execution, and the statement below return will no longer run . The return value is the output of the function.

A function defined in this way can be called both before and after the function definition , as long as the function and the statement calling the function are in the same source file.

2. Use expression definition

to define a function using an expression, which is to use an assignment expression to assign the function to a variable . This is actually treating the function as a variable. At this time, the function can have a name or no name. A function without a name is called an anonymous function .

• With name;

var funct = function getMax(a,b) {  
    return a>b?a:b; };//Note that the semicolon after this cannot be missing, because we are defining a variable!

Different from defining it with a function statement , the function can only be called after the function definition statement . And when calling, only the variable name funct can be used, and the function name getMax cannot be used, such as:

var funct = function getMax(a,b) {  
    return a>b?a:b;  
};  
console.log(funct(1,2));//Output 2

• anonymous function;
  The so-called anonymous function is the parameter list directly after the keyword function :

var funct = function(a,b) {  
    return a>b?a:b; };

This function has no name. It is assigned to the variable funct , so it is called an anonymous function. Likewise, this function can only be called after this statement.

var funct = function(a,b) {  
    return a>b?a:b; }; console.log(funct(1,2));//

Summary of output 2: Defining a function with an expression can be used out of the box. Once defined, it can only be used in this statement Then call the function

3. Function call

In the fourth training, we have introduced that objects can have their own methods, of course this is also a function. The call of this function is slightly different from the functions defined in the previous two levels.

//Definition of function: find the maximum value of three numbers function max(a,b,c) {  
    if(a > b) {  
        if(a > c)  
            return a;  
        else   
            return c;  
    }  
    else {  
        if(b > c)  
            return b;  
        else   
            return c;  
    }  
}  
//Call this function var result = max(1,2,3);//result is 3  
console.log(result);//Output 3

When calling the function, you need to pass in the same number of specific values ​​as the formal parameters. The above function has 3 parameters, so when calling below, pass in 3 specific values. , 1 is passed to parameter a , 2 is passed to parameter b , 3 is passed to parameter c . The return value of the function is passed to the variable result through the assignment symbol = . If there is no return keyword in the function body, undefined will be returned.

Calling functions defined in the object:

var ob = {  
    id:1,  
    getMax:function(a,b) {  
        return a>b?a:b;  
    } }; var result = ob.getMax(2,1);//The result value is 2 var result1 = ob["getMax"](2,1);//The value of result1 is also 2.

The difference from the above is that here To locate a function, you need to use对象名.函数名or对象名["函数名"] , the others are the same.

4. Undefined actual parameters

In most programming languages, the number and type of actual parameters passed in when calling a function are checked, but JavaScript neither checks the type nor the number of actual parameters. .
The actual parameters in JavaScript will match the formal parameters in order from left to right , for example:

function myFunction(a,b,c) {  
    console.log(a);  
    console.log(b);  
    console.log(c); } myFunction(1,2,3);

The actual parameter 1 is passed into the formal parameter a , the actual parameter 2 is passed into the formal parameter b , and the actual parameter 3 is passed into the formal parameter c . When the number of actual parameters is less than the formal parameters, the value undefined will be passed to the right formal parameter. For example:

function myFunction(a,b,c) {  
    console.log(a);  
    console.log(b);  
    console.log(c); } myFunction(1,2);

Actual parameter 1 is passed into formal parameter a , actual parameter 2 is passed into formal parameter b , and undefined passed into formal parameter c . If you only want to pass data to the parameters on the right, you can pass undefined to the first few actual parameters. For example:

function myFunction(a,b,c){ console.log(a); console.log(b); console.log(c); } myFunction(undefined,1,2);

The above two methods are not rigorous enough , the best practice is to set a default value for formal parameters that may be passed undefined values. For example:

function getSum(a,b,c) {  
    if(c === undefined)   
        c = 0;  
    console.log(a+b+c); } myFunction(1,2);

5. Actual parameter object

Everything JavaScript is an object, and the actual parameter is also an object . It has a special name arguments . This object can be regarded as an array. (Array-like, not real array), the actual parameters are arguments[0]、arguments[1]... from left to right, arguments.length represents the number of actual parameters.

//Find the sum of parameters function getSum() {  
    var aLength = arguments.length;  
    var sum = 0;  
    for(var i = 0;i < aLength;i++) {  
        sum += arguments[i];  
    }  
    return sum; } console.log(getSum(1,2,3,4,5))//Output 15.

The formal parameters here are omitted directly and represented by arguments[i] .

Complex JavaScript

with objects as parameters

Developers need to check the correspondence between each actual parameter and formal parameter, which is very inefficient. A good solution is to use an object as a parameter, and the function will operate on the parameter based on the object's property name .

function myFunction(obj) {  
    console.log(obj.name);  
    obj.number++;  
    return obj.number; } myObj = {name:"myObj",number:34}; myFunction(myObj);//Output myObj console.log(myObj.number);//Output 35

7. Function object as another function The parameters of

a function (called a function for convenience of writing) can be used as parameters of another function (called b function), and the b function can finally return a specific value.

In principle, function b calls function a in its own function body, so the name of function a needs to be passed to function b as an actual parameter. As follows:

//Find the maximum value function getMax(a,b) {  
    return a>b?a:b; } //Find the minimum value function getMin(a,b) {  
    return a<b?a:b; } //The following function takes a function as a parameter and finally returns a value function getM(func,num1,num2) {  
    return func(num1,num2); } getM(getMax,1,2);//Return 2 getM(getMin,1,2);//Return 1

We pass the name of function a ( getMax or getMin ) to function b ( getM（） ), and then call the passed a function inside the b function to get the relevant results.