HiveBrain v1.2.0
Get Started
← Back to all entries
snippetjavascriptTip

Function composition in JavaScript

Submitted by: @import:30-seconds-of-code··
0
Viewed 0 times
javascriptcompositionfunction

Problem

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.
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).
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.
@Further reading

Solution

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,
  add5,
  multiply
);
composedFn(5, 2); // [1, 5]


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.
@Further reading

Code Snippets

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,
  add5,
  multiply
);
composedFn(5, 2); // [1, 5]
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]

Context

From 30-seconds-of-code: function-composition

Revisions (0)

No revisions yet.