Pipe Operator (|>) For JavaScript

Re:Pipe Operator (|>) For JavaScript by hajile on Friday January 20, 2023 @11:35AM (#34455548)

The F# syntax looks/acts a lot better here (especially paired with lodash). I also feel your code example wasn't done in the way people would actually use pipes.

    import {map, join} from 'lodash/fp' //iterators have better performance

    envars
    |> Object.entries
    |> map(([key, val]) => `${key}=${val}`)
    |> join(' ')
    |> x => chalk.dim('$ ' + x, 'node', join(' ', args))
    |> console.log

Even without lodash, it's still easy to read.

    envars
    |> Object.entries
    |> x => x.map(([key, val]) => `${key}=${val}`)
    |> x => x.join(' ')
    |> x => chalk.dim('$ ' + x, 'node', join(' ', args))
    |> console.log

For sake of completeness, here's the hack-based variant

    envars
    |> Object.entries(%)
    |> %.map(([key, val]) => `${key}=${val}`)
    |> %.join(' ')
    |> chalk.dim('$ ' + %, 'node', join(' ', args))
    |> console.log(%)

[ Parent | on HN ]

Re:Pipe Operator (|>) For JavaScript by captainmuon on Friday January 20, 2023 @11:42AM (#34455683)

The F# syntax would endlessly confuse me though. I'd always wonder whether |> join(' ') means join(x, ' ') or join(' ', x).

[ Parent | on HN ]

Re:Pipe Operator (|>) For JavaScript by hannasanarion on Friday January 20, 2023 @11:50AM (#34455849)

in F# syntax the right side is always a unary expression, so `|> join(' ')` means `|> join(' ')(x)`

(the requirement being that join(' ') returns a function that takes one arg)

[ Parent | on HN ]

Re:Pipe Operator (|>) For JavaScript by hajile on Friday January 20, 2023 @11:55AM (#34455951)

The top example relies on Lodash/fp having curried functions you can use.

The middle example would be using native stuff which is why you have the wrapper function (kinda like you'd have a function wrapping a callback)

[ Parent | on HN ]

Re:Pipe Operator (|>) For JavaScript by de_keyboard on Friday January 20, 2023 @02:10PM (#34458157)

The F# syntax is an incredibly simple bit of syntactic sugar.

Just replace this:

    x |> f

With this:

    f(x)

For the join example, you must do this:

    xs
    |> x => x.join(' ')

It de-sugars to:

    (x => x.join(' '))(xs)

... which of course is simply:

    xs.join(' ')

[ Parent | on HN ]

Re:Pipe Operator (|>) For JavaScript by captainmuon on Friday January 20, 2023 @08:49PM (#34462934)

Sure, I know. What I actually mean is that I don't grok curried functions.

Does join(a)(b) mean join(a, b) or join(b, a)? Does it mean a.join(b) or b.join(a)? And is a or b the delimiter? I don't really feel confident without looking it up or trying it out. I have a similar problem with Haskell's function syntax a -> a -> a.

If the function was called makeJoinerBy(sep)(array), it would be somewhat clearer:

    join = makeJoinerBy(' ')
    result = join(array)

[ Parent | on HN ]

Re:Pipe Operator (|>) For JavaScript by epolanski on Friday January 20, 2023 @02:39PM (#34458606)

Your example wouldn't work as the function would need to be unary.

[ Parent | on HN ]

Re:Pipe Operator (|>) For JavaScript by coffeebeqn on Friday January 20, 2023 @05:39PM (#34461103)

I mean it’s still not very readable. Reading through the code I can tell that it does.. some strong things with envars.

[ Parent | on HN ]

Re:Pipe Operator (|>) For JavaScript by trekkie1024 on Friday January 20, 2023 @06:01PM (#34461364)

Having done some personal projects in F#, I'm a huge fan of the syntax. However we would need most standard functions in JS to be curried to take advantage of it.

[ Parent | on HN ]

Re:Pipe Operator (|>) For JavaScript by wruza on Friday January 20, 2023 @06:22PM (#34461579)

it's still easy to read

That’s highly subjective I’m afraid.

“Take entries of envvars, turn that into k=v, join that by a space, make dim $, previous that, and args, log that”.

Personally I have no clue what’s going on at first glance with all these %%% “thats”. It’s meant to be declarative, but reads imperatively instead.

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

“Log dimmed $, k=v pairs of envvars, node, then args”.

[ Parent | on HN ]

Re:Pipe Operator (|>) For JavaScript by hajile on Friday January 20, 2023 @08:33PM (#34462823)

That's why I prefer the F# version where it's just the names of functions or anonymous arrow functions. Nothing magical about them. It just calls the functions in order from top to bottom.

[ Parent | on HN ]