Composition in JavaScript

We will understand the composition in JavaScript in this article.

As the word "composition" means combining two or more things together to compose a new thing.

Function Composition

In JavaScript, there is a technique called the function composition. This technique is utilized to combine two or more functions together and compose a new function.
It is a pattern that is utilized to solve the problems. It prevents code redundancy which means there is no need to repeat the code again and again.
The purpose of function composition is to take the result of one function and utilize that result as an input for the other function. It is a kind of relationship between functions in which one function consists of another function.
The function composition is called higher order functions and compositions because these functions accept other functions as their value.
It uses professional composition libraries such as Ramda or Lodash. These libraries make function programming more accessible.

Understanding function composition mathematically

If there are two functions "a" and "b" then the composition of "a" and "b functions is given below:

a(b(x))

The a(b(x)) is the function composition where b(x) is the function which is calculated first and then the result of function "b" is given to function "a" as an argument.

Below is a code to compose functions "a" and "b":

const a = x => x + 2;
const b = x => x * 4 ;
const composedFunction = x => a(b(x));
console.log(composedFunction());

Let us understand it properly with the help of real-life example.

We can consider a function composition for making a burger as most of us know how to make a burger.

Consider each step used in making a burger as a function:

Burger Bun Slicing Function: A bun is sliced into two parts first.
Spreading Function: Spread like butter, hummus, mayonnaise, or any other spread is being put on the bun slice.
Filling Function: Filling, such as cucumber, tomato, potato, etc., is added to the bun.

When the above-mentioned functions are combined then a new function is created which is called function composition like when the above-created functions when combined make a burger.

Below is a code for creating a burger:

// Burger Bun Slicing Function
const sliceBun = bun => `${bun} is sliced`;

// Spreading Function
const spreadMayonnaise = bun => `Mayonnaise spread on ${bun}`;

// Filling Function
const addFilling = bun => `Filling added to ${bun}`;

// Composition Functions to Make a Burger
const makeBurger = bun => addFilling(spreadMayonnaise(sliceBun(bun)));

console.log(makeBurger("Whole Wheat")); 
// Output: "Filling added to Mayonnaise spread on Whole Wheat is sliced."

Benefits of utilizing a composition function in JavaScript:

Reusability and Maintainability:

It is one of the major benefits of using function composition as each function created is independent of the others so they can be utilized separately with other functions. It permits to create various "composition function" by reusing separate functions.

We have created a burger using function composition. We can reuse the same functions and make a bun pudding.

const makeBunPudding = bun => spreadMayonnaise(sliceBun(bun));
console.log(makeBunPudding("Whole Wheat")); 
// Output: "Mayonnaise spread on Whole Wheat is sliced"

When making butter bun pudding then we can easily make it using the spreadMayonnaise function so it is easy to maintain.

Readability:

When the complex task is broken down into parts then the code becomes easy to read and understand.

Immutability:

The composition function is immutable so they cannot be changed once they are created. It does not modify existing data; instead, each function generates a new value which prevents unnecessary side effects.

Declarative Programming:

Function composition supports declarative programming as it allows us to describe steps of what we require to achieve which makes the code expressive.

There are various composition techniques which are as follows:

Manual composition:

const add = (x) => x + 2;
const subtract = (x) => x - 1;
const multiply = (x) => x * 3;

const composedFunction = (x) => multiply(subtract(add(x)));

Custom Utility Function:

const compose = (...funcs) => (x) => funcs.reduceRight((acc, func) => func(acc), x);

const composedFunction = compose(
  multiply,
  subtract,
  add
);

Utility Libraries:

Ramda and Lodash are two utility libraries that provide functions for function composition.

Using Ramda:

const { compose } = require('ramda');
const composedFunction = compose(
 multiply,
 subtract,
 add
);

Using Lodash:

const { flow } = require(lodash);
const composedFunction = flow(
 multiply,
 subtract,
 add
);

Conclusion:

We have understood the composition in JavaScript in this article. The function composition is a technique that is utilized to combine two or more functions and compose a new function.

Next TopicJavaScript Matrix

← prev next →