How to implement function composition in JavaScript?

Question

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

create a function or another const with all three operation ? — Simone Rossaini
– Simone Rossaini, Commented Mar 24, 2022 at 14:34
None of your functions return anything. You should read about arrow function syntax. — ASDFGerte
– ASDFGerte, Commented Mar 24, 2022 at 14:35
What the OP refers to as customComposeFn actually is a pipe approach. — Peter Seliger
– Peter Seliger, Commented Mar 24, 2022 at 14:36
@PeterSeliger yes, often called "pipe". Compose often goes in the opposite direction. Reasoning being f(g(x)) = compose(f, g)(x). — VLAZ
– VLAZ, Commented Mar 24, 2022 at 14:37

VLAZ · Accepted Answer · 2022-03-24 14:45:43Z

3

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));

edited Mar 24, 2022 at 14:45

VLAZ

29.6k9 gold badges65 silver badges88 bronze badges

answered Mar 24, 2022 at 14:35

R4ncid

7,1651 gold badge8 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

customcommander Over a year ago

compose is colloquially know as right-to-left function composition. What you've done is pipe IMHO.

VLAZ Over a year ago

@customcommander to be fair, that's what OP asked for. I clarified the title of the question. I do agree with you, though - compose is most often right-to-left.

Wyck Over a year ago

With just recursion it could be const compose = (f, ...rest) => f ? x => compose(...rest)(f(x)) : x => x; but I like that you used .reduce much better!

customcommander · Accepted Answer · 2022-03-24 15:35:17Z

2

There are two flavours of function composition:

left-to-right function composition aka pipe
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'

edited Mar 24, 2022 at 15:35

answered Mar 24, 2022 at 15:28

customcommander

19.3k6 gold badges70 silver badges96 bronze badges

1 Comment

Wyck Over a year ago

You can peel off an argument rather than slicing like this: const compose = (f, ...rest) => f ? x => compose(...rest)(f(x)) : x => x;, which returns an identity function in the terminal case.

Sandipan Bhattacharjee · Accepted Answer · 2022-03-24 14:41:50Z

-1

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);

answered Mar 24, 2022 at 14:41

Sandipan Bhattacharjee

454 bronze badges

Comments

connexo · Accepted Answer · 2022-03-24 14:42:51Z

-1

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));

answered Mar 24, 2022 at 14:42

connexo

57.2k15 gold badges112 silver badges149 bronze badges

Collectives™ on Stack Overflow

How to implement function composition in JavaScript?

4 Answers 4

3 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related