ES7 Pipe Proposal

I was recently listing to an episode of JavaScript Air at the end of the show durning the picks Kent C Dodds mentioned the pipe operator. This was the first I had heard of the pipe in JavaScript. After some digging I found some interesting information on the proposal.

The pipe operator allows you to chain functions together is a clean and simple syntax. Currently there are a few standard methods for chaining functions.

1. Using pure functions and wrapping each function:


const removeSpace = (word) => {
    return word.replace(' ', '');
}

const capitalize = (word) => {
    return word.toUpperCase();
}

const reverse = (word) => {
    return word.split("").reverse().join("");
}

const result = reverse(capitalize(removeSpace('hello world'))); //DLROWOLLEH

As you can see over time the complexity of the wrapping functions will increase the maintenance effort.

2. Using a chaining function from a popular library such as lodash or underscrore.


//These must be added to the lodash mixins 
const removeSpace = (word) => {
    return word.replace(' ', '');
}

const capitalize = (word) => {
    return word.toUpperCase();
}

const reverse = (word) => {
    return word.split("").reverse().join("");
}
_.mixin({
    removeSpace: removeSpace,
    capitalize: capitalize,
    reverse: reverse
});


const result =  _.chain('hello world').removeSpace().capitalize().reverse().value(); //DLROWOLLEH

This is maintainable however requires the addition of a third party dependency which you might not want. It also requires you to pollute the lodash namespace.

The proposed pipe operator allows you to achieve the same as above but in a much clean and more maintainable method. The issue with the two current methods are maintenance or dependence on others. If and when the pipe makes it into the standard then it removes any dependency and the clean syntax it’s easy to read and maintain. The below example shows:


const result = "hello word"
                |> removeSpace
                |> capitalize
                |> reverse;
//DLROWOLLEH

Now when an extra processing function is to be added its just another line with the “|>” pipe operator. This (to me at least) gives a clear picture of whats going on. Developers that have used bash before will recognize the “|” as a pipe for pushing data into another command or process. The arrow gives a clear direction, this can also support more complex functions.


const result = "hello word"
                |> _ => removeSpace('test', _)
                |> capitalize
                |> reverse;
//DLROWOLLEHTSET

The underscore is a ref to the initial param that’s being passed to the functions, this lets you pass other params or even mimic currying.

I can imagine there will be a lot more examples this can be used for and I’m looking forward to seeing this getting into the Es2016 spec. You can see more about the pipe operator here.

 

chrislaughlin

 

Leave a Reply

Your email address will not be published. Required fields are marked *