To learn JavaScript well in addition to the basic knowledge of JavaScript, as the first class citizens of JavaScript – function, we have to in-depth understanding. The variability of functions comes from the variability of parameters and the variability of return values. If the arguments are generic data types or generic objects, such functions are generic; If the argument to a function is a function, this is the advanced function we need to know; If you create a function that calls another part (the variables and arguments are already preset), such a function is a partial function.

In addition, there is the use of optional parameters.

Classification of functions

  1. Common function

Function name, parameter, return value, same name overwrite. Example code is as follows:

function add(a, b) {
    return a + b;
}
Copy the code
  1. Anonymous functions

Without function names, functions can be assigned to variables and functions, or used as callbacks. Very special is the immediate execution of functions and closures.

The following is the example code for the execute now function:

(function(){
    console.log(1)
})()
Copy the code

Example closure code is as follows:

var func = (function() {
    var i = 1;
    return function() {
        console.log(i);
    }
})()
Copy the code
  1. Senior function

A high-level function is one that can take functions as arguments and return values. Closures as above. ECMAScript also provides a number of advanced functions such as forEach(), every(), some(), reduce(), and so on.

  1. Partial function
function isType(type) {
    return function(obj) {
        return toString.call(obj) === "[object " + type + "]"
    }
}

var isString = isType('String');
var isFunction = isType('Function');
Copy the code

I believe that students who have studied vue.js and other common library source code will not be unfamiliar with it.

  1. Arrow function

Arrow functions do not bind their own this, arguments, super. So it’s not a good place to do method functions, constructors, or call apply to change this. But it has the advantage of being shorter, and resolves the problem of anonymous functions where this points to the global scope

window.name = 'window';
var robot = {
    name: 'qq'.print: function() {
        setTimeout(function() { console.log(this.name); }}}, 300); // Modify 1, usebindAlter this to var robot = {name:'qq'.print: function() {
        setTimeout(function() { console.log(this.name); }.bind(this), 300) } }; // Modify 2, use the arrow function var robot = {name:'qq'.print: function() {
        setTimeout(() => { console.log(this.name); }}}, 300);Copy the code

To learn more about arrow functions, see MDN

Parameters of a function

  1. Pass in explicit arguments
function add(a, b) {

    reutrn a + b;
}
Copy the code
  1. Using Arguments objects
function add() {
    var argv = Array.prototype.slice.apply(arguments);
    return argv.length > 0 ? argv.reduce(function(acc, v) { return acc+=v}): ' ';
}
Copy the code
  1. Omit the parameter, the default value of the parameter
function sub(a, b) {
    a = a || 0;
    b = b || 0;
    return a - b;
}
Copy the code
  1. The object parameters
var option = {
    width: 10,
    height: 10
}

function area(opt) {
    this.width = opt.width || 1;
    this.height = opt.height || 1;
    return this.width * this.height
}
Copy the code

Object parameters are common, often appearing in jQuery plug-ins, Vue plug-ins, etc.

  1. Optional parameters

ES5 implementation optional arguments, we need to use arguments. Use a range of optional arguments. We usually use object arguments, which should impress anyone who has written jQuery and other plugins.

  1. Function arguments in ES6

In ES6, the default value of parameters is omitted, which is easy to use. Example code is as follows:

var area = (width=1, height=1) => width*height
Copy the code

In ES6, optional parameters are used. Example code is as follows:

var add = (... nums) => { var numArr = [].concat(nums)return numArr.reduce((acc, v) => acc += v)
}
Copy the code
  1. Deconstruction parameters
myFunc = function({x = 5,y = 8,z = 13} = {x:1,y:2,z:3}) { console.log(x,y,z); }; myFunc(); //1 2 3 (default is object literal) myFunc({}); //5 8 13 (default is the object itself)Copy the code

The return value of the function

  1. Function returns basic data types such as string, number, Boolean, null, undefined. Example code is as follows:
function add(a, b) {
    return a + b
}
Copy the code
  1. The return value of the function is an object. Example code is as follows:
function Robot(name) {
    this.name = name
}

Robot.prototype.init = function() {
    return {
        say: function () {
            console.log('My name is ' + this.name)
        }.bind(this),
        dance:  function(danceName) {
            console.log('My dance name is ' + danceName)
        }
    };
}

var robotA = new Robot('A');
robotA.init().say(); // "My name is A"
var robotB = new Robot('B');
robotB.init().say(); // "My name is B"
Copy the code

Whether you’re writing a native or jQuery plugin, or some other plugin, this is not uncommon. For more information, see the jQuery source code.

  1. The return value is function

We’re most familiar with closures. For details, see the well-worn closure

Refer to the article

JS: How can you accept optional parameters?

Named and Optional Arguments in JavaScript

How to use optional arguments in functions (with optional callback)

We may continue to revise it in the future, and we welcome your comments and corrections. If you have questions or have other ideas, you can pr on GitHub.