Introduction to higher order functions in Javascript

  • 2020-05-16 06:20:27
  • OfStack

This is an interesting thing, which may also indicate the power of Javascript objects. So what we're going to do is we're going to output an Hello,World, and the input thing is going to be print('Hello')('World'), and that's what we call a higher-order function.

Higher-order functions

Higher order looks like an esoteric term for an advanced programming technique, and I thought so when I first saw it.

The higher order function of Javascript

However, higher-order functions are only functions that take functions as arguments or return values. Hello and World above are a simple example.


var Moqi = function(p1){
    this.add = function (p2){
        return p1 + ' ' + p2;
    };
    return add;
};

So we can use this function in this way


console.log(Moqi('Hello')('World'));

Maybe this process is a little confusing, so let's look at 1 point.

> typeof Moqi('Hello')
<- "function"
> Moqi('Hello')
<- function (p2){
        return p1 + ' ' + p2;
    }

So essentially Moqi('Hello') is a function, Moqi('Hello')

> var m = Moqi('Hello')       
 > m('World')
 > "Hello,World"
 

From the above, higher-order functions can make your code cleaner and more efficient. Naturally, we can also create a function to:

 > Moqi('Hello')('World')('Phodal')
 > "Hello,World Phodal"

So you have a function that looks like this

var Moqi = function(p1){
    return  function (p2){
        return function(p3){
            return p1 + ',' + p2 + ' ' +p3;
        }
    };
};

Restore higher-order functions

The increasingly complex signals that need to be abstracted into higher-order functions are the appearance of duplicate or similar code. Then, step by step, we restore 1 to the previous function:


var Moqi = function(p1){
     this.add =  function (p2){
        return function(p3){
            return p1 + ',' + p2 + ' ' +p3;
        }
    };
    return this.add;
};

Then create a new function

var Moqi = function(p1){
     this.add =  function (p2){
        this.add1 = function(p3){
            return p1 + ',' + p2 + ' ' +p3;
        };
        return this.add1;
    };
    return this.add;
};

Using the call method in javascript, you have:

var Moqi = function(p1){
    var self = this;     function fd(p2) {
        this.add1 = function (p3) {
            return p1 + ',' + p2 + ' ' + p3;
        };
    }     self.add =  function (p2){
        fd.call(this, p2);
        return this.add1;
    };
    return self.add;
};

Examples of higher-order functions

The above example is just for fun, the following example is for real use.


add = function(a,b){
    return a + b;
}; function math(func,array){
    return func(array[0],array[1]);
} console.log(math(add,[1,2])); > math(add,[1,2])
< 3

In the above example, add was passed as a parameter, while return was just a function. For example, 1 function is used in jQuery

console.log(Moqi('Hello')('World'));
0
It can be seen that higher order functions are important for mastering JS.


Related articles: