Function Composition

1. What is Function Composition?

Function composition is the process of combining two or more functions to produce a new function. It is equivalent to taking the output of one function and using it as the input for the next.

In mathematics, if you want to apply function g and then function f to a value x, you write it as:

f(g(x))

• Order of Execution: Inside-Out (g runs first, then f).

• Order of Reading: Right-to-Left.

2. The Tool: reduceRight()

To implement standard mathematical composition in JavaScript, we need a tool that processes an array of functions from Right-to-Left.

• reduce() (Left-to-Right): Iterates index 0 --> End.

• reduceRight() (Right-to-Left): Iterates End --> Index 0.

Because mathematical composition is written as f(g(x)), if we store our functions in an array [f, g], we must process g (the last element) first. This makes reduceRight the perfect tool.

3. Example 1: Mathematical Pipeline

Let's look at a classic numeric transformation. We want to:

1. Double a number (x times 2).

2. Add 5 to the result (x + 5).

3. Square that result (x^2).

Mathematically: Square(Add5(Double(x)))

const double = x => x * 2;
const add5 = x => x + 5;
const square = x => x * x;

// The array is defined in the order we write the math functions: [Outer, Middle, Inner]
const functions = [square, add5, double]; 
const initialValue = 2;

// Execution: double(2) -> 4 ... add5(4) -> 9 ... square(9) -> 81
const result = functions.reduceRight((val, func) => func(val), initialValue);

console.log(result); // Output: 81

4. Example 2: String Formatting

Function composition is incredibly useful for processing text. Imagine we want to turn a messy user input into a URL slug.

Goal: Turn " Hello World " into "<div>hello world</div>".

Steps:

1. Trim whitespace.

2. Lowercase the text.

3. Wrap in HTML tags.

const trim = str => str.trim();
const toLowerCase = str => str.toLowerCase();
const wrapInTags = str => `<div>${str}</div>`;

// Composition: wrapInTags(toLowerCase(trim(x)))
const formatOps = [wrapInTags, toLowerCase, trim]; 

const rawInput = "  Hello WORLD  ";

const formattedHtml = formatOps.reduceRight((text, func) => func(text), rawInput);

console.log(formattedHtml); 
// 1. trim: "Hello WORLD"
// 2. toLowerCase: "hello world"
// 3. wrapInTags: "<div>hello world</div>"

5. Example 3: E-commerce Price Calculation

Composition helps manage complex business logic by breaking it down into small, reusable utility functions.

Scenario: Calculate final price.

1. Apply a 10% Discount.

2. Add 5% Tax to the discounted price.

3. Add a flat $10 Shipping fee.

const applyDiscount = price => price * 0.90;
const addTax = price => price * 1.05;
const addShipping = price => price + 10;

// The "Compose" Helper Function
// This creates a reusable function instead of calculating immediately
const compose = (...funcs) => (initialVal) => 
    funcs.reduceRight((val, fn) => fn(val), initialVal);

// Create the pipeline
const calculateTotal = compose(addShipping, addTax, applyDiscount);

// Usage
const cartTotal = 100;
// 1. Discount: 100 -> 90
// 2. Tax: 90 * 1.05 -> 94.5
// 3. Shipping: 94.5 + 10 -> 104.5
console.log(calculateTotal(cartTotal)); // Output: 104.5

6. Composition vs. Piping

It is important to distinguish between "Compose" and "Pipe" based on how you prefer to list your functions.

Style	Direction	Array Order	Method
Compose	Right-to-Left	[f, g, h] means f(g(h(x)))	reduceRight
Pipe	Left-to-Right	[h, g, f] means h to g to f	reduce

• Compose follows standard mathematical notation.

• Pipe follows the logical "flow" of data (like Unix pipes |).

If you find reduceRight confusing, you can simply reverse the order of your array and use reduce—that is essentially "Piping".