// Tutorial //

A Look at the JavaScript Pipeline Operator Proposal

Published on March 11, 2019 · Updated on April 16, 2020
Default avatar
By Dilshod Turobov
Front-end developer
A Look at the JavaScript Pipeline Operator Proposal

While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

The JavaScript pipeline operator proposal, which is currently a Stage 1 proposal, would add a new operator to JavaScript. This new operator would would act as syntax sugar to extend and make chained function more readable.

To demonstrate, let’s start with a simple example without the use of the pipeline operator:

// assume that `withHello`, `withWave` and `capitalize` are available
let greeting = withHello(withWave(capitalize('alligator')))

console.log(greeting) // Hello, Alligator 👋

Now the same example, but using the proposed pipeline operator:

let greeting = 'alligator' |> capitalize |> withWave |> withHello

console.log(greeting) // Hello, Alligator 👋

Or formatted in a more readable way like so:

let greeting = 'alligator' 
  |> capitalize 
  |> withWave 
  |> withHello

console.log(greeting) // Hello, Alligator 👋

As you can see, the pipeline operator can really help make the code more clear and readable, and ultimately more maintainable.

With multiple recursive function calls, the innermost function is called first, which means that the order in which the calls are written needs to be from the last function call to the first, which can be a bit of a backwards way to think about and write code. With the pipeline operator, the written order is reversed and the first function call is added first.

Using the Pipeline Operator Today

As this proposal is still very early stage, you won’t find any support in current browsers. We can make use of Babel to allow us to use it today, and have transpiled code that works in all browsers.

To get started make sure that you installed Node.js on your machine.

Let’s create a new folder and initialize a new project:

$ mkdir pipeline-operator
$ cd !$ 
$ yarn init -y
$ touch index.js

In bash !$ means the last argument of the last command.

Initialize Babel

Now let’s install the Babel dev dependency for our project:

$ yarn add -D @babel/cli @babel/core @babel/plugin-syntax-pipeline-operator

Create a new file called .babelrc in the project directory:

$ touch .babelrc

Copy and paste the following settings into .babelrc:

{
  "plugins":[
    [
      "@babel/plugin-proposal-pipeline-operator",
      {
        "proposal":"minimal"
      }
    ]
  ]
}

Add a start script into the project’s package.json file, which will run babel:

"scripts": {
  "start": "babel index.js --out-file pipeline.js --watch"
}

Start using Babel with the use of our new start script:

$ yarn start

Don’t stop this script while you’re working, it’s in watch mode so it’ll continue doing its job as you change the file. Instead just open another console tab to run the outputted JavaScript file (pipeline.js).

And that’s it, we’re now ready to use the pipeline operator in our code! 🎉

Usage

Let’s first create some helper functions to work with:

index.js
function withPrefix(string, prefix = "Hello, ") {
  return prefix + string;
};

function withSuffix(string, suffix = "It's me!") {
  return string + suffix;
}

function capitalize(string) {
  return string[0].toUpperCase() + string.substr(1);
}

function lowerCase(string) {
  return string.toLowerCase();
}

Let’s see how we would use them without the pipeline operator:

index.js
let greeting = withPrefix(withSuffix(lowerCase(capitalize('WORLD'))))

console.log(greeting) // Hello, world it's me!

// With arguments

let greeting = withPrefix(withSuffix(lowerCase(capitalize('WORLD')), '. We love you <3'), 'Hi there, ')

console.log(greeting) // Hi there, world. we love you <3

The code looks a tad confusing, right? Let’s now look at what it would look like with the pipeline operator:

index.js
let greeting = 'WORLD' 
  |> capitalize
  |> lowerCase 
  |> withSuffix 
  |> withPrefix 

console.log(greeting) // Hello, world it's me!

// With arguments

let greeting = 'WORLD'
  |> capitalize
  |> lowerCase
  |> (str => withSuffix(str, '. We love you <3'))
  |> (str => withPrefix(str, 'Hi there, '))

console.log(greeting) // Hi there, world. we love you <3

Run the code with:

$ node pipeline.js

As you can see, it’s just as easy to use with function arguments.

Arguments

// ...
|> (str => withPrefix(str, 'Hi there, '))

It’s just an arrow function. It’s first argument is what we are trying to process, the string 'WORLD' in our case.

You can even use built-in methods:

index.js
let greetingArray = 'WORLD' 
  |> withPrefix
  |> (str => str.toLowerCase()) 
  |> capitalize
  |> (str => str.split(''))

console.log(greetingArray) // => ["H", "e", "l", "l", "o", ",", " ", "w", "o", "r", "l", "d"]

Conclusion

I hope that this article was useful for you. Remember that it’s just syntax sugar. It’s up to you to use it or not. If you enjoy this article, subscribe to receive more cool articles.

If you’ve enjoyed this tutorial and our broader community, consider checking out our DigitalOcean products which can also help you achieve your development goals.

Learn more here


About the authors
Default avatar
Front-end developer

Hey there👋 I like to make products that are accessible♿️ and delightful to use😊

Still looking for an answer?

Was this helpful?
Leave a comment

This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!