--- title: "The Pipeline Operator" url: "https://www.bekk.christmas/post/2018/12/the-pipeline-operator" authors: ["Erik Wendel"] published: "2018-12-12" updated: "2024-11-07T13:05:28Z" language: "en-US" type: "article" tags: ["JavaScript"] --- # The Pipeline Operator Yet another new feature proposal for JavaScript that we'll live perfectly fine without (but would at the same time also be very handy). ## In short The pipeline operator makes chained function calls read left to right, so data flows through a series of transformations more naturally. It can also be combined with arrow functions and the partial application operator to handle multi-argument functions, though the proposal is still experimental and several syntax variants are being discussed. - **For:** JavaScript developers interested in upcoming language features - **Good to know beforehand:** Basic familiarity with JavaScript functions and function chaining _AI-generated_ Evaluate the following expression: ```js divideByTwo(square(triple(double(increment(0))))); ``` The answer is eighteen. How about that readability, huh? Developers having used F#, Elixir, Elm (or a bunch of other languages) will be reaching for what's called "the pipeline operator" before you can say Santa Claus. The pipeline operator allows for a much nicer syntax to the above code, where you start with the first input to the chain of functions, rather than the last function in the chain: ```js 1 |> increment |> double |> triple |> square |> divideByTwo; ``` The pipeline operator simply swaps the order from `fn3 fn2 fn1 object` to `object fn1 fn2 fn3`. If you're familiar with the unix pipe tool (of course you are), you already understand how this works. ## Why do I care? Because it's coming to JavaScript! Well, maybe. It's currently a TC39 feature proposal in stage 1, meaning it's still considered experimental and that the syntax might very well change before it ends up the language specification. ## Functions With Multiple Arguments This also plays well with multi-argument functions: ```js increment(0) |> x => add(5, x) |> x => divideBy(x, 2) ``` By using arrow functions, we can create new functions that make sure our piped values end up in the right place in the argument list for the next function of the pipeline. This can be improved further by using another new language feature proposal: the partial application operator. ```js increment(0) |> add(5, ?) |> (?, 2) ``` As seen in the example, the partial application operator enables `?` as a placeholder for the value that will be passed from the previous step in the pipeline chain. Under the hood, calling a function with `?` will create a new function with the other arguments bound to their values. Given a function `add`: ```js function add(x,y) { return x + y } // calling add(5, ?) // will give you function (y) { return 5 + y } ``` ## I want this, now! Good! There's been some concerns about this feature among those who govern the ECMAScript standard. As a result, several different variations of this feature has been discussed: 1. The original pipeline operator proposal 1. The ["Smart Pipelines"](https://github.com/js-choi/proposal-smart-pipelines) proposal 1. The ["F# Pipelines"](https://github.com/valtech-nyc/proposal-fsharp-pipelines) proposal As we understand, the committee is currently awaiting feedback from the community on experiences using these, before moving forward. This basically means, that the next step of the process involves people like you and me actually using it in real projects and sharing our experiences. What are you waiting for? ## Relevant resources recommended by the author - [Pipeline operator proposal at TC39](https://github.com/tc39/proposal-pipeline-operator) - [Pipeline operator Babel plugin](https://www.npmjs.com/package/@babel/plugin-proposal-pipeline-operator) - [Partial application at TC39](https://github.com/tc39/proposal-partial-application)