New JavaScript Pipeline Operator with Example

In this post, We’ll explore different ways to implement pipeline operators in JavaScript. The pipeline operator (|>) is a recent addition to the javascript language.

It offers a strong and concise syntax for data transformation and chaining. This operator allows you to write code that is easier to read and more expressive.

Most current browsers do not offer any support for this operator. You can utilize it right now and have cross-browser compatible code with the help of Babel.

The babel allows you to write modern JavaScript and convert it into an older version that is widely supported in current browsers.

Why do we need Pipeline Operator?

JavaScript developers frequently encounter scenarios where they need to manipulate data, and they apply a series of operations to get the desired results. that produced deeply nested and less readable code. The pipeline operator offers a clear and simple method to resolve this issue.

Pipeline Operator With Example

The Pipeline operator takes the result of the expression on its left and passes it as the first argument to the function on its right. this operator helps to transform complex operations into concise one-liners

Setup Project

Verify that Node.js is installed on your computer before continuing. Alright, let’s make a new project and folder:

$ mkdir pipeline-operator
$ cd pipeline-operator
$ npm init -y
$ touch index.js

install babel library using npm:

$ yarn install --save @babel/cli @babel/core @babel/plugin-syntax-pipeline-operator

Create a new file called .babelrc in the project directory:

$ touch .babelrc

Copy and paste the following settings into .babelrc:

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

Add a start script to the project’s package.json file, which will run babel:

"scripts": {
  "start": "babel index.js --out-file pipeline.js --watch"
}

Start using Babel with the use of our new start script:

$ npm start

Let’s start exploring some examples with the help of pipeline operator: Here’s a simple example:

Example: Double Number

Let’s look at an example where we want to double the input number. Both the options with and without a pipeline operator will be shown.

// Without pipeline operator
const result = double(add(5, 3));

We have to add numbers 5 and 3 and then call the double method. We can convert the above data manipulation using the pipeline operator as follows:

// With pipeline operator
const result = 5 |> add(3) |> double();

in the above code, We have passed value 5 to the add function, and the result is then passed to the double function.

Array Data Transformation

Let’s take another example, We have an array of numbers and you want to filter out the even numbers, and then calculate their sum.

Without the pipeline operator:

const numbers = [1, 2, 3, 4, 5];

const filteredNumbers = numbers.filter(num => num % 2 !== 0);
const sum = filteredNumbers.reduce((acc, num) => acc + num, 0);

console.log(sum);

With the pipeline operator:

const numbers = [1, 2, 3, 4, 5];

const sum = numbers
|> filter(num => num % 2 !== 0)
|> reduce((acc, num) => acc + num, 0);

console.log(sum);

Pipeline Operator With Staring Data

Let’s take a simple string and apply a series of operations. Let’s create two helper methods:

function withHello(string, prefix = "Hello, ") {
return prefix + string;
};

function capitalize(string) {
return string[0].toUpperCase() + string.substr(1);
}

Apply apply above helper method in one-liner code:

let greeting = 'adam' |> capitalize |> withHello

console.log(greeting)

Output:

Hello, Adam

Conclusion

I hope you found this article to be helpful. A clear and expressive syntax for chaining and transforming data is introduced by the pipeline operator. It makes code written by developers cleaner and more readable.