Function composition in JavaScript

In functional programming, function composition is the process of combining multiple functions to produce a new function. This technique is used heavily in functional programming, but it can also be used in imperative programming. Its main benefits are readability, reusability and modularity.

Compose functions

Creating a `compose()` function is relatively simple, as long as we understand how it should work. Similar to math, function composition in JavaScript is performed from right to left. In order to iterate over the functions we can simply use `Array.prototype.reduce()` and pass the result of the previous function as the argument to the next function. The first function can have any arity (number of arguments), while the remaining functions must be unary (only one argument).

```const compose = (...fns) =>
fns.reduce((f, g) => (...args) => f(g(...args)));

const digitize = n => [...`\${n}`].map(i => parseInt(i));
const add5 = x => x + 5;
const multiply = (x, y) => x * y;

const composedFn = compose(
digitize,
multiply
);
composedFn(5, 2); // [1, 5]```

Pipe functions

If right-to-left function composition sounds counterintuitive to you, you can easily create a `pipe()` function that performs left-to-right function composition. The implementation is almost identical to the previous one, except that we need to reverse the order the functions are called in.

```const pipe = (...fns) =>
fns.reduce((f, g) => (...args) => g(f(...args)));

const digitize = n => [...`\${n}`].map(i => parseInt(i));
const add5 = x => x + 5;
const multiply = (x, y) => x * y;

const composedFn = pipe(multiply, add5, digitize);
composedFn(5, 2); // [1, 5]```

More like this

• Collection · 8 snippets

Functional Programming

Get started with functional programming in JavaScript with this collection of introductory snippets.

• JavaScript ·

Understanding higher-order functions in JavaScript

Learn everything you need to know about higher-order functions with this short guide and level up your programming skills.

• JavaScript ·

What are JavaScript closures?

Learn and understand closures, a core concept in JavaScript programming, and level up your code.

• JavaScript ·

JavaScript function arity

Function arity is a simple, yet useful concept in functional programming, especially when combined with currying.

Start typing a keyphrase to see matching snippets.