Function composition combines small, single-purpose functions into a pipeline that transforms data step by step. It is the functional-programming alternative to deeply nested function calls or long imperative procedures.
1Function Composition | JavaScript Tutorial - In-Depth Guide Part 1
Function composition combines two or more functions into one, where the output of each becomes the input of the next.
const shout = (s) => s.toUpperCase() + '!';
const exclaim = (s) => shout(s.trim());Chaining Transforms
2Function Composition | JavaScript Tutorial - In-Depth Guide Part 2
Deeply nested function calls like 'f(g(h(x)))' are hard to read because you must parse from the inside out. A 'compose' helper reverses that visually.
const compose = (...fns) => (x) =>
fns.reduceRight((acc, fn) => fn(acc), x);compose() Utility
3Function Composition | JavaScript Tutorial - In-Depth Guide Part 3
'pipe' is the mirror image of 'compose' — it applies functions left-to-right, which often reads more naturally as a step-by-step process.
const pipe = (...fns) => (x) =>
fns.reduce((acc, fn) => fn(acc), x);
const process = pipe(parse, validate, transform);pipe() Utility
4Function Composition | JavaScript Tutorial - In-Depth Guide Part 4
Composed functions must be unary (single-argument) — each step only receives the previous step's single return value.
const addTax = (rate) => (price) => price * (1 + rate);
pipe(addTax(0.1), Math.round)(19.99);Unary Functions
5Function Composition | JavaScript Tutorial - In-Depth Guide Part 5
Composition shines when building data-processing pipelines: each function does one small thing well, and the pipeline documents the overall process.
const cleanInput = pipe(
trimWhitespace,
toLowerCase,
removeSpecialChars
);Readable Pipelines
6Step-by-Step Breakdown
Function composition combines two or more functions into one, where the output of each becomes the input of the next.
Deeply nested function calls like 'f(g(h(x)))' are hard to read because you must parse from the inside out. A 'compose' helper reverses that visually.
'pipe' is the mirror image of 'compose' — it applies functions left-to-right, which often reads more naturally as a step-by-step process.
Checkpoint: In pipe(a, b, c)(x), which function runs first?
- →a, then its result flows into b, then c
- →c, then b, then a
Composed functions must be unary (single-argument) — each step only receives the previous step's single return value.
Checkpoint: Can a function that requires two separate arguments be composed directly into a pipe chain as-is?
- →Yes, pipe automatically splits arguments
- →No, it must first be reduced to a single-argument function
Composition shines when building data-processing pipelines: each function does one small thing well, and the pipeline documents the overall process.
Next, we'll explore 'Currying (Introduction)'.
Level Up 🚀
Advanced cheat sheets, SEO tricks, and interview prep for this topic.
Browser Support
Fully supported.
Fully supported.
Fully supported.
Fully supported.
Accessibility (A11y)
1Composed Sanitization Pipelines Should Preserve Meaningful Text for Screen Readers
When composing text-processing steps for display (trim, normalize, truncate), ensure no single step strips content that assistive technology needs, such as accidentally removing punctuation that conveys meaning in a screen-reader announcement.
SEO Implications
- 1
Composable Content-Processing Pipelines Improve Consistency
A single, well-tested pipe chain used everywhere text is normalized for display or metadata avoids subtle formatting inconsistencies across pages that could otherwise confuse search engines parsing structured content.
Best Practices
Keep Each Composed Function Small and Single-Purpose
A pipeline is only as readable as the names of the functions inside it; each step should do one clearly-named thing so the composed chain reads like a sentence.
Prefer `pipe` for Sequential Business Logic, `compose` for Mathematical/Utility Chains
Choosing based on which reading direction matches the domain's natural mental model reduces the chance a teammate misreads the execution order.
Frequent Bugs
Composing a function that expects multiple arguments directly into a pipe chain, so it only ever receives the single piped value and silently ignores the rest.
Curry or partially apply any multi-argument function first (e.g. `addTax(0.1)`) so the version placed into the pipeline is unary.
Confusing the evaluation order of compose vs pipe, causing steps to run in the wrong sequence.
Remember pipe runs left-to-right (visual order = execution order) while compose runs right-to-left (math notation order); pick whichever matches how you want to read the code, and stay consistent within a codebase.
Real-World Examples
A Text Sanitization Pipeline
A search feature needed to normalize user-entered search terms through several independent transformation steps before querying an index.
const normalizeQuery = pipe(
(s) => s.trim(),
(s) => s.toLowerCase(),
(s) => s.replace(/[^a-z0-9\s]/g, '')
);
normalizeQuery(' Café Deluxe!! ');