Compose and Pipe in JavaScript

Functional programming: What are Compose and Pipe in JavaScript?

Photo by Neil Daftary on Unsplash.

Compose and Pipe are among the most powerful concepts in functional programming in JavaScript. However, they can be difficult to understand. This article will help you to better grasp these functions.

Compose

In algebra, function composition allows you to apply one function to the output of another function.

Photo by the author.

In this example, the function g is applied to the result of applying the function f to x. As we can see, function composition works from right to left.

The same result can be achieved in JavaScript with compose:

Photo by the author.

OK… really confusing. Let’s see an example.

Let’s suppose we want to get the name of a user and uppercase it. First of all, we have to write a function that extracts the name of the user:

const user = {name: 'Gianmarco', password: 1234}
const getUserName = (user) => user.name
getUserName(user)
// 'Gianmarco'

And then a function that uppercases strings:

const upperCase = (string) => string.toUpperCase()
upperCase('Gianmarco')
// 'GIANMARCO'

Now we can compose the two functions to have just one function that executes both actions: Get the name and uppercase it.

We can use the implementation of compose() that we saw before:

The problem with this implementation of compose() is that it takes as parameters just two functions (in our example, upperCase()and getUserName()).

Let’s suppose we want to add another function that returns the first four characters of a string:

const firstFour = (string) => string.substring(0,4)
firstFour(‘GIANMARCO’);
// 'GIAN'

How can we compose more than two functions at a time?

We can use Compose and the reduceRight() method:

const compose = (...functions) => x => functions.reduceRight((acc, fn) => fn(acc), x);

In this implementation, compose() takes rest parameters (any number of parameters — in this example, any number of functions) and returns a function that takes the initial value x. It then uses the reduceRight() method to iterate from right to left over each function fn in functionsand apply it, in turn, to the accumulated value acc.

In simpler words, compose() applies right to left any number of functions to the output of the previous function.

With this new implementation of compose(), we can now create a function that gets the name of the user, uppercases it, and returns just its first four characters:

Cool, right?

It’s like a list of commands that work from right to left (as in the math notation sense). The function getUserName() is the last argument when we call compose() because it is the first function that is to be executed.

Pipe

Pipe is exactly like compose(), but it works left to right. I personally prefer it over compose() because you can think of it as a sequence of events.

If we want to recreate our compose() function above but with pipe(), we can use this implementation:

const pipe = (...functions) => x => functions.reduce((acc, fn) => fn(acc), x);

As you noticed, we now use reduce() instead of reduceRight(), as the function iterates left to right.

Our final result will be:

As a sequence of events, pipe() applies getUserName() to our initial data, then it applies upperCase() to the result of applying getUserName() to our initial data. Finally, it will applyfirstFour() to the output from applying upperCase() to the result of applying getUserName() to our initial data.

Conclusion

Hopefully, this article clarified some of your doubts and helped you grasp the potential of Compose and Pipe.

You can now create functions working as factory conveyor belts that receive data, and these data go through all these different functions until we finally obtain our output.

Photo by the author.

Consider becoming a Medium member if you appreciate reading stories like this and want to help me as a writer. It costs $5 per month and gives you unlimited access to Medium content. I’ll get a little commission if you sign up via my link.