[Javascript] Compose multiple functions for new behavior in JavaScript

Posted 2020-10-16 Answer1215

In this lesson you will create a utility function that allows you to quickly compose behavior of multiple functions to create new behavior. By the end, you will have successfully created a tremendously popular helper function that is used in javascript libraries ranging from Redux to Ramda.

 

const startVal = 4;

const squared = x => x * x;
const doubled = x => x * 2;
const addTen = x => x + 10;
const halfNum = x => x / 2;

const result = halfNum(addTen(doubled(squared(startVal))));

The code above is not good enough. We can use ‘compose‘ function instead of nested functions call together.

 

Write ‘compose‘ function:

const compose = (...fns) => initialVal => fns.reduceRight((val, fn) => fn(val), initialVal)

 

Now we can optimizte the code:

const result = compose(
  halfNum,
  addTen,
  doubled,
  squared
)(startVal);