Yes! It’s true. JavaScript might get it’s own Pipeline Operator!

“Might?” The pipeline operator is currently in Stage 1 of the TC39 process. Which means that it’s only a proposal at this point and it’s not certain as to whether it will make it into the language at all. Of course, this won’t stop enthusiastic JavaScript developers from trying it.

The pipeline operator being proposed is similar to what can be found in languages such as F#, Elixir and Elm. The syntax which looks as follows |> falls in line with the languages listed above.

What Does It Do?

The pipeline operator would serve as a way to pipe functions together in a readable fashion. Let’s take a look at the following snippet:

const double = (n) => n * 2;

const increment = (n) => n + 1; // without pipeline operator

double(increment(5)); // 12 // with pipeline operator

const result = 5

|> increment

|> double result // 12

In the example without the pipeline operator we can see that the increment function has to be called within the double function in order to get the correct result. Where as in the example with the pipeline operator, the functions can be placed in the order in which they will operate on the argument.

Try It Yourself

Let’s get started with what we will need:

Node/NPM - Get NodeJS

Your favorite code editor - Recommended: Visual Studio Code

Terminal

To The Environment Setup!

Assuming you’ve already installed Node and your favorite editor. We can begin by creating a directory on your computer named pipeline-operator . Within this directory we shall create a file named pipe.js .

Now we will need to install a few packages using NPM(Node’s package manager) which is available to us through Node.

Using your terminal, navigate to the directory you just created. Once there, we will want to execute a few commands. Let’s start with following:

$ npm init -y

This will create a package.json file. This file holds relevant information about the project and it’s dependencies. You can learn more about this files purpose here.

Now let’s add the packages we will need in order to use the Pipeline Operator.

$ npm install --save @babel/cli @babel/core @babel/preset-stage-1

If everything installed correctly your package.json should have a new dependencies property and look similar to the following:

Here we can see the NPM packages that we have installed in order to compile our JavaScript code. “Compile?” Since, the Pipeline Operator is not currently a part of the JavaScript language. We will need to compile our code down to something Node can understand. Essentially we will be using Babel to translate our code into something Node can understand and execute.

In order for Babel to know how to compile the code correctly we will need to give it some help. We need to create another file named .babelrc and add the following lines:

Now Babel will know how to translate the Pipeline Operator into code that can be run by Node.

Putting the Pipeline Operator to work

Inside your pipe.js file we made earlier. Type the following:

const capitalize = str => str[0].toUpperCase() + str.substring(1);

const splitOnSpaces = str => str.trim().split(' ');

const getLastOfArr = arr => arr.pop(); const lastName = 'albert einstein'

|> splitOnSpaces

|> getLastOfArr

|> capitalize console.log(lastName); // Einstein

In order for us to run the following code we will need to use Babel in a special way. We will need to add the following to our package.json files scripts property.

"scripts": {

"start": "babel pipe.js --out-file output.js && node output.js"

},

Now we can simply execute the following in the root of our pipeline-operator directory. Using your terminal:

$ npm start

You’ll know it worked if you see Einstein as an output from your terminal window.

Now What?

Experiment! Create your own examples and share them. Try to imagine how the pipeline operator might clean up some code in your current projects.

If you want to help support the Pipeline Operators journey in becoming a part of the JavaScript language or if you are just looking to see more potential use cases. You can visit the TC39 GitHub Proposal page.

Don’t want to set this project up yourself? No problem. You can find the Repo with the setup all ready to go here!

Feedback is welcome and feel free to connect using the links below.

LinkedIn | GitHub