JS Pipeline Operator |> Playground

JavaScript’s newest proposed operator

Note: If you just want to go to the playground and see the Pipeline operator in action head to the section titled “Let’s Play!” below.

Intro

In the world of JavaScript it seems like things have picked up exponentially in the last decade, but especially in the last few years. From the groundbreaking new changes in ES6 and beyond, which introduced us to such amazing features as functional Array methods, arrow functions, generator functions, iterables, the spread operator, the rest operator, class declarations, default parameter declarations, destructuring, and changes in the way that variables were declared to allow for block-scoping and constants ( quite a lot of stuff, right? )

… Basically there has been a tidal wave of change (most of it good — though any Dev worth his salt can find something to gripe about) and, although the sheer mass of the ES6 Spec makes it the most memorable change in recent years, it’s important to realize that the ECMAScript Specification is under continuous development.

Pretext for the Pipeline Operator

Before we get into this further it’s important to make the distinction that the Pipeline Operator is NOT anywhere close to being included into the ECMAScript Specification ( I’ll be referring to it as The Spec ).

The Spec is watched over by a group called TC39 — and in the process of being the guardians of the structure of the web’s most utilized language, they implemented Stages ( 1 proposal, 2 draft, 3 candidate, 4 finished ) in order to maintain general order in the cyber universe. I won’t go into the details of this (though you can find out more from Dr. Axel Rauschmayer’s fantastic article Here) — but the Pipeline Operator is currently only within the proposal stage(Stage 1) which is basically to say that someone said “Hey, this would be a good idea!”, took ownership, wrote up a document, and submitted the proposal to TC39.

tc39/proposal-pipeline-operator

Okay, so what does it do?

The operator provides a more apparent and succinct way to pass information from function to function.

parameter |> fn1 |> fn2;

This may sound superfluous considering our abilities in JavaScript to declare callable functions using Fat Arrow syntax:

let addOne(n) => n + 1;

As a matter of fact the reason why I built a playground was so that I could test out the pipeline syntax for myself. If I’m being honest I’m usually pretty stubborn in accepting a lot of the new standards as they come, and I thought that this particular one would be, frankly, unnecessary and a waste of time.

The magic comes though, when you use functional composition. For instance pretend that I asked you what the following would do in order from first to last:

addOne(addTwo(multiplyByThree(5)));

Regardless of if you could do it(I have faith in you, lads and ladies)— did you notice that you were forced to read from right-to-left ?

The norm though it may be in some cultures, when it comes to programming in JavaScript you’re writing from left-to-right , you’re thinking from left-to-right , and even though the code is interpreted right-to-left , why are you forced to read it the same way it’s processed? It’s both awkward and silly.

Now pretend that I asked you the same question ( what would the following do, in order from first to last ) and gave you this code:

5 |> addOne |> multiplyByTwo |> addTwo;

Easy, right? I bet it was — though I will admit it’s a given that you might have hesitated if you’ve been programming for quite some time. I did, but it’s only because I had a habit of reading from right-to-left when I notice functional composition. Indeed, it was a habit I didn’t even knew I had!

Two quick notes:

1. For further clarity you can separate the lines to make them even more readable.

5 
 |> addOne 
 |> multiplyByTwo 
 |> addTwo;

2. You do have the option of supplying anonymous functions. The first parameter is the return of the previous function or supplied initial value. The above piped functions can also be written like this:

5 
 |> ((n) => n + 1)
 |> ((n) => n * 2)
 |> ((n) => n + 2);

Let’s Play

Below is the Pipeline Playground that I coded up to test out the syntax. Keep in mind that any JavaScript code you write should be placed within

<script type="text/template"></script> in the HTML section of the Pen.

For an explanation of how I coded up an environment to test out features please take a look at my previous article Understanding JavaScript Micro-Templating (It sounds much more complicated than it is, I guarantee it!)

Conclusion

The Pipeline operator is an interesting concept, and definitely one that has had similar operators appearing in other languages for decades. It would be an interesting addition to JavaScript, and I think it does have a lot of merit, especially in the form of clarity for Developers.

There is one sore spot, and that’s when it comes to multiple arguments being piped into functions:

(5, 6) |> addTogether;

The above will not work, and I do believe that there needs to be some kind of ability to pipe multiple arguments to a singular function - at least initially, though I suppose in the meantime an array may suffice, a.e. :

[1,2]
  |> ((a) => a[0] + a[1])
  |> console.log;         // 3

In any case, I hope you’ve enjoyed this article, and a brief introduction into the Pipeline Operator!

Happy Coding!

Resources For More Information:

2ality - JavaScript and more

TC39-Royalty Free TG

tc39/proposal-pipeline-operator