A pipe operator for JavaScript: introduction and use cases | Hacker News Reader

A pipe operator for JavaScript: introduction and use cases

2ality.com

58 pointsmariuz58 comments

The problem with Javascript IMHO is that it's difficult to say "enough". As someone who uses it everyday and loves it, I believe it's in a decent place now, but it keeps adding more and more strange operators that virtually no one uses or has use for in everyday applications. Things like Symbols, BigInt, etc. are way too rare in JS and only useful under certain "ideas of workflows" to be worth being part of the core since they introduce a whole incompatible layer of dealing with things and don't mix well with the rest of the language. I'll even throw "classes" and "generators" to the list of things that were a mistake, as time has shown.

This is the same with the pipe operator, we already have arrow functions, thenables, and TWO different types of .pipe(), which makes syntax a lot cleaner when needed. IMHO adding this pipe operator "|>" would be a mistake, it only complicates the language making:

- Browser competition harder, when the language is really broad and difficult it makes it harder to create a new engine.

- Mastering Javascript harder, there's a lot broader amount of concepts there which are not really useful except.

- No real benefit as I explained. For some people's worldview it's better, but for us the rest of mortals[1] it's just overhead.

A really good indicator of whether something is useful in core JS is: has someone made it into a library or sublanguage[2] that is widely used? Or a language feature? Promises and events def passes that test, while Symbols, classes, generators and this new pipe operator definitely don't. Bigint is arguable, since it passes the test but remains fairly fringe use-case in JS.

[1] Note that I'm the first one to experiment with JS and try weird things! I'm just saying that these should remain broken experiments on my computer, or nice libraries in npm, but not part of the specification that no one uses.

[2] Coffescript, JSX, Typescript, etc.

I think it's important to separate two major categories of recent JS additions:

1) Advanced features that cannot be replicated without runtime support

2) Syntax sugar

