Composition & pipelines

Chain small functions into bigger ones

Functional JavaScript gets easier when each function does one small job: trim a string, validate a record, calculate a total, format a message. Composition is the move that connects those jobs without turning the code into nested parentheses.

You already saw the pieces in higher-order functions, pure functions, and currying. This lesson puts them together: build compose and pipe, choose data-last helper shapes, debug with tap, compose async functions, and read the pipeline operator proposal without pretending it is shipped JavaScript.

The rule for the whole lesson is simple: each stage should accept one value and return the next value. When a stage has a side effect, throws, mutates, or returns the wrong thing, the pipeline becomes harder to trust.

The analogy is useful because it makes two debugging questions obvious: which station received the wrong input, and which station failed to pass the correct output forward? The rest of the lesson answers those questions in code.

compose comes from mathematics. compose(square, increment, double)(3) means square(increment(double(3))). That is why it runs from the rightmost function back toward the left. It is compact once you know the convention, but beginners often read it in the wrong direction.

1const double = (value) => value * 2;Run2const increment = (value) => value + 1;3const square = (value) => value * value;4 5function compose(...fns) {6  return (input) => {7    return fns.reduceRight((value, fn) => fn(value), input);8  };9}10 11const transform = compose(square, increment, double);12console.log(transform(3));

pipe flips the reading direction. The data enters at the left, then flows through the functions in the same order they are listed. Many teams prefer pipe for UI and data-cleaning code because the source reads like a recipe.

1const trim = (text) => text.trim();Run2const lower = (text) => text.toLowerCase();3const dash = (text) => text.replaceAll(" ", "-");4 5function pipe(...fns) {6  return (input) => {7    return fns.reduce((value, fn) => fn(value), input);8  };9}10 11const toSlug = pipe(trim, lower, dash);12console.log(toSlug("  Composition Lesson  "));

Composing with reduce and reduceRight

The implementation is just a reducer. The accumulator is not a number this time; it is the current value moving through the chain. On each iteration, the reducer calls one function and returns that function's result as the next accumulator.

1. pipe uses reduce. It starts at the first function in the array and walks forward.
2. compose uses reduceRight. It starts at the last function in the array and walks backward.
3. The initial accumulator is the input. Without that starting value, the first function would not receive the original data.

The step-throughs above use the lesson's real functions and recordings. Back up and replay them until the order feels mechanical: compose starts on the right, pipe starts on the left.

A pipeline stage is easiest to compose when it is a unary function: one input, one output. But useful helpers often need configuration too. A filter needs a predicate. A join needs a separator. A formatter needs a locale. Data-last helpers receive those options first and return a unary function that waits for the data.

That is why functional helper libraries such as lodash/fp and Ramda lean on curried, data-last helpers. You configure a transformation now, then pipe supplies the collection later. The final code can be point-free because you do not need to write (items) => at every stage.

1const lessons = [2  { title: "Currying", published: true },3  { title: "Composition", published: true },4  { title: "Memoization", published: false },5];6const includeDrafts = false;7 8const filter = (predicate) => (items) => items.filter(predicate);9const map = (fn) => (items) => items.map(fn);10const join = (separator) => (items) => items.join(separator);11const pipe = (...fns) => (input) =>12  fns.reduce((value, fn) => fn(value), input);13 14const visibleTitles = pipe(15  includeDrafts ? (items) => items : filter((lesson) => lesson.published),16  map((lesson) => lesson.title),17  join(" -> "),18);19 20console.log(visibleTitles(lessons));

Data-last is not morally better than data-first. It is a trade-off. Data-first calls are direct when you already have the data in hand. Data-last calls are convenient when you are building reusable stages before the data arrives.

Pipelines are readable when everything works, but they can hide intermediate values when something breaks. A tap helper fixes that. It observes the current value, logs or records it, and returns the same value unchanged.

