Function Composition

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);

You can also try this code with Online Javascript Compiler

Run Code

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);

You can also try this code with Online Javascript Compiler

Run Code

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);

You can also try this code with Online Javascript Compiler

Run Code

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);

You can also try this code with Online Javascript Compiler

Run Code

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!