Function composition is an approach where the result of one function is passed on to the next function, which is passed to another until the final function is executed for the final result. Function compositions can be composed of any number of functions.
Traditionally, function composition follows this format:
const double = x => x * 2const square = x => x * x// Tradition approachvar output1 = double(2);var output2 = square(output1);console.log(output2);// variant twovar output_final = square(double(2));console.log(output_final);
In the code above, we can see that we need to call the double
function followed by the square
function to square a term that has been doubled. We can do this by either assigning the values individually in variables and calling functions onto them (lines 4 to 5), or we could use a more direct approach like on line 8.
Another approach is to use the compose
and pipe
functions.
compose
functioncompose
function takes any number of functions and invokes them all one after the other:
// function composition of any number of functionsconst compose = (...fns) => x => fns.reduceRight((y, f) => f(y), x);const double = x => x * 2const square = x => x * x// function compositionvar output_final = compose(square, double)(2);console.log(output_final);
In the code above, we can see that the compose
function is implemented using a general approach on line 2, so now it can take any number of functions. The output remains the same as before even with using this implementation.
pipe
functionOn the other hand, we can reverse the order of the function invocation by using the pipe
function:
// function composition using pipe of any number of functionsconst pipe = (...fns) => x => fns.reduce((y, f) => f(y), x);const double = x => x * 2const square = x => x * x// function pipevar output_final = pipe(square, double)(2);console.log(output_final);
In the code above, we can see that the pipe
function is implemented using a general approach on line 2, so it can now take any number of functions. This is similar to the previous compose
function, except that it uses reduce
instead of the reduceRight
method. The output is different in this case because the square
function is invoked before the double
function while, in our compose
function, it was in the opposite order.
Given the importance of function composition, we may use libraries that have already completed the implementation of both the compose
and pipe
functions. The following libraries might help.
These libraries can be used to avoid implementing either function so you can focus on the uses of it.