Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Table of contents
1.
Introduction
2.
Definition
3.
Implementation of Pipe Function
3.1.
Code(Normal Approach)
3.2.
Output
3.3.
Code(Using Pipe Function)
3.4.
Output
4.
Refactoring
5.
Accepting More Than Two Functions
5.1.
Code(Using JavaScript Reduce Method)
5.2.
Output
5.3.
5.4.
Code(Refactoring the Reduce method)
5.5.
Output
6.
The Pipeline Operator
7.
FAQs
7.1.
What is a pipe function in JavaScript?
7.2.
What does the pipe function return in JavaScript? 
7.3.
Can a pipe function accept more than two functions as an argument?
7.4.
What is pipe function necessary?
8.
Conclusion
Last Updated: Mar 27, 2024
Medium

Pipe Function in JavaScript

Author Aniket Majhi
1 upvote
Roadmap to SDE career at Amazon
Speaker
Anubhav Sinha
SDE-2 @
25 Jun, 2024 @ 01:30 PM

Introduction

Welcome readers! We hope that you are doing great.

We are going to discuss an interesting topic today. In this era, if you want to make an impression in the programming field or if you want to stand out from the crowd, then learning and exploring different concepts become an essential challenge for many programmers.

In this blog, we will cover an important topic in Javascript, namely the Pipe Function in JavaScript. We will cover different aspects of the Pipe function, which will be helpful for you to learn.

If you want to learn more about JavaScript then follow these links, Basics of JavaScript and Learn Starting With JavaScript.


This blog will enhance your knowledge of JavaScript.So, without further ado, let’s start our topic.

Definition

We can define the pipe based on the Linux article page is shown below:

pipe is a form of redirection used in Linux and other Unix based operating systems to send the output of one program to another program for further processing.

The pipe function can be defined as a function that accepts a series of functions that process an input parameter and return an output that will be considered to be the input of the next function.

Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

Implementation of Pipe Function

As we have already learned, a pipe function takes a series of functions, and each function executes different operations, and the output of one function is fed as an input to another function.

Let’s understand how it works by considering an example:

You are given a number first, add 3 to the number, then multiply 2 to the number, i.e. the ultimate answer should be (number + 3) * 2.

In a traditional way, you can do it by creating two Javascript functions, as shown below.

Code(Normal Approach)

// returns n + 3 (it adds 3 to the number)
const sum = (n) => {
    return n + 3;
}

// returns n * 3 (it multiply 3 to the number)
const multiply = (n) => {
    return n * 3;
}

Output

Now generalization of the above program using the pipe function is shown below:

Code(Using Pipe Function)

// returns n + 3 (it adds 3 to the number)
const sum = (n) => {
    return n + 3;
}
// returns n * 3 (it multiply 3 to the number)
const multiply = (n) => {
    return n * 3;
}
// encapsulating the pipe function
const pipe = (funcA , funcB) => {
    return (arg) => {
        const step1 = funcA(arg);
        const result = funcB(step1);
        return result;
    }
}
//print the result
console.log(pipe(sum,multiply)(2));

Output



You can practice by yourself with the help of Online Javascript Compiler for better understanding.

Refactoring

The current pipe function as shown in the above code is given below:

// returns n + 3 (it adds 3 to the number)
const sum = (n) => {
    return n + 3;
}

// returns n * 3 (it multiply 3 to the number)
const multiply = (n) => {
    return n * 3;
}

// encapsulating the pipe function

const pipe = (funcA , funcB) => {
    return (arg) => {
        const step1 = funcA(arg);
        const result = funcB(step1);
        return result;
    }
}

//print the result
console.log(pipe(sum,multiply)(2));

We can refactor the above pipe function somewhat like the below code.

const pipe = (funcA , funcB) => (arg) => funcB(funcA(arg));

In the above code, the pipe function is refactored in a single line without using any temporary variable.

Accepting More Than Two Functions

In the above example, we have created a pipe function that only accepts two functions. However, according to the definition, it can accept more than one function.

So, according to the definition, if we make the pipe function, it should look something like the below code.

Now we can use the Javascript method Reduce method that executes a reducer function on each element of the array and produces a single output.

