DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,864 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Kurapati Mahesh
Kurapati Mahesh

Posted on • Updated on

Javascript: Functional Composition

It is an approach where result of one function passed on to next function.

const add = (x, y) => x+y;

const subtract = (x) => x-4;

const multiply = (x) => x * 8;

// result of `add` is passed to `subtract` and its result passed to `multiply`.
const result = multiply(subtract(add(2, 3)));

result;
> 8
Enter fullscreen mode Exit fullscreen mode

That looks readable but what if we have more functions to call one after other.
Let's try little cleaner approach.

const compose = (...functions) => x => functions.reduceRight((total, f) => f(total), x);

const add = x => x+2;

const subtract = x => x-1;

const multiply = x => x * 8;

compose(multiply, subtract, add)(2);
> 24
Enter fullscreen mode Exit fullscreen mode

We can also use reduce to implement:

const pipe = (...functions) => x => functions.reduce((total, f) => f(total), x);

const add = x => x+2;

const subtract = x => x-1;

const multiply = x => x * 8;

pipe(add, subtract, multiply)(2);
> 24
Enter fullscreen mode Exit fullscreen mode

pipe - performs from left-to-right.
compose - performs from right-to-left.

Top comments (0)

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.