Tutorial

A Look at the JavaScript Pipeline Operator Proposal

Updated on April 16, 2020

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.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about us


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?

Ask a questionSearch for more help

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!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Featured on Community

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel