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()
tomultiplyByTwo()
. Again, we use%
to represent the outcome of the previous operation, i.e. the value of thedivideBySix()
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!
More Tips and Tricks for Javascript
- Javascript: Check if an Array is a Subset of Another Array
- Future Javascript: Javascript Pipeline Operators
- How to sort an array by date in Javascript
- Asynchronous Operations in Javascript
- Javascript Ordinals: Adding st, nd, rd and th suffixes to a number
- Removing the last element of an array in Javascript
- A Complete Guide to Javascript Maps
- Javascript Add Event Listener to Multiple Elements
- What are the three dots (...) or spread operator in Javascript?
- Inserting an Item into an Array at a Specific Index in Javascript