DEV Community

Nitin Sijwali
Nitin Sijwali

Posted on

Function Composition in Javascript

Function composition is an approach where the result of one function is passed on to the next function, which is passed to another until the final function is executed for the final result.

Function Composition

Example:

const square = x => x*x;

const addTen = x => x + 10;

const result = compose(square, addTen)(20);
result: 410;
Enter fullscreen mode Exit fullscreen mode

Lets write the compose function for the above question..

function compose(f1, f2){
  return function(value){
      return f2(f1(value));
  }
}
const result = compose(square, addTen)(20);
Enter fullscreen mode Exit fullscreen mode

if we console log the result, the answer would be 410.

However, the solution above is only valid if compose accepts no more than two functions. So, to make it work for an n-number of functions, we need to make a few changes.

function compose(...args){
  return function(value){
      return args.reduce((pre, current) => current(pre), value);
  }
}
const result = compose(square, addTen, addTen, addTen)(20);
answer: 430.

// here were are using rest operator ...args to accept n-number of arguments in an array.
args.reduce() will iterate over each element/function with the previously computed value, returning the final computed value.
Enter fullscreen mode Exit fullscreen mode

The function above can be shortened as below:

const compose =(...args) => value => args.reduce((pre, current) => current(pre), value);
const result = compose(square, addTen, addTen, addTen)(20);
answer: 430.
Enter fullscreen mode Exit fullscreen mode

I hope this helps you solve such a problem during your interview.

Thats all for now. Keep learning and have faith in Javascript❤️

Discussion (0)