JavaScript is in constant evolution.

Since EcmaScript 2015, we got tons of new features and ways to work, and community is moving in the right way in order to provide a better developer experience.

Pipeline Operator is one of the most exciting proposal for the next JavaScript generation.

Currently in stage-0, it is only available using Babel as a transpiler or on Firefox enabling the flag --enable-pipeline-operator .

What is a Pipeline Operator?

Languages like OCaml, F#, Elixir, Elm, LiveScript, Hack (and many others) provides this amazing operator which transform this:

Converting string to uppercase and splitting it into a list in Elixir.

Into this:

Same, but using the pipe operator (again, in Elixir).

So as you can see, it makes the task cleaner by creating a proper pipeline.

But how does it work in JavaScript?

Installation

First of all, the Pipeline operator is currently at stage-0, so you need to use Babel to transpile it.

Next, you’ll need to create a .babelrc file and add the following code:

The last thing you’ll need to do, is adding the following snippet to your package.json file. Not a required step, but fits the purpose.

Great! Now create a index.js file and you’re ready to go!

Using the Pipeline Operator

First of all, TC39 (Ecma Technical Committee) hasn’t specified yet which version of the Pipeline Operator will be included in the next generation of JavaScript.

You may have noticed that se set the proposal to smart while configuring the .babelrc file.

There are currently three proposals:

Smart

Minimal

F#

Each one of them provides different ways to handle EcmaScript features, we’ll use the smart proposal for now.

Let’s say we want to create a random number between 1 and 100.

That’s the standard way:

Ok great, one line! Wow! But this is too hard to read and to understand if you’re not a skilled developer, so… what about this?

That’s awesome! So let’s read it from top to bottom:

Generate a random number Multiply the generated number (using the placeholder # ) by 100 Add one to the generated number (so it won’t return 0 ) Log it to the console

That is so clean!