Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

javascript
operators
communitycreator

What is the Javascript pipeline operator?

NDUKWE CHIDERA K.

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Introduction

Operators in Javascript are used to perform some operations on variables and even other operators in an expression. Some come operators are the

  • Arithmetic operators
  • Comparison operators
  • Assignment operators and more.

In this shot, a special operator the pipeline operator will be the focus.

What is the pipeline operator (|>)

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 number
let adding = function(y) {
return y + 4;
}
// Multiplies a number by 8
let multiplying = function(y) {
return y * 8;
}
// Divides a number by 2
let 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.

Combining all codes written during our examples in the code block below.

// Adds 4 to a number
let adding = function(y) {
return y + 4;
}
// Multiplies a number by 8
let multiplying = function(y) {
return y * 8;
}
// Divides a number by 2
let 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 execute
let dvalue = 10;
let evaluate = dvalue |> dividing |> multiplying |> adding;
console.log(evaluate); // Returns 44

RELATED TAGS

javascript
operators
communitycreator

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Keep Exploring