A Look at the JavaScript Pipeline Operator Proposal

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

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

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:

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:

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:

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:

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.