If you want to learn more about the reduce() method in JavaScript, follow this link, Map(), Reduce() and Filter() method in JavaScript.

Let’s see how we can implement it.

Code(Using JavaScript Reduce Method)

// returns n + 3 (it adds 3 to the number)
const sum = (n) => {
    return n + 3;
}
 
// returns n * 2 (it multiply 2 to the number)
const multiply = (n) => {
    return n * 2;
}

// returns n / 2 (it divides the number by 2)
const divide = (n) => {
    return n / 2;
}

const _pipe = (funcA, funcB) => (arg) => funcA(funcB(arg));

// merge all function into a single using the reducer function
const pipe = (...funcs) => {
    return funcs.reduce((prev, next) => {
        return _pipe(prev, next);
    });
}

const answer = pipe(sum , multiply , divide)(2);

// here n = 2, it first adds 3 to n so it returns 5 then it multiplies 2 to 5 that becomes 10 then it divides 10 by 2
// so the final answer should be 5
console.log(answer);

Output

By refactoring the above code, we get,

Code(Refactoring the Reduce method)

// returns n + 3 (it adds 3 to the number)
const sum = (n) => {
    return n + 3;
}
 
// returns n * 2 (it multiply 2 to the number)
const multiply = (n) => {
    return n * 2;
}

// returns n / 2 (it divides the number by 2)
const divide = (n) => {
    return n / 2;
}

const _pipe = (funcA, funcB) => (arg) => funcA(funcB(arg));

// refactoring the reducer function
const pipe = (...funcs) => funcs.reduce(_pipe)

const answer = pipe(sum , multiply , divide)(2);

// here n = 2, it first adds 3 to n so it returns 5 then it multiplies 2 to 5 that becomes 10 then it divides 10 by 2
// so the final answer should be 5
console.log(answer);

Output

The Pipeline Operator

The pipeline operator in Javascript (“|>”) is used for piping an expression to a function.

Let’s understand the pipeline operator with an example.

Let a function is defined in JavaScript be given below,

let fun = func(1);

Now, we can rewrite the above function as something like the below by using the pipeline operator.

let fun = 1 |> func;


Let’s see the use of the pipeline operator to out example pipe function.

// returns n + 3 (it adds 3 to the number)
const sum = (n) => {
    return n + 3;
}
 
// returns n * 2 (it multiply 2 to the number)
const multiply = (n) => {
    return n * 2;
}

// returns n / 2 (it divides the number by 2)
const divide = (n) => {
    return n / 2;
}

// pipeline
const ans = 2 |> sum |> multiply |> divide;


Must Read Fibonacci Series in JavaScript  jquery ajax

FAQs

What is a pipe function in JavaScript?

The pipe function can be defined as a function that accepts a series of functions that process an input parameter and return an output that will be considered to be the input of the next function.

What does the pipe function return in JavaScript? 

The pipe function in JavaScript returns a single output based on the last function provided. All other intermediate functions receive input from their previous function and produce output to give as input for the next function. 
It acts something like the below diagram,

Can a pipe function accept more than two functions as an argument?

A pipe function can accept N number of functions as an argument where(N >= 0).

What is pipe function necessary?

The pipe function is necessary because it reduces the size of your code. Thus, it simplifies your code and makes it easier for others to understand. By reducing the size of the codebase, it becomes easier to maintain and test.

Conclusion

In this article, we have extensively discussed the pipe function in JavaScript.

We started with the basic introduction, and then we discussed

  • Definition of the Pipe Function
  • Implementation of the pipe function
  • How to refactor the pipe function
  • How a pipe function can accept more than two functions as an argument
  • The pipeline operator
     

We hope that this blog has helped you enhance your knowledge regarding pipe functions in JavaScript, and if you would like to learn more, check out our articles on An Introduction to JavascriptUsing Functions in JavaScript20 Projects with JavaScript Code Example and Importance of JavaScript to Web Programming. Do upvote our blog to help other ninjas grow.

Head over to our practice platform Coding Ninjas Studio to practice top problems, attempt mock tests, read interview experiences, follow our guided paths, and crack product based companies Interview Bundle.

Happy Reading!

Next article
Function Composition
Live masterclass