Future Javascript: Javascript Pipeline Operators

📣 Sponsor

Pipeline operators are an upcoming feature to Javascript which gives us another way to pass values through a series of transformations. It gives more context to what developers were trying to achieve when they wrote their code, and allow us to do some cool things to boot. Here, we'll take a quick look at pipeline operators, how they work, and how you can use them today.

Javascript Pipeline Operators: Support

Currently, no browser or server side ECMAScript implementation (like Node.JS) support pipeline operators. You can, however, get them to work using Babel 7.15. You can learn more about installing Babel here, but suffice to say this will allow you to add pipeline operators into your code.

Javascript Pipeline Operators: How they work

Pipeline operators are simply another way to manipulate values in Javascript. The pipeline operator is |>. Suppose we have 3 mathematical functions which add numbers to an input value:


// Adds 1 to a number
let addOne = function(x) {
    return x + 1;
}

// Multiplies a number by 2
let multiplyByTwo = function(x) {
    return x * 2;
}

// Divides a number by 6
let divideBySix = function(x) {
    return x / 6;
}

If we wanted to apply all of these functions to a number we have, we might do something like this today:


let number = 6;
let calculate = addOne(multiplyByTwo(divideBySix(number)));

console.log(calculate); // Returns 3.

Although this works, when using multiple functions this can become quite messy - and often can take many lines. As such, we can simplify the above with a pipeline operator like so:


let number = 6;
let calculate = number |> divideBySix(%) |> multiplyByTwo(%) |> addOne(%);

console.log(calculate); // Returns 3.

As you can see, this simplifies processing of numbers and values so that we can clearly see what is happening. Let's break down what we have done:

First, we use number, and pass it with a pipe operator to divideBySix(). We use % to represent the value from before the pipe operator, in this case, 6 which is in our number variable.
Then we pass the number from divideBySix() to multiplyByTwo(). Again, we use % to represent the outcome of the previous operation, i.e. the value of the divideBySix() function.
Finally, we do it again and addOne() to our value. The outcome is the same, so we still get 3 at the end.

Simplifying Object Mapping with Pipeline Operators

Obviously the above example is a very simple application, but we can also use pipeline operators to do cooler things, like map arrays in a more coherent fashion. For instance, the below takes an object of URL queries, and merges them into a text string which can be added to the end of a URL:


let URLParams = {
    'x' : '10245',
    'linkId': 'eojff-efekv-ef0kw',
    'author' : 'john-smith',
    'featured' : false
}

let getURLQuery = Object.keys(URLParams).map((key) => `${key}=${URLParams[key]}`) |> %.join('&') |> `?${%}`;

// Returns ?x=10245&linkId=eojff-efekv-ef0kw&author=john-smith&featured=false
console.log(getURLQuery);

Conclusion on Javascript Pipeline Operators

Since pipe operators are not widely supported, you can only use this feature with Babel installed. With that said, pipeline operators add a lot of context to your code, and simplify operations so you can expand upon them later. As such, it may be worth giving Babel a try to get this into your code base. If you want to read the full pipeline operator specification, click here.

If you've enjoyed this article, don't forget to subscribe or follow us on twitter!

Last Updated 1642172449726