Kyle Shevlin

Composition is the culmination of all the previous “Just Enough FP” blog posts. Toggle footnote It’s where we combine our knowledge of higher order functions, currying, partial application, and pointfree programming into a new concept that can really unlock our functional potential.

Before I get into explaining this concept, I want you to think back to your high school math classes. Toggle footnote You might recall somewhere around the time of Algebra 1 or 2 learning about mathematical functions, like this simple one: f(x) = x + 1. This function takes any x and always returns x + 1. You might recognize this as a pure function (all mathematical functions are pure functions).

Now, let’s add a second function: g(x) = x * 3. This is also a pure function. What if I wanted to take the output of one function and feed it as the input of another function? It would look like this: f(g(x)). Now, x will first be mulitplied by 3, and then 1 will be added to it. If I provide an argument of 4 for x, the result will be 13.

This is functional composition.

It is the act of taking the output of one function and passing it directly as the input to the next function. In its most primitive form, it occurs through nesting functions like you see above. Let’s make a practical-ish example of this.

An example I like to use involves manipulating a string through a series of functions. Let’s start by defining those functions.

const scream = str => str.toUpperCase()
const exclaim = str => `${str}!`
const repeat = str => `${str} ${str}`

The scream function uppercases a string, exclaim adds an exclamation point, and repeat, well repeats the string (with a space inbetween). You’ll notice that each function has the same arity. If you’ve forgotten what arity is, check out the currying post before going further. Each one is a curried, unary function. Also, notice that the argument type for each function is the same. They all expect a string. Our composition wouldn’t work properly if we were mixing types, but I’ll save that discussion for another time. Because all of our functions expect only one more argument and have the same type signature, we can nest them together, passing the output of one as the input of the next without any worries.

repeat(exclaim(scream('Just Enough FP is great')))
// JUST ENOUGH FP IS GREAT! JUST ENOUGH FP IS GREAT!
repeat(exclaim(scream('i luv learning')))
// I LUV LEARNING! I LUV LEARNING!

That’s pretty cool! But imagine you had even more things you wanted to nest, or that your function names were longer than one word. That nesting would get very verbose and difficult to read. Is there a way we can tidy this up? Of course there is.

If you recall from the currying and partial application posts, curried functions do not evaluate completely until they receive their final argument. You’ll also recall that they hold their previously partially applied arguments in closure awaiting that final argument. If we were able to programmatically combine all our functions into one new higher order function that awaited its final argument, we’d have ourselves a cool way of generating compositions.

Well, here’s that cool way. The compose function:

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

The compose function accepts any number of functions as arguments and returns a new function that awaits any value x. When x is received, we take our array of functions and call reduceRight (the same as Array.prototype.reduce, but we start from the end and work towards the beginning of the array), passing in the accumulated result as the input to the next function, starting with our value x. compose can be used like this:

const withExuberance = compose(repeat, exclaim, scream)

withExuberance('this is a-maz-ing')
// THIS IS A-MAZ-ING! THIS IS A-MAZ-ING!

You see, we were able to generate a composition by passing in the functions from before as arguments to the compose function, which gave us a brand new function awaiting our string. This string was passed first to scream, then to exclaim, and then to repeat.

”Wait! What?!” No, I can’t read your mind, it’s just the response I get every time I teach this.

In our mathematical compositions, the innermost function is always called first. When we nested our functions, they read from right-to-left: repeat(exclaim(scream(x))). So compose is designed to order its functions the same way, from right-to-left (or bottom-to-top if you have so many they don’t fit on one line). This takes some time to get used to, but with a little practice, becomes fairly easy to read. Toggle footnote

We can actually break our composition down into smaller compositions and compose them together. Since we only have three functions, I’ll only compose scream and exclaim.

const withExcitement = compose(exclaim, scream)
const withExuberance = compose(repeat, withExcitement)

withExuberance('composition is blowing my mind')
// COMPOSITION IS BLOWING MY MIND! COMPOSITION IS BLOWING MY MIND!

You can start to imagine how the ability to make small compositions and use them in larger ones can add some useful functionality to a program or application. So long as the arity and types match up, you should be able to compose at will without fear.

Bonus: pipe

If you ever work in a purely functional language, you’ll likely become very accustomed to using compose and its right-to-left signature. However, to ease you into functional programming. There is an alternative: the pipe function.

It’s exactly the same as compose, but instead of reduceRight, we use reduce.

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

Our compositions now read left-to-right, top-to-bottom. Toggle footnote Forgive me, I had to teach you composition the mathematical way first. Our pipe compositions now would look like this:

const withExcitement = pipe(scream, exclaim)
const withExuberance = pipe(withExcitement, repeat)

withExuberance("I can't think of an interesting string")
// I CAN'T THINK OF AN INTERESTING STRING! I CAN'T THINK OF AN INTERESTING STRING!

Conclusion

Composition is the act of passing the result of one function directly as the input of another function. With our knowledge of higher order functions, we are able to generate useful compositions with a compose or pipe function that await any data to operate on. It provides a mechanism for building up complex functionality through combining simpler and smaller functions.

In this series, I’m going over material from my Just Enough Functional Programming in JavaScript course on egghead. This post is based on the lesson Build Up Complex Functionality by Composing Simple Functions in JavaScript.