Function Composition & Piping

1. Introduction

Function Composition and Piping are design patterns used to combine multiple functions to create a new function. Composition executes functions from right to left (like mathematical function composition: f(g(x))). Piping executes functions from left to right, matching the direction we read code.

2. Why It Matters

Processing data often requires passing it through a series of transformations (for example, trimming a string, converting it to lowercase, and replacing characters). Writing nested function calls like replace(lowercase(trim(str))) is difficult to read. Composition and piping flatten these structures into clean data processing pipelines.

3. Real-World Analogy

Think of an Industrial Water Purification Plant:

• Nested Functions (Manual buckets): You scoop raw water into a bucket, run it through filter A, pour the result into filter B, and then pour the result into filter C. You manually manage the intermediate steps.
• Piping (Connected pipes): You hook up water pipes in a line: Raw Water -> Filter A -> Filter B -> Filter C -> Clean Water. The water flows through the pipes automatically, without needing intermediate buckets.

4. Compose vs Pipe

Let's contrast the implementation and execution order of the two patterns:

1. Compose (Right-to-Left):

Executes functions from right to left, matching mathematical function notation.

2. Pipe (Left-to-Right):

Executes functions from left to right, matching the direction code is read.

5. Practical Example

This script demonstrates building a data pipeline to format and validate a user sign-up username:

6. Common Mistakes

• Trying to compose functions that accept multiple arguments: Composition and piping require functions to accept exactly one argument (unary functions). If a function requires multiple arguments, use currying or partial application to pre-bind parameters first.

7. Quick Quiz

8. Scenario-Based Challenge

9. Debugging Exercise

const pipe = (...fns) => (x) => fns.reduce((acc, fn) => fn(acc), x);
const getLength = (str) => str.length;
const addTen = (num) => num + 10;
const capitalize = (str) => str.toUpperCase();
// Objective: calculate length, add 10, then capitalize output
// Bug: wrong function ordering!
const process = pipe(getLength, addTen, capitalize);
process('hello'); // crashes with TypeError: str.toUpperCase is not a function! Why?

const process = pipe(capitalize, getLength, addTen); // Correct order
console.log(process('hello')); // 15 (HELLO -> length 5 -> +10)

11. Interview Questions

12. Production Considerations

• • TypeScript Types: Typing function composition and piping in TypeScript can be complex. In production TypeScript environments, use utility libraries (like lodash/fp or fp-ts) that provide pre-typed flow (pipe) and compose helpers.