CODEWITHSUNDEEP
javascriptfunctional-programmingfunction-composition
Sandipan Bhattacharjee
Sandipan Bhattacharjee

Reputation: 35

How to implement function composition in JavaScript?

Below are three functions that need to be composed and give us the output 30:

const add = (a) => a + 10;
const mul = (a) => a * 10;
const divide = (a) => a / 5; 

// How to implement `compositionFunction`?
compositionFunction(add, mul, divide)(5);
//=> 30

Expected output is 30 because:

5 + 10 = 15
15 * 10 = 150
150 / 5 = 30

Upvotes: 1

Views: 1126

Answers (4)

customcommander
customcommander

Reputation: 18891

There are two flavours of function composition:

  1. left-to-right function composition aka pipe
  2. right-to-left function composition aka compose

Here's a recursive implementation just for fun:
This assumes that there are at least two functions to compose

const compose = (...fn) => {
  const [[f, g], x] = [fn.slice(-2), fn.slice(0, -2)];
  const h = a => f(g(a));
  return x.length ? compose(...x, h) : h;
}

const pipe = (...fn) => {
  const [f, g, ...x] = fn;
  const h = a => g(f(a));
  return x.length ? pipe(h, ...x) : h;
}

Let's try:

const foo = x => x + 'foo';
const bar = x => x + 'bar';
const baz = x => x + 'baz';

pipe(foo, bar, baz)('');
//=> 'foobarbaz'

compose(foo, bar, baz)('');
//=> 'bazbarfoo'

Upvotes: 1

R4ncid
R4ncid

Reputation: 7129

Something like this

const add = (a) =>  a + 10 ;
const mul = (a) =>  a * 10 ;
const divide = (a) => a / 5 ; 
// How to use this function -----

const customComposeFn = (...f) => v => f.reduce((res, f) => f(res), v)

console.log(customComposeFn(add, mul, divide)(5));

Upvotes: 3

connexo
connexo

Reputation: 56770

Here's what I would do:

function customComposeFn(...funcs) {
  return function(arg) {
    let f, res = arg;
    while (f = funcs.shift()) {
      res = f(res)
    }
    return res;
  }
}

const add = a => a + 10;
const mul = a => a * 10;
const divide = a => a / 5;
// How to use this function -----
console.log(customComposeFn(add, mul, divide)(5));

Upvotes: -1

Sandipan Bhattacharjee
Sandipan Bhattacharjee

Reputation: 35

const add = (a) => a + 10;
const mul = (a) => a * 10;
const divide = (a) => a / 5;
const customComposeFn = (...fn) => {
    return function (arg) {
        if (fn.length > 0) {
            const output = fn[0](arg);
            return customComposeFn(...fn.splice(1))(output);
        } else {
            return arg;
        }
    };
};
const res = customComposeFn(add, mul, divide)(5);
console.log(`res`, res);

Upvotes: -1

Related Questions