Function Composition for Reusable Pipelines

What is Function Composition?

At its core, function composition is the process of creating a new function by combining two or more existing functions. The output of one function becomes the input of the next in the sequence. For example, if we have a function f(x) and a function g(x), their composition would look like g(f(x)). We first apply f to our data, then take that result and apply g to it.

This approach encourages you to build a library of small, pure, and highly focused functions. Each function has a single responsibility, making it easy to understand, test, and debug. You then assemble these simple "building blocks" to perform complex tasks.

The following article by James Sinclair offers an excellent introduction to this idea. It starts with a simple two-function composition and builds from there.

To further ground this in principle, it's helpful to understand the philosophy behind this style of programming.

Automatic Composition: compose and pipe

Manually nesting functions is not scalable. To solve this, we can create higher-order functions that automate the process of creating a pipeline. The two most common patterns for this are compose and pipe. They do the same thing but differ in the order of operations.

1. The compose Function (Right-to-Left)

By convention in functional programming (stemming from mathematics), compose executes functions from right to left. This mimics the "inside-out" evaluation of nested function calls.

compose(h, g, f) is equivalent to (...args) => h(g(f(...args))).

The last function in the list (f) is the first to receive the data. This can feel a bit counterintuitive when reading code from top to bottom or left to right.

We can implement a generic compose function using the reduceRight array method. It takes a list of functions, and for a given initial value, it "reduces" them by applying each function to the accumulated result, starting from the rightmost function.

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

// --- Example Usage ---
const add5 = num => num + 5;
const multiplyBy2 = num => num * 2;
const subtract10 = num => num - 10;

// The composed function will execute in this order:
// 1. add5(10) -> 15
// 2. multiplyBy2(15) -> 30
// 3. subtract10(30) -> 20
const calculate = compose(subtract10, multiplyBy2, add5);
const result = calculate(10); // result is 20

console.log(result);

The video below offers a great walkthrough of building and using a compose function.

2. The pipe (or flow) Function (Left-to-Right)

Many developers find the right-to-left execution of compose unnatural to read. The pipe function (sometimes called flow) was created as a more intuitive alternative. It executes functions from left to right.

pipe(f, g, h) is equivalent to (...args) => h(g(f(...args))).

The first function in the list (f) is the first to receive the data. This reads more like a sequence of steps.

Implementing pipe is nearly identical to compose, but we use the standard reduce method instead of reduceRight.

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

// --- Example Usage ---
// The composed function will now execute in this order:
// 1. add5(10) -> 15
// 2. multiplyBy2(15) -> 30
// 3. subtract10(30) -> 20
const calculatePipe = pipe(add5, multiplyBy2, subtract10);
const resultPipe = calculatePipe(10); // result is 20

console.log(resultPipe);

Notice the list of functions is now in the order of execution, which is often easier to reason about.

The Power of Pipelines

Now that we have these helper functions, we can return to the text processing example from the Sinclair article and see how much cleaner it becomes.

The final point from the article is crucial: by defining a process as a composition of abstract steps (filter, map, join), you separate the intent of your pipeline from the implementation of its parts. You could replace the array-based helpers with versions that use generators for lazy evaluation, and the pipeline itself would not need to change. This is a profound concept in software design that leads to more flexible and maintainable systems.

A Note on Function Signatures

So far, our examples have conveniently used unary functions—functions that accept exactly one argument. This makes them easy to plug together. But what happens when a function in your pipeline needs more than one argument, like split(delimiter, string) or replace(pattern, replacement, string)?

You can handle this by creating an anonymous arrow function inside the pipeline, but this can get clumsy. A more elegant solution involves two other functional programming techniques: currying and partial application. These techniques allow you to transform a function that takes multiple arguments into a sequence of functions that each take a single argument, making them perfectly suited for composition.

Conclusion

In this lesson, you've moved beyond simple method chaining to a more generalized and powerful pattern for creating data-processing pipelines. By implementing compose and pipe, you've created reusable tools that are at the heart of the functional programming style in JavaScript.

Key Takeaways:

• Function composition is the act of creating a new function by combining smaller, single-purpose functions in a sequence.
• The compose function creates a pipeline that executes from right to left, mimicking nested function calls.
• The pipe (or flow) function creates a pipeline that executes from left to right, which is often more intuitive to read.
• Both are typically implemented using reduceRight and reduce, respectively, to apply a series of functions to an accumulating value.
• This pattern promotes a declarative style, where you define what to do, not how to do it, leading to more readable, reusable, and maintainable code.

In our next lesson, we will dive deep into partial application and currying. These techniques are the key to unlocking the full potential of function composition, allowing you to seamlessly integrate functions of any number of arguments into your pipelines.