New JavaScript pipeline operator: Transform anything into a one-liner đ˛
With the pipeline operator youâll stop writing code like this:
And start writing code like this:
So refreshingly clean â and elegant! All those temporary variables are gone â not to mention the time it took to come up with those names *and* type them (not everyone types like The Flash, unfortunately).
You may have heard this partially true joke attributed to Phil Karlton: âThere are only two hard things in computer science: cache invalidation and naming thingsâ.
Using the JavaScript pipeline operator clears out the clutter to boost readability and write data-transforming code (basically all code) in a more intuitive manner.
Verbosity should be avoided as much as possible, and this works so much better to compact code than reusing short-named variables:
Hopefully, almost no one codes like this on a regular basis. Itâs a pretty horrible technique when done in a large scale; a perfect example showing why we embrace immutability and type systems.
Unlike the pipeline operator, thereâs no certainty that the variable always contains the value you set at any given point; youâll need to climb up the scope to look for re-assignments. We could have used the _ at an earlier point in the code; the value it has at various points in the code is simply not guaranteed.
Now weâre just using an underscore, so without checking out the right-hand side of those re-assignments you canât quickly know what the type of the variable is, unless you have a smart editor like VS Code (although I guess you could say that doesnât matter since theyâre supposed to be âtemporaryâ â at least until theyâre not!).
All in all, poor readability. Fragile and Unstable. 5 times harder for someone new to understand. Also, some would say underscores are âuglyâ, especially in languages like JavaScript where they hardly show up.
Okay, so why donât we just avoid this infestation of temporary underscores, and nest them into one gigantic one-liner?
Itâs a mess. The underscore is gone, but who in the world can understand this at a glance? How easy is it to tell how the data flows throughout this code and make any necessary adjustments?
Understanding, at a glance â this is what we should strive for with every line of code we write.
The pipeline operator greatly outshines every other method, giving us both freedom from temporary variables and readability. It was designed for this.
Here the % only exists within this particular pipeline.
Method chaining?
Who hasnât used and combined heavily popular array methods like map, filter, and sort? Very hard to avoid in applications involving any form of list manipulation.
This is actually great. There arenât any temporary variables or unreadable nesting here either and we can easily follow the chain from start to finish.
The formatting lets us easily add more methods at any point in the chain; feature-packed editor like VS Code can easily swap the processing order of two methods, with the Ctrl + Up and Ctrl + Down shortcuts.
Thereâs a reason why libraries like core http and jQuery are designed like this:
The problem with method chaining is that, we simply canât use it everywhere. If the class wasnât designed like that weâre stuck and out in the cold.
It doesnât work very well with generator methods, async/await and function/method calls outside the object, like we saw here:
But all this and more work with the pipeline operator; even object literals and the async import function.
Could have been F# pipes
We would have been using the pipeline operator very similarly to F# pipes, with the above turning out like this instead:
There was an alternative design. But you can already see how this makes for an inferior alternative: Only single-function arguments are allowed and the operation is more verbose. Unless the operation is already a single-argument function call.
Its weird handling of async/await was also a key reason why it got rejected -- along with memory usage concerns. So, forget about F# pipes in JS!
Use the pipeline operator right now
Yes you can â with Babel.
Babel has a nice habit of implementing features before theyâre officially integrated in the language; it did this for top-level await, optional chaining, and many others. The pipeline operator couldnât be an exception.
Just use the @babel/plugin-proposal-pipeline-operator plugin and you're good to.
Itâs optional of course â but not for long.
Prettier the code formatter is already prepared.
Even though we canât say the same about VS Code or Node.js:
Right now thereâs even speculation that % won't be the final symbol passed around in the pipeline; let's watch and see how it all plays out.
Final thoughts
Itâs always great to see new and exciting features come to the language. With the JavaScript pipeline operator, youâll cleanse your code of temporary variables and cryptic nesting, greatly boosting code readability, efficiency, and quality.
Every Crazy Thing JavaScript Does
Just when you thought you knew all the quirks. Avoid painful bugs and save valuable time with Every Crazy Thing JavaScript Does, a captivating guide to the subtle caveats and lesser-known parts of JavaScript.
Get a free copy here today.
