Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Has anyone proposed a Pipe operator for javascript?

Many languages have an operator that allows you to pipe the results of one operation into a call to another (e.g. the | operator in bash, the |> operator in F#).

One of the great advantages to my mind of the common idiom of method chaining in javascript is that it reads top-to-bottom, left-to-right:

var fooOddSquares = [1, 2, 3, 4, 5]
    .filter(x => x % 2)
    .map(x => "foo" + x * x)
    .reduce(((acc, str, i) => acc[i + 1] = str; return acc), {});

// => {1: "foo1", 2: "foo9", 3: "foo25"}

compared to compositional code:

var something = func5(
    func4(
        func3(
            func2(
                func1(
                    somedata
                )
            )
        )
    )
);

which reads right-to-left, bottom-to-top. I realize this could be cleaned up via function composition, but that's not necessarily the point. Just to be absolutely clear with what I'm looking for:

var something = func1(somedata)
    |> func2
    |> func3
    |> func4
    //etc...

Doing a google search on the pipe operator in javascript mostly turns up info about the bitwise OR operation. With some digging however I was able to dig up this article describing a dirty-hacked version of operator overloading that could implement something of what I'm talking about. I also unearthed this gist that describes said operator and says that "it has been proposed for javascript".

Looking at ES 2016, I see proposals for an exponentiation operator and the bind operator. Both are useful, but not what I want. So per the headline in the gist, has anyone actually proposed this for javascript?

like image 773
Jared Smith Avatar asked Nov 05 '15 16:11

Jared Smith


2 Answers

A pipeline operator has been proposed for ES7 (ES2016) in December 2015.

https://github.com/mindeavor/es-pipeline-operator

like image 113
Jesse Buchanan Avatar answered Oct 18 '22 08:10

Jesse Buchanan


As mentioned already a pipeline operator has been proposed for ES7 (2016), however that doesn't help much if you want to use something like this right now with babel which exactly how I came across this question 9 months later.

The biggest hitch in supporting the es-pipeline-operator proposal through babel as far as I know is the current inability to use |> or <| as operators which create syntax errors and cannot be fixed without changes to babel and unfortunately does not look like the problem will be resolved any time soon.

I would personally like to see the pipe backward operator added to the proposal as well since both forward and backward are useful in different situations.

For example, I use the pipe backward operator when modifying functions or anywhere I would typically use "compose" over "pipe" which I prefer in certain situations for readability.

const something = curry <| function(state, pattern) {
  // something
}

const something = function(state, pattern) {
  // something
} |> curry

Because these pipe operators are incredibly useful in functional style javascript programming and for the benefit of anyone who came looking for a solution to use this right now like me, I have made a babel plugin that uses the bitwise operators << and >> which I rarely use to achieve both forward and backward piping for the time being and in the rare cases where the bitwise operators are required the use of the "no pipe"; directive will disable the plugin for a certain scope.

https://github.com/michaelmitchell/babel-plugin-pipe-composition

like image 37
Michael Mitchell Avatar answered Oct 18 '22 09:10

Michael Mitchell