Symbols, BigInt, and generators are the former. Pipes and classes are the latter. (1) gives library authors access to low-level primitives that can allow them to do things that were literally impossible before (I've gotten a lot of use out of Symbols, personally), but they aren't often used directly in application code. (2) are usually more application-facing, and may or may not be a big enough quality of life improvement to justify their existence.

I guess what I'm saying is: just because you haven't seen lots of Symbols or generators in the wild doesn't mean they aren't having an impact, or weren't worth adding.

To add to this point, it’s quite likely that the vast majority of JavaScript developers are using generators and symbols, whether they realize it or not. The reason is that your build system of choice will typically have been compiling async/await into a combination of generators and iterators for years now.

It’s probably getting to the point where it’s no longer necessary in a lot of cases, but these constructs that “nobody uses” were able to implement the newer and more widely features long before they were available in browsers.

More point to add:

(1) Adds more possibilities, performance improvements, operational shortcuts.

(2) Adds redundant way to do one thing. IOften confuse more than help in the long run.

The former also should not be excluded from application code. Application coder should also be familiar with what those are for.

There's libraries to work with BigInt without "runtime support". Arguably Symbols and Generators cannot get there 100% of their features without runtime support, but for the vast majority of usecases out there (Symbols as a unique keys, generators as a stream of data) there are many ways of doing that with JS without the need of these constructs that are just as clean. For instance, Symbols solve such a very edge case (key collision) that IMHO it's def not worth creating a whole new abstraction for it.

> they aren't often used directly in application code

The problem for me with this is that abstractions leak, and suddenly you are wondering why you cannot add two simple numbers or why there's a 3rd level of hidden properties in objects.

The teams working on evergreen browsers seem to be the more effective place for vetting the continuum between and including 1 and 2--they do remove features. Certainly better than the various experiments across the Internet (including the black hole npm).

This is a well reasoned perspective. After async/await I stopped obsessively keeping up with new JS features. The biggest thorns were gone.

Regarding classes, intuitively I agree, but I'm curious about your reasoning.

I lost it over conditial assignment. That is absolutely something I have no intention of using ever.

Also, JavaScript has some rather quirky behavior. I'd rather see a stricter JavaScript without the quirky stuff take it's place.

FYI, symbols are incredibly useful!

You use "no one" too much. Everyobe around me uses all of those and I'd definitely use the pipe operator.

I think the base pipe operator by itself is nothing but a win; I think it's pretty clear and unambiguous even if you aren't familiar with it, and it makes certain cases much more elegant. I don't really see any downsides to it, except maybe that it has limited usefulness on its own.

My feelings about the "Hack pipe operator" are much more complicated. I can see how it dramatically expands the usecases for piping as a whole, given JavaScript's other norms and constraints (no automatic currying, lots of method calls). But I also think it tangles up control-flow in weird ways that could get really hairy fast. And at some point, when you're no longer "just piping" into a unary function, are you really gaining much benefit over the normal function call syntax?

As someone who's used the pipe operator in a different language in a professional setting, I can attest that it makes code a lot easier to read and write.

I know pipe is popular in other languages and on Linux, but all of the examples on that page look contrived, and seem more like a justification after the fact.

If I had to pick, I'd choose the more limited F# style, it's easier to understand and imposes some sane constraints around usage.

No more JS code golf, brevity in itself should be a non-goal

What a syntactic mess. JS is slowly turning into C++. I've already complained about how spread[1] syntax breaks common intuition in certain use cases, I haven't even had time to keep up with all the insane operators they've been adding.

[1] https://dvt.name/2018/06/02/spread-syntax-breaks-javascript/ (excuse the code formatting, one of my plugins broke)

WASM can't get DOM access soon enough..

Is it planned for the future? I can't find a link to any proposal or RFC

No, they have been busy spending the last 4 years looking for a way to use Web Assembly to solve world hunger

Really though it will come as a combination proposals - "interface types" being one of them

Personal opinion: none of the syntax or results in your blog post were confusing, other than square brackets looking confusingly like curly braces in the font. It’s how splat works in every language I’ve used. “This operation that doesn’t make sense doesn’t work” especially not confusing.

Re-read that post and the idea that this is perfectly fine parenthesis redundancy:

    A = 'hello world'
    console.log( A )   // prints 'hello world'
    console.log( (A) ) // also prints 'hello world'

But this breaks with a random-ass error because of how arrow functions interact with `...rest` parameters

    A = ['hello', 'world']
    console.log( ...A )   // prints 'hello world'
    console.log( (...A) ) // SyntaxError: expected '=>' after argument list, got ')'

Is still absolutely hilarious and reeks of "design by committee."

I read that fine the first time. It’s exactly the behaviour I would expect and would have specced. Splat as an actual operator doesn’t make sense; it’d have to produce some kind of horrible magic value.

Engines might be able to improve the error message, but I can’t say I’ve ever run into that one.

It's easier to see what's going on when you consider the spread operator to be an operator working on the function not the parameters:

    const dotdotdot = <A>(f: Function) => (list: Array<A>) => f.apply(this, list)

    dotdotdot(console.log)([10, 20, 30])
    console.log(...[10, 20, 30])

This feels like a massive break with the most fundamental syntax of the language. The examples might look more readable in isolation, but I feel this would reduce readabilty in practice by making the language more complex to read and for allowing massively mononolithic expressions, like the ternary operator.

I like it. Anyone who’s written complex Excel formulas knows the pain of those deeply nested function calls. For those scenarios this is much easier to read IMHO.

I like the analogy your comment has inspired: JS is the Excel of programming.

I sort of thought Excel was the Excel of programming...

Please no. This “operator” turns everything into an unreadable mess. Where can one vote against it?

Unreadable in your opinion. In my opinion, it is far more readable than the alternative in many cases.

Example case?

There’s an example in the article.

> const y = h(g(f(x)))

This example of nested function calls needs to be read from the inside out (execution is f, g, then h) which is unintuitive to how we read and parse text.

The alternative is to use intermediate variables instead of nested function calls to represent the control flow of f, g, h.

I've come to prefer storing each intermediate value in its own variable.

Debugging becomes a lot easier this way with a break point available at each step of the process.

There's nearly no disadvantage to creating the extra variables given how quickly they can be cleaned up by the GC in these cases.

Historically I would have agreed with this position, but debuggers have gotten a lot better, so it's typically possible to break wherever you need to.

The intermediate variables still have value, just not as much as they used to, and they do (arguably) increase the cognitive load for the reader

But intermediate variables are almost always better if named properly, as they provide a contextual name as to the purpose of the output of the function. Then only very minor downside is a bit more typing and more lines of code.

You forgot the biggest downside which is that naming things is hard. It also often causes important names to get lost in the jumble of temporary names.

> The alternative is to use intermediate variables

That's one alternative.

Another alternative is to use a function to apply functions in readable order (which effectively creates a context where “,” is the pipe operator.)

  const pipe = (x, ...fns) => funs.reduce((acc, fn) => fn(acc), x);

IMO, I think this is far less readable than the pipe operator. Besides that how many times do you need to call three functions without additional parameters?

> I think this is far less readable than the pipe operator

I agree that pipe is more readable.

I didn't say it was a better alternative, just one that is available.

> Besides that how many times do you need to call three functions without additional parameters?

That...depends on programming style, quite a lot.

Stylistically I think it is most appropriate when you are writing conversions/cleanup/transformations. Places where method chaining is nice but not always possible. Suppose you are doing a bunch of string manipulation with custom string operations (maybe a custom regex engine with timeouts unlike the default JS regex API).

A pipeline operator would be nice, but I just took a look and I agree that |> and % are difficult to read. I also think |> is hard to type, which makes it more painful.

Admittedly I don't have a stellar solution to this though. Only alternative I can think of is ~

The tilde (~) operator is already used for Bitwise NOT[0].

[0]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe...

That's not an issue. This is a binary operator not a unary one.

It is a unary operator, from my understanding of operators, as it only operators on one subject (~2). However, I very much doubt TC39 would use this character, as it would cause a great deal of confusion and poor semantics, not to mention the complexity on the engine side (does the user want NOT or pipe?)

Note we already use + as both binary and unary (and for both arithmetic and concatenation).

> Where can one vote against it?

In repos you're contributing to.

The slippery slope toward Scala's operator madness. Please find a sensible stasis.

Checkout this list of new JS/Node.js features [0] as an example.

Will a world with the following be an improvement? [1]

- ??=

- ||=

- &&=

And don't forget the strife around the Python "walrus operator" := [2]

[0] https://node.green/

[1] https://github.com/tc39/proposal-logical-assignment/

[2] https://realpython.com/python-walrus-operator/

> The slippery slope toward Scala's operator madness.

Or is Scala's way what languages eventually converge into?

Funnily, in Scala, all of these are just simple plain methods. Including the pipe "operator". So Scala as a language is actually simpler here.

> Where can one vote against it?

TC39, as the article notes, and where the F#-style pipe has been shot down enough that it's been abandoned in favor of the Hack-style one by those championing a pipe operator.

I am against this sort of churn, but for a different reason ---https://news.ycombinator.com/item?id=29894300

For you maybe. For me it is a great addition. If you dont like it use font ligatures.

This is pretty disgusting to me. It just looks messy.

    const testPlus = () => {
       assert.equal(3+4, 7);
    } |> Object.assign(%, {
        name: 'Test the plus operator',
    });

The previous code is equivalent to:

    const testPlus = () => {
      assert.equal(3+4, 7);
    }
    Object.assign(testPlus, {
      name: 'Testing +',
    });

We could also have used the pipe operator like this:

    const testPlus = () => {
      assert.equal(3+4, 7);
    }
    |> (%.name = 'Test the plus operator', %)
    ;

I don't really see the point in general purpose chaining. I don't really see the point of flatmapping tons of nested function calls. Instead we can abstract it and start another nested stack if necessary. I thought we moved away from utilizing promises towards async await because of the chaining issue. It feels like it's being repeated.

The example from TC39 is also fairly insipid:

    console.log(
      chalk.dim(
        `$ ${Object.keys(envars)
          .map(envar =>
            `${envar}=${envars[envar]}`)
          .join(' ')
        }`,
        'node',
        args.join(' ')));

I don't think it should have been written like that. The Object.keys().map().join() should've been assigned to an appropriately named variable before being used in another function. There are better ways to avoid writing code this way.

Duplicate of recent discussion: https://news.ycombinator.com/item?id=30124754

From earlier today: https://news.ycombinator.com/item?id=30124754

One minor nitpick, there's no difference between n-ary functions and unary functions as any n-ary function is homomorphic to the curried version.

Instead of adding more features to a basically broken language, why not fixing the essentials first?

typeof null === "object" language consstency etc

but hey, let's add more syntax sugar

Backwards Compatibility -- So much code out there depends that typeof null === "object".

Reply on news.ycombinator.com