The pipeline operator |> is a proposed JavaScript feature that lets you chain operations in a more readable way. Instead of nesting function calls inside each other, you can write them left-to-right. This matters because deeply nested function calls are hard to read and a common source of bugs.
When you have to read code like h(g(f(x))), your brain has to work backwards from the inside out to understand what’s happening. The pipeline operator lets the code flow naturally from left to right, just like how we read.
How the Pipeline Operator Works
The pipeline operator takes a value on the left and feeds it as the first argument to the function on the right:
// Current way - nested function callsconst result = h(g(f(x)));
// With pipeline operatorconst result = x |> f |> g |> h;Each function in the chain must return a value that the next function can use. If any function returns undefined or throws an error, the pipeline stops there.
A Practical Example
Processing text is a common task that often requires multiple transformations. Think of validating user input, cleaning content for a CMS, or normalizing data for a database. The pipeline operator shines in these scenarios:
// Current way - hard to follow the flowconst cleanName = name => { return capitalize( trim( sanitize(name) ) );};
// With pipeline - clear transformation stepsconst cleanName = name => name |> sanitize |> trim |> capitalize;The pipeline version shows exactly what happens to the data at each step. You can read it like a recipe: take the name, sanitize it, trim it, then capitalize it. If another developer needs to add a step (like checking for profanity or validating length), they can simply add a new line to the pipeline without restructuring nested function calls.
Current Status
The pipeline operator is a Stage 2 proposal, which means:
- It’s not part of JavaScript yet
- You need Babel to use it
- The syntax might change
To use it with Babel:
// babel.config.jsmodule.exports = { plugins: [ ['@babel/plugin-proposal-pipeline-operator', { proposal: 'minimal' }] ]};When to Use The Pipeline Operator
The pipeline operator excels at handling data transformations - when you need to process data through multiple steps. Think of functions that each take one main argument and return transformed data for the next step.
// Processing an order through multiple stagesconst processOrder = order => order |> validateItems |> calculateTotal |> addTax |> formatForSaving;
// Each function is focused and easy to testconst validateItems = order => { if (!order.items?.length) { throw new Error('Order must have items'); } return order;};
const calculateTotal = order => ({ ...order, total: order.items.reduce((sum, item) => sum + item.price, 0)});
const addTax = order => ({ ...order, totalWithTax: order.total * 1.2 // 20% tax});
const formatForSaving = order => ({ id: order.id, items: order.items.map(item => item.id), total: order.totalWithTax, processedAt: new Date()});This approach makes testing straightforward - each function can be verified in isolation. You can check that calculateTotal works correctly without worrying about validation or tax calculations. When something goes wrong, you can quickly identify which transformation caused the issue since the data flows in a clear, trackable sequence.
Need to add a new step like fraud detection? Just add another function to the pipeline. No need to dig through nested function calls. Each function is also a standalone unit that can be reused in other contexts. Maybe you need to calculateTotal for a shopping cart preview, or formatForSaving for a draft order.
The pipeline operator isn’t just about making code prettier - it’s about making it more maintainable, testable, and easier to reason about. When each transformation is a clear, single-purpose function, you build a toolkit of reliable operations that can be combined in different ways.
