The pipe and compose are utility methods that take any number of functions, and execute them one by one, with the result of the previous function call. Let’s take a look at the general approach for calling functions, and find out why we may need to implement these utility methods.

Let us assume we have the below functions to manipulate number values.

const double = (value) => value * 2;

const square = (value) => value ** 2;

const addFive = (value) => value + 5;

const subtractFive = (value) => value - 5;

Now let’s suppose we have a few requirements, and according to that, we need to call these functions to transform a particular number.

Requirement 1: Increment number 10 by number 5 and double it. To do this, we would write the below code.

const result = double(addFive(10));

Requirement 2: Square number 10, deduct number 5 from it, and double it. To do this, we would write the below code.

const result = double(subtractFive(square(10)));

Requirement 3: Increment number 10 by number 5, Square it, deduct number 5 from it, and double it. To do this, we would write the below code.

const result = double(subtractFive(square(addFive(10))));

So, here we can see that we are nesting one function call inside another, and after a certain time, it starts looking messy. To solve these nesting function calls problems, we would use the pipe and compose methods.

Pipe

This utility method will take any number of functions, and execute them one by one from left to right with the result from the previous function call. To implement this method, we will make use of the Array.reduce() method.

The Array.reduce() method reduces the array to a single value. It takes one reducer function as the first argument and one initial value as the second optional argument. The reducer function executes for each element of the array and passes the returned result as the first argument to the next reducer function call.

Reference: A guide to Array.reduce() Method in JavaScript

const pipe = (...funcs) => {
  return (value) => {
    return funcs.reduce((res, fn) => fn(res), value);
  };
};

const result = pipe(addFive, double, subtractFive, square)(10);
console.log(result); // 625

Here, the pipe() method will call addFive(10), next double(15), next subtractFive(30), then square(25), and finally returns 625.

Compose

This utility method works the same way as pipe(), but instead of executing functions from left, it executes them from right to left. To implement this method, we will make use of the Array.reduceRight() method.

const compose = (...funcs) => {
  return (value) => {
    return funcs.reduceRight((res, fn) => fn(res), value);
  };
};

const result = compose(addFive, double, subtractFive, square)(10);
console.log(result); // 195

Here, the compose() method will call square(10), next subtractFive(100), next double(95), then addFive(190), and finally returns 195.

Amitav Mishra

Web Developer by Profession, Blogger by Passion.
JavaScript | React | Next |  Angular | Vue | HTML | CSS