Js – Understand function combinations

How do you understand combinations of functions

compose(f, g, t) => x= > f(g(t(x))
Copy the code

Function combination, which literally means to combine multiple functions in an ordered way. The reason for the ordered combination is that different functions return in different order are different functions.

var { compose } = require('ramda')

const f = x= > x + 1;

const g = x= > x * 2;

const fg1 = compose(f, g);

const fg2 = compose(g, f);

console.log(fg1(4)) / / 9
console.log(fg2(4)) / / 10
Copy the code

To explain, function combinations are executed from right to left.

Fg1 (4 * 2) + 1 = 9 FG2 (4 + 1) * 2 = 10Copy the code

ES5 code execution above

var compose = function(f,g) {
  return function(x) {
    return f(g(x));
  };
};
Copy the code

Of course, this writing is imperfect, since only two functions are supported as inputs.

Composition of handwriting functions

var compose = function() {
	const funcArray = [...arguments];
  
  return function () {
  	return funcArray.reduceRight(
      (arg, fn) = > {
        return fn.apply(null, [].concat(arg)) // This is used because the first function to be executed may take two arguments (the rightmost function).
      }, 
      [...arguments]
    )
  }
}
Copy the code

High appearance level version

var compose = (. fns) = > (. args) = > fns.reduceRight((arg, fn) = > fn.apply(null, [].concat(arg)), args)
Copy the code

function compose() {
    var args = arguments;
    var start = args.length - 1;
    return function() {
        var i = start;
        var result = args[start].apply(this.arguments);
        while (i--) result = args[i].call(this, result);
        return result;
    };
};
Copy the code

Compose in the story

function compose(. funcs) {
  if (funcs.length === 0) {
    return arg= > arg
  }

  if (funcs.length === 1) {
    return funcs[0]}return funcs.reduce((a, b) = > (. args) = >a(b(... args))) }Copy the code

To understand:

function compose(. funcs) {
  if (funcs.length === 0) {
    return arg= > arg
  }

  if (funcs.length === 1) {
    return funcs[0]}return funcs.reduce((a, b) = > {
    return (. args) = > {
        returna(b(... args)) } }) }const f = x= > x + 1;

const g = x= > x * 2;

const h = x= > x + 3;

let fg1 = compose(f, g, h);
let g2 = compose(h, g, f);

console.log(fg1(4)) 
console.log(fg2(4))
Copy the code

Function combinations are executed from right to left, while reduce forms higher-order functions from left to right.

let fg1 = compose(f, g, h);

return function(arg) {
	return f(g(h(arg)))
}
Copy the code

var { compose, pipe } = require('ramda')

const f = x= > x + 1;

const g = x= > x * 2;

const fg1 = compose(f, g);

const fg2 = pipe(g, f);

console.log(fg1(4)) / / 9
console.log(fg2(4)) / / 9
Copy the code

application

withRoute(observer(inject('Store')(Index)))

const enhance = compose(withRoute, observer, inject('Store'));

enhance(Index);
Copy the code