Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Table of contents
1.
Introduction
2.
What is Function Composition?
3.
Compose And Pipe Function
3.1.
Compose Function
3.1.1.
Working of Compose Function
3.2.
Pipe Function
4.
FAQs
5.
Key Takeaways
Last Updated: Mar 27, 2024

Function Composition

Author Rajat Agrawal
0 upvote
Roadmap to SDE career at Amazon
Speaker
Anubhav Sinha
SDE-2 @
25 Jun, 2024 @ 01:30 PM

Introduction

Function composition is a mechanism for combining many simple functions to create a more complicated one.  Each function's output is passed on to the next. In mathematics, we frequently use the notation f(g(x)). The result of g(x) is the value passed into f. We may achieve the composition in programming by writing something similar.

Some functions are present that help achieve function composition at ease, like Compose and Pipe functions.

Let’s learn about function composition with the help of simple and helpful code examples.

What is Function Composition?

Function composition is a method where the output of one function is passed on to the next function, which is passed on to the next, and so on until the final function is executed for the final result.

Function compositions can be made of any number of functions.

Let’s see how composition works traditionally.

// Tradition approach
const double = x => x * 2
const cube = x => x * x * x

//Method 1
let result1 = double(2);
let result2 = cube(result1);
console.log(result2);

//Method 2
let final_result = cube(double((5)));
console.log(final_result);

Output: 

In the code above, we can see that we need to call the double function followed by the cube function to cube a term that has been doubled. We can do this by either assigning the values individually in variables and calling functions onto them like Method 1, or we could use a more direct approach like Method 2.

Both the methods will become complex if the number of functions increases too much. We can use an alternate approach of using Compose and Pipe functions in this case.

Let’s learn how to use compose and pipe functions to achieve function composition.

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

Compose And Pipe Function

The compose and pipe are the high order functions that take two or more functions as their arguments and compose them.

Compose Function

The compose function takes a number of functions as its argument and calls them all one by one.

Syntax:

 const compose = (...functions) => args => functions.reduceRight((arg, fn) => fn(arg), args);

The compose is just a one-line function through which we can easily achieve Composition.

Working of Compose Function

Let’s understand how it works:

1.) It is a higher-order function. It is a function that takes a number of functions and calls them all one by one.

2.) Compose accepts several functions as its arguments and converts them to an array of functions using the spread operator: […]

3.) After that, we simply reduceRight those functions. The current argument is the callback's first parameter. The current function is the second argument. Then, we call each function with the current argument, and the result is used for the next call.

Now we can use Compose function in our previous example.

//Compose Function
const compose = (...functions) => args => functions.reduceRight((arg, fn) => fn(arg), args); 
const double = x => x * 2
const cube = x => x * x * x

let final_result = compose(cube, double)(5);
console.log(final_result);

Output: First, the double of 5 happens, which results in 10, then a cube of 10 happens, which leads to the final result of 1000.

Pipe Function

Pipe Function works exactly similar to the Compose Function, and the major difference is it uses reduce instead of reduceRight and reverses the order of function invocation.

Syntax:

 const pipe = (...functions) => args => functions.reduce((arg, fn) => fn(arg), args);

Let’s use the Pipe function in our previous example.

//Pipe Function
const pipe = (...functions) => args => functions.reduce((arg, fn) => fn(arg), args); 
const double = x => x * 2
const cube = x => x * x * x

let final_result = pipe(cube, double)(5);
console.log(final_result);

Output:

Since the Pipe function is working in reverse order of function invocation, First the cube of 5 happens, which results in 125, then double of 125 happens, which leads to the final result of 250.

FAQs

1. Define Function Composition.

Function composition is a method where the output of one function is passed on to the next function, which is passed on to the next, and so on until the final function is executed for the final result.

2. Define Compose Function.

The Compose function is a higher-order function that takes a number of functions as its argument and calls them all one by one.

3. Define Pipe Function.

The Pipe function is a higher-order function that takes a number of functions as its argument and calls them all one by one but in reverse order.

Key Takeaways

In this article, we have extensively discussed Function Composition in JavaScript, how to achieve function composition and the uses of Compose and Pipe functions. If you want to learn more, check out our article on An Introduction to Javascript, and Object Prototype.

Do upvote our blog to help other ninjas grow.

Happy Coding!

Live masterclass