Operators in Javascript are used to perform some operations on variables and even other operators in an expression. Some come operators are the
In this shot, a special operator the pipeline operator will be the focus.
|>)As at the time of writing this shot, no browser or server side ECMAScript implementation (like Node.JS) support pipeline operators. Although using Babel 7.15. you can get it to work. You can learn more about installing Babel here, and this will provide you with a compiler that can allow for the use of this experimental feature.
After following the link above to set up Babel with the latest version, you can use any of these commands depending on the package manager you use, to allow babel compile codes having the proposed pipeline feature.
npm install --save-dev @babel/plugin-proposal-pipeline-operator
or
yarn install --save-dev @babel/plugin-proposal-pipeline-operator
The pipeline (|>) operator as the name implies will create a literal pipeline situation where outcome from a particular operation/function is passed to another expression. With the help of pipelines the problem with chained functions becoming a bit unreadable is eliminated. The values 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.
For example, lets take a look at the functions below:
// Adds 4 to a numberlet adding = function(y) {return y + 4;}// Multiplies a number by 8let multiplying = function(y) {return y * 8;}// Divides a number by 2let dividing = function(y) {return y / 2;}
Imagine trying to apply these three functions to a particular value. That might lead us to having something like below.
let dvalue = 10;let evaluate = adding(multiplying(dividing(dvalue)));console.log(evaluate); // Returns 44.
let dvalue = 10;let evaluate = dvalue |> dividing(%) |> multiplying(%) |> adding(%);console.log(evaluate); // Returns 44.
In the order of action of these functions arrangement, the pipeline operator will pass the variable's value to the dividing() function after which to the multiplying() function then to the adding() function. This type of arrangement makes more sense and adds more context to whatever the developer is trying to achieve.
// Adds 4 to a numberlet adding = function(y) {return y + 4;}// Multiplies a number by 8let multiplying = function(y) {return y * 8;}// Divides a number by 2let dividing = function(y) {return y / 2;}/// Uncomment this line// let dvalue = 10;// let evaluate = adding(multiplying(dividing(dvalue)));// console.log(evaluate); // Returns 44/// comment out this for the code to executelet dvalue = 10;let evaluate = dvalue |> dividing |> multiplying |> adding;console.log(evaluate); // Returns 44