1const pipe = (...fns) => (input) =>2  fns.reduce((value, fn) => fn(value), input);3 4const tap = (label) => (value) => {5  const shown = Array.isArray(value) ? value.join(",") : value;6  console.log(label + ":", shown);7  return value;8};9 10const normalize = (text) => text.trim().toLowerCase();11const words = (text) => text.split(/\s+/);12const dropShort = (items) => items.filter((word) => word.length > 3);13 14const keywords = pipe(15  normalize,16  tap("normalized"),17  words,18  tap("words"),19  dropShort,20  tap("filtered"),21);22 23console.log(keywords("  Compose small functions well  ").join("|"));

The return value is the important part. console.log(value) returns undefined. If you put that directly in a pipeline, the next stage receives undefined. A proper tap returns value after logging.

Real front-end flows often wait: fetch a cart, add prices, check permissions, format a receipt. If each stage may return a promise, a normal pipe will pass promises around as plain values. pipeAsync uses a promise accumulator so every stage waits for the one before it.

1const pipeAsync = (...fns) => (input) =>2  fns.reduce(3    (promise, fn) => promise.then(fn),4    Promise.resolve(input),5  );6 7const getCart = async (userId) => ({ userId, items: ["notebook", "pen"] });8const addPrices = async (cart) => ({ ...cart, total: 12 });9const formatReceipt = async (cart) => `User ${cart.userId}: $${cart.total}`;10 11async function main() {12  const receipt = await pipeAsync(getCart, addPrices, formatReceipt)(42);13  console.log(receipt);14}15 16main();

This is still sequential. Use it when stage two genuinely needs the result from stage one. If independent requests can run together, start them together with Promise.all before or inside a stage, rather than making a waterfall by accident.

You may see |> in blog posts. It is a TC39 proposal for writing pipelines as syntax instead of helper functions. I verified the current public proposal status with a web search and the TC39 proposal repository on September 26, 2026: the Hack-style pipeline proposal is still Stage 2. It is not part of the JavaScript standard, and it does not run in Node 22 or current browsers without a transform.

1const pipe = (...fns) => (input) =>2  fns.reduce((value, fn) => fn(value), input);3 4const slug = pipe(5  (text) => text.trim(),6  (text) => text.toLowerCase(),7  (text) => text.replaceAll(" ", "-"),8)("  Hello Pipeline  ");9 10console.log(slug);

1const slug = "  Hello Pipeline  "2  |> %.trim()3  |> %.toLowerCase()4  |> %.replaceAll(" ", "-");5 6console.log(slug);

The proposal is worth understanding because it explains what problem the language is trying to solve: readable left-to-right expressions. But until browsers ship it, examples must either be marked non-runnable or shown next to a standard JavaScript equivalent.

Composition works best when the stages are named after business ideas: normalize a slug, select published lessons, price a cart, validate a form model, prepare request headers. It works poorly when every stage is an anonymous trick that must be decoded line by line.

• Formatting: trim, normalize, slugify, and format for display.
• Validation: parse, check, enrich, and return a result object.
• Requests: build a URL, attach headers, fetch, parse JSON, and map errors.
• State updates: apply pure transformations before setting UI state.

Common misconceptions

• “compose and pipe are interchangeable words.” They connect functions, but they normally run in opposite directions.
• “Point-free code is always cleaner.” It is clean when the stage names tell the story. It is cryptic when a temporary variable would explain the data.
• “A debug log can be a pipeline stage.” Only if the stage returns the original value. Plain console.log returns undefined.
• “Async stages work with a normal pipe.” A normal pipe passes promises as values. Use pipeAsync or write the await sequence directly.
• “The pipeline operator is ready because Babel can parse it.” Tooling experiments are not the same as JavaScript engines shipping a standard feature.

Trace one value at a time. For output questions, write the stage order before choosing an answer. For proposal questions, separate runtime JavaScript from syntax that still needs a transform.

Key takeaways

• compose chains functions right to left with reduceRight.
• pipe chains functions left to right with reduce.
• Data-last helpers return unary stages, which makes point-free pipelines possible.
• tap logs or traces while returning the original value unchanged.
• pipeAsync uses a promise accumulator for dependent async stages.
• The Hack-style pipeline operator is Stage 2 as of September 26, 2026, and not runnable JavaScript today.

Up next: Memoization & laziness.