Javascript's New Pipeline Operator
Javascript is getting a new operator! Maybe.
A new operator is currently in stage 1 of the TC39 proposal process. Stage 1 is still early in the process, but getting to stage 1 means that it is being considered, and has an audience of developers pushing for it. If you have recently learned Javascript, or you’re still inexperienced with the language, you may be wondering what new operator Javascript could possibly need. It’s called a pipeline operator, and its necessity is definitely debateable. In this post, I want to give an overview of what the pipeline operator does, along with the positive and negative impacts of adopting it.
|>
The operator shown above allows us to pipe a value through a chain of functions. Basic syntax support for the operator looks like this:
expression |> function
To understand why this new operator is useful, it’s worth looking at a real example.
Sidenote: you won’t be able to run this example in any JS engine currently available at the time of posting this article. You will need the pipeline operator babel plugin (or similar transpiler tool) if you want to run these examples locally.
const double = x => x * 2;
const num = 5;
const doubled_num = num |> double;
console.log(doubled_num); // 10
Looking at the above example, you may have come to the conclusion that this operator is pretty useless. In this particular example, you’re absolutely right. We could have just as easily invoked the double function and passed it our num constant. The code below gets us the same output, and it’s easier to understand.
const doubled_num = double(num);
console.log(doubled_num); // 10
Admittedly, this operator does JUST invoke functions, but it becomes much more useful with longer pipelines.
const name = "charles";
const greet = name => `Hello, ${name}`;
const capitalize = str => str.toUpperCase();
const exclaim = str => `${str}!!!`;
const loudGreeting = name |> greet |> capitalize |> exclaim;
console.log(loudGreeting); // HELLO, CHARLES!!!
Here is what that code would look like without the pipeline operator.
const name = "charles";
const greet = name => `Hello, ${name}`;
const capitalize = str => str.toUpperCase();
const exclaim = str => `${str}!!!`;
const loudGreeting = exclaim(capitalize(greet(name)));
console.log(loudGreeting); // HELLO, CHARLES!!!
Even in a trivial example like this, you can see that the pipeline operator offers better readability. With the pipeline operator, I’m able to read the operations in the order they are executed from top to bottom instead of unraveling an onion of nested function calls in my head. Although the syntax is new, the idea of piping values through multiple operations is not. This functionality exists in many other languages, and shows up inside nearly every JS helper function library like underscore and ramda.
Do we need the pipeline operator?
Being someone who would use it in my own development, I still consider this operator a “nice to have”. I’ve been using this same functionality for a couple of years now with Ramda’s compose and pipe functions, and they don’t cause me any trouble. In the rare case where I absolutely can’t import third-party libraries, I can always write my own piping functionality in a few lines of code.
const pipe =
(...fns) =>
input => {
return fns.reduce((acc, f) => {
return f(acc);
}, input);
};
// referring to the earlier example
const loudGreeting = pipe(greet, capitalize, exclaim)(name);
console.log(loudGreeting); // HELLO, CHARLES!!!
The native pipeline operator does separate itself in some ways from third-party library pipeline helpers. The pipeline operator will support many Javascript specific syntaxes and language features like generators and async/await. Having baked-in support for features unique to JS is definitely a perk of adopting the new operator.
Is there a downside to adding the operator?
Personally, I would enjoy using the new operator. It provides a cleaner way to express function composition and is a feature supported in many other popular languages. I think if Javascript were created in 2020, the operator should absolutely be a part of the language. However, that isn’t the case. Javascript is a matured language used by millions of developers. Adding new features like this comes at a cost — it adds complexity to THE most popular programming language in the world. Sure, this single new operator probably won’t cause anyone headaches, but this isn’t the only operator addition to Javascript in the past few years, and it won’t be the last. Generators, object/array destructuring, async/await, classes, arrow functions, etc. Although these are all great to work with and improve the language, it’s hard not to feel bad for new programmers entering the JS world.
Javascript was already difficult to learn when I started, but I can’t imagine learning it today. It feels like Javascript has gone through a BC and AD era, and for beginners, it’s very difficult to figure out what’s old and what’s new. Obviously, it’s not impossible to learn it, but I sympathize with beginners reading multiple tutorials that tell them to do the same thing in multiple different ways. With an increasingly complex language like Javascript, I have to believe a lot of new programmers are losing interest early on because they can’t MAKE something without struggling for hours to understand which function syntax they should use. I don’t think this is a reason for the language to stop progressing, but I think it needs to be considered before we continue over-saturating the language with new functionality.
The barrier to entry for self-taught developers is getting higher, and adding new operators for minor convenience is a contributor.
For more information, examples, and updates on the new pipeline operator check out these resources 😀
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Pipeline_operator
https://github.com/tc39/proposal-pipeline-operator