Functional Composition in JavaScript

Source: Dev.to

Introduction

Functional composition, also known as function pipelines, lets you chain simple functions together to create more readable and modular code.

Defining Simple Functions

const double   = x => x * 2;
const minusOne = x => x - 1;
const square   = x => x * x;

• double(x): multiplies by 2
• minusOne(x): subtracts 1
• square(x): multiplies a number by itself
• Math.sqrt: built‑in function that returns the square root

Building the Function Pipeline

Store the function references in an array—no calls are made at this point.

const functions = [
  square,
  double,
  minusOne,
  Math.sqrt,
];

Executing the Pipeline

Start with an initial value and apply each function in order.

let result = 42; // starting number

for (const fn of functions) {
  result = fn(result);
}

The loop:

1. Takes the current result.
2. Passes it into the next function (fn).
3. Stores the output back into result.

The sequence of calls is equivalent to:

result = square(42);
result = double(result);
result = minusOne(result);
result = Math.sqrt(result);

Step‑by‑Step Calculation

Full Code Example

const double   = x => x * 2;
const minusOne = x => x - 1;
const square   = x => x * x;

const functions = [
  square,
  double,
  minusOne,
  Math.sqrt,
];

let result = 42; // starting number

for (const fn of functions) {
  result = fn(result);
}

console.log('The answer is ' + result);
// The answer is 59.380217...