JavaScript Pipeline Operator
The JavaScript Pipeline Operator (|>) is used for passing the result of one expression into a function. It’s particularly useful for making long chains of functions easier to read. With this operator, the value before it gets sent as input to the function that follows. You simply arrange the functions in the order you want them to act on the input.
Syntax:
expression |> function
Using the Pipeline Operator
As the Pipeline Operator is an experimental feature and currently in stage 1 proposal, there is no support for currently available browsers and therefore is also not included in Node. However, one can use Babel (JavaScript Compiler) to use it.
Steps:
- Before moving ahead, make sure that Node.js is installed.
- Create a directory on your desktop (say pipeline-operator) and within that directory create a JavaScript file (say main.js).
- Navigate to the directory and initialize a package.json file that contains relevant information about the project and its dependencies.
npm init
- 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
- 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" } ] ] }
- Add a start script to the package.json file which will run babel:
"start" : "babel main.js --out-file output.js && node output.js"
- Run the code:
npm start
Example: This exmaple shows the use of Pipeline Operator.
// JavaScript Code (main.js)
function add(x) {
return x + 10;
}
function subtract(x) {
return x - 5;
}
// Without pipeline operator
let val1 = add(subtract(add(subtract(10))));
console.log(val1);
// Using pipeline operator
// First 10 is passed as argument to subtract
// function then returned value is passed to
// add function then value we get is passed to
// subtract and then the value we get is again
// passed to add function
let val2 = 10 |> subtract |> add |> subtract |> add;
console.log(val2);
Output:
20
20