DEV Community

JavaScript Pipelines and Pipeline Operator Proposal

Omri Luz on April 10, 2025

JavaScript Pipelines and the Pipeline Operator Proposal Introduction JavaScript has continually evolved, integrating new para...
Read full post
Collapse
 
thescottyjam profile image
theScottyJam •

This article was recently posted, but it's content seems fairly outdated. Maybe it was a repost of an article made a little while ago? Despite what the article claims, there's no chance that this will be adopted in ECMAScript 2024 - not without a time machine that is :).

More importantly though, it has been decided that the operand to the pipe operator isn't going to be a function that gets called, instead it's going to be an arbitrary expression with a special placeholder token (such as ^^) that you use to say "put the value from the previous step here". (You can look at the proposal for an in depth explanation: github.com/tc39/proposal-pipeline-...). So a lot of the syntax examples and "passing parameters" section is now outdated.

Collapse
 
omriluz1 profile image
Omri Luz •

Thanks for the correction

Collapse
 
pengeszikra profile image
Peter Vivo •

Thx for post, I am a big fun of pipeline operator, even I used successfully on a scientic react project 2 years long 5 y ago. I will waiting the implementation.

Collapse
 
omriluz1 profile image
Omri Luz •

Thanks for liking it :)

Collapse
 
leob profile image
leob •

Yeah it's like a glorified map/filter/reduce ... reminds me a bit of Haskell !

Collapse
 
omriluz1 profile image
Omri Luz •

pretty similar

Collapse
 
nikunjbhatt profile image
Nikunj Bhatt •

The following example code provided in this post may not work how you expect it to:

const processData = async url => {
  const data = await fetchData(url);
  return data
    |> ({ users } = data)
    |> extractUserData
    |> toUppercase;
};

processData('https://jsonplaceholder.typicode.com/users')
  .then(console.log);
Enter fullscreen mode Exit fullscreen mode

As semicolon in JavaScript is optional, the statement return data should be considered as a complete statement, and the piped lines below it should not execute. So, either of the following approaches may be needed:

const processData = async url => {
  const data = await fetchData(url);
  return data |>
    ({ users } = data) |>
    extractUserData |>
    toUppercase;
};

processData('https://jsonplaceholder.typicode.com/users')
  .then(console.log);
Enter fullscreen mode Exit fullscreen mode

Or

const processData = async url => {
  const data = await fetchData(url);
  return (data
    |> ({ users } = data)
    |> extractUserData
    |> toUppercase
  );
};

processData('https://jsonplaceholder.typicode.com/users')
  .then(console.log);
Enter fullscreen mode Exit fullscreen mode
Collapse
 
pavel_ebeffbf4bbd3c9b6fac profile image
Pavel •

Reminds me of F#

Collapse
 
omriluz1 profile image
Omri Luz •

Gnarly

Collapse
 
wormss profile image
WORMSS •

I don't believe Handling Promises in Pipelines example will actually work, since there is no awaiting happening, and I was under the impression pipelines did not auto unwrap thenables.

Collapse
 
bernardoow profile image
Bernardo Gomes • • Edited

Elm lang syntax