Compose Function in Javascript

In JavaScript, function composition allows you to combine multiple functions into a single function. The output of the first function becomes the input for the second, and so on. Here’s how it works:

Understanding Function Composition:

Imagine you have two functions:

1. add(a, b): Adds two numbers (a and b).
2. multiply(x, y): Multiplies two numbers (x and y).

You want to create a new function that performs addition and then multiplication in a single step. Function composition helps achieve this.

Simple Implementation:

JavaScript

function compose(fn1, fn2) {
  return function composed(arg) {
    return fn2(fn1(arg)); // Pass the output of fn1 to fn2
  };
}

Explanation:

• The compose function takes two arguments:
• fn1: The first function in the composition chain.
• fn2: The second function in the chain.
• It returns a new function composed that takes a single argument (arg).
• composed calls fn1 with the argument (arg).
• The result of fn1 is then passed as the argument to fn2.
• The final result of fn2 is returned by composed.

Example Usage:

Get Sushant kumar’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

JavaScript

const addMultiply = compose(add, multiply);

const result = addMultiply(2, 3); // Calls add(2, 3) first, then multiply(5, 2)
console.log(result); // Output: 10 (2 + 3) * 2

Explanation of Usage:

• We create a new function addMultiply by composing add and multiply using compose.
• Calling addMultiply(2, 3) triggers the composition:
• add(2, 3) is called first, resulting in 5.
• The result (5) is then passed to multiply(5, 2), which calculates 10.

Benefits of Function Composition:

• Improves code readability by creating clear, step-by-step function pipelines.
• Promotes modularity by breaking down complex logic into smaller, reusable functions.

Higher-Order Function Approach:

JavaScript provides a built-in higher-order function called reduceRight that can be used for function composition:

JavaScript

function compose(...fns) {
  return fns.reduceRight((result, fn) => (...args) => fn(result(...args)), identity);
}

function identity(x) {
  return x;
}

Explanation:

• This compose function takes a variable number of functions (...fns) using the rest parameter.
• It uses reduceRight to iterate over the functions in reverse order.
• The reducer function takes two arguments:
• result: The accumulated result from previous function calls (initially the identity function).
• fn: The current function in the composition chain.
• It returns a new function that takes variable arguments (...args).
• Inside the new function:
• The function fn is called with the spread operator (...args) to pass any arguments.
• The result of fn is then passed to the result function (which holds the accumulated outcome).
• The identity function is used as the initial value for reduceRight. It simply returns the argument it receives, ensuring the first function gets the original arguments.

This approach allows composing any number of functions and is more concise for experienced developers.