All You Need To Know About Pipeline Operator And Piping In JavaScript

There are many useful concepts in functional programming. 

 

An example is pipeline operators and piping. 

 

You will learn about pipeline operators and piping in this tutorial and how they work. 

 

We will also provide you with a tutorial on how to write your own JavaScript pipe function.

 

 

A brief overview

 

In JavaScript, the pipeline operator has been discussed for many years without becoming a reality. 

 

In response, the pipeline operator became a draft stage 1 of the TC39 process. 

 

This set it up for a higher stage in 2021.

 

As a consequence, the pipeline operator is not yet a stable feature of the JavaScript language and is subject to change. 

 

A plugin for Babel already exists that allows us to use this feature. 

 

We don't need the plugin or feature to emulate what a pipeline operator does.

 

In addition to the pipeline operator, we can create our own function using existing JavaScript syntax. 

 

However, before we do so, let's have a look at the pipeline operator and the piping.

 

Easy Piping

 

 

It may seem difficult to understand what piping functions are, but it is not. 

 

Pipelining implies taking input and passing it through a function before sending it to another function. 

 

This allows you to take some value as an input and process it through a series of functions to get one value out of it.

 

By using method chaining, this can be accomplished. 

 

This approach consists of taking a value and calling some method on it. 

 

By chaining the subsequent method to the previous one instead of calling it separately, you avoid wasting time.

 

 

Alternatively, piping can be used without a pipeline operator.  

 

Custom functions work well with this solution. 

 

The argument to one function call is passed to another function call instead of chaining functions. 

 

To get the result you need, you can pass a value returned by one function to another. 

 

 

It's a problem when more and more functions are called. 

 

Your code can rapidly become unreadable as you add them. 

 

Here's what we can do with the help of pipeline operators.

 

Pipeline Operator

 

The pipeline operator in JavaScript uses a very specific syntax. 

 

It uses this "pipe"|> symbol. 

 

In order for this operator to be used, it must be placed between the value you wish to pass to a function call and the function you wish to call. 

 

A pipe is formed by putting an > symbol between two functions. 

 

The last function is the last in the chain, so the symbol > shouldn't be used after it. 

 

Let's rewrite this example with piping to demonstrate the pipeline operator. 

 

 

The pipeline operator greatly improves the readability of our code. 

 

A few differences, such as missing parentheses in function calls, might take some getting used to. 

 

Custom Piping Function

 

Although the pipeline operator looks useful, the fact that it is still in stage 2 may prevent its use.

 

The JavaScript specification does not guarantee it will be accepted. 

 

Even if it will be accepted eventually, it is unclear when it will be accepted. 

 

After making it to stage 2, the operator already took a long time. 

 

It's fortunate that we have two options. 

 

The first one is the Babel plugin, which will let us use pipeline operators right now before the pipelines reach stage 3 or 4. 

 

As an alternative, we can create our own piping function using JavaScript. 

 

Let's build our own custom function using JavaScript. 

 

Using this piping function is simple; we just need a function that takes an unknown number of arguments. 

 

All the arguments, which will be functions, will be iterated over so that each will be called. 

 

Using the piping function, we will add each value to the previous value after each function call. 

 

The previously returned value will serve as an argument to our piping function for each call. 

 

As soon as the last function is called, the accumulator of previous values will be added to the last value, and the final value will be returned. 

 

While it may sound complicated, using the reduce() method can make it easy.

 

 

Custom piping functions are very simple to implement. 

 

They are composed of two things, arrays of arguments and a reduced method. 

 

Currying is a method for fixing the initial value passed as the first argument that may not be liked by some developers. 

 

In the first call, we can move the initial value into a separate function call and remove the initial value from the arguments array. 

 

 

The pipeline operator is at stage 2 at the time of writing this article. 

 

There is a Babel plugin to translate pipeline operator syntax into JavaScript, but I wouldn't recommend using it in production code since there is a lot that can go wrong.

 

In order to use this feature, we used a custom implementation, but there are also alternatives. 

 

If the operator changes in the future, your code will still work no matter what changes the operator proposal makes. 

 

And if the operator goes away, your custom implementation can be migrated easily.

 

Conclusion

 

You can use the pipeline operator to keep your code readable while using piping functions. 

 

It's not an official JavaScript member yet. 

 

However, that doesn't mean it can't be used either directly, or indirectly, through Babel.