DEV Community

Nhan Nguyen
Nhan Nguyen

Posted on

22 1

JavaScript Pipeline Operator

The JavaScript Pipeline Operator ( |> ) is used to pipe the value of an expression into a function.

This operator makes chained functions more readable.

This function is called the ( |> ) operator and whatever value is used on the pipeline operator is passed as an argument to the function.

The functions are placed in the order in which they operate on the argument.

šŸ‘‰ Syntax

expression |> function

šŸ‘‰ Using the Pipeline Operator

As the Pipeline Operator is an experimental feature and is currently in the stage 1 proposal, there is no support for currently available browsers. Therefore, is also not included in Node. However, we can use Babel (JavaScript Compiler) to use it.

Steps:

āž– Make sure that Node.js is installed.

āž– Create a directory on our desktop (pipeline-operator), and within that directory create a JavaScript file (main.js).

āž– Navigate to the directory and initialize a package.json file that contains relevant information about the project and its dependencies:

npm init
Enter fullscreen mode Exit fullscreen mode

āž– Install Babel in order to use the operator. A pipeline operator is not currently part of JavaScript language, babel is used to compile the code so that it can be understood by Node.

npm install @babel/cli @babel/core @babel/plugin-proposal-pipeline-operator 
Enter fullscreen mode Exit fullscreen mode

To direct Babel about the compilation of the code properly, a file named .babelrc is created with the following lines:

{
  "plugins": 
  [
      [
          "@babel/plugin-proposal-pipeline-operator",
          {
              "proposal": "minimal"
          }    
      ]
  ]
}
Enter fullscreen mode Exit fullscreen mode

āž– Add a start script to the package.json file which will run babel:

"start": "babel main.js --out-file output.js && node output.js"
Enter fullscreen mode Exit fullscreen mode

āž– Run the code:

npm start
Enter fullscreen mode Exit fullscreen mode

šŸ‘‰ Example

const step = 5;

function add(x) {
  return x + step;
}

function subtract(x) {
  return x - step;
}

10 |> subtract |> add |> subtract |> add |> console.log;
Enter fullscreen mode Exit fullscreen mode

Stackblitz Demo


I hope you found it useful. Thanks for reading. šŸ™

Let's get connected! You can find me on:

Image of Timescale

Timescale ā€“ the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

Top comments (1)

Collapse
 
artydev profile image
artydev ā€¢

Thank for all your articles

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more