Understanding the Compose Function in JavaScript
Tags: javascript, beginners, programming, webdev
Published: 2023-03-15 17:01:57

_One of my least favourite concepts in JavaScript had to be the compose and pipe functions, I mean, they are great functions and definitely save a lot of time, but while learning it, it just looked like a bunch of functions returning each other, it was difficult to understand what was really happening._

In this article, we'll be going over the compose function line by line while I explain like to a toddler.

_Before we start, you atleast need a little knowledge of javaScript._

### What is a compose function
The compose function is a higher-order function that takes two or more functions as arguments and returns a new function that applies these functions in a right-to-left order. Basically, a compose function receives a bunch of functions as argument and then sends them to another function inside of itself which applies them from right to left using the reduceRight method in javaScript. et's dive right into it.

Given a typical compose function;

```
function compose(...funcs) {
  return function(arg) {
    return funcs.reduceRight((accum, fn) => {
      return fn(accum);
    }, arg);
  };
}
```
Let's break it down line by line and digest it

```
function compose(...funcs) {
```
This is the beginning of a function called compose(the function doesn't have to be called compose). It takes any number of arguments (functions) and stores them in an array using the spread operator(...). 

```
return function(arg) {
```
Here we return a function which recieves a single argument, the argument it recieves is going to be the element which these functions will be exercuted on. 

```
return funcs.reduceRight((accum, fn) => {
```
This line starts a reduceRight method on the funcs array(remember the array was created virtually, using spread[...] operator), which applies the callback function to each element in the array, starting from the right side. If you don't understand, don't fret, I'll still explain how the reduce function works as you read down.

```
return fn(accum);
```
This line applies each function in funcs to the accum variable. accum is initially set to the value of arg (the argument passed to the returned function), and it gets updated each time a function in funcs is applied to it.

```
}, arg);
  };
}
```
Finally, we set the initial value of accum to the value of arg.


### The reduceRight function
In JavaScript, the `reduceRight` method takes a callback function as its first argument, which is used to apply a given operation to each element in the array, and reduce the array to a single value. The callback function takes two arguments: the accumulator (which starts as the last element in the array) and the current value (which starts as the second-to-last element in the array).

In the `compose` function, the callback function being used with `reduceRight` is an arrow function with two parameters: `accum` and `fn`. `accum` is the accumulator that gets passed from one iteration to the next, and `fn` is the current value being processed by the `reduceRight` method.

The callback function returns the result of applying `fn` to `accum`. This means that each function in `funcs` is being applied to the previous result, and the final result is the output of the last function in the array after it has been applied to the previous result.

### How the compose function executes
Let me walk you through an example callstack for the compose function to demonstrate how it works.

Let's say we have the following functions:

```
function addOne(x) {
  return x + 1;
}

function double(x) {
  return x * 2;
}

function square(x) {
  return x * x;
}
```
And we call compose like this:

```
const composedFunction = compose(square, double, addOne);
const result = composedFunction(2);
console.log(result); // Output: 36
```
Here's what happens step by step:

- we call compose with the arguments `square`, `double`, and `addOne`

```
const composedFunction = compose(square, double, addOne);
```

- Inside the compose function, the `reduceRight` method is called on the `funcs` array `([square, double, addOne])`. The initial value of the accumulator (`accum`) is set to the value of the argument passed to the returned function (`arg`), which in this case is 2.

```
result = 2;
```

- The first iteration of the `reduceRight` method starts, with `fn` set to `addOne`. The function is called with `accum` as the argument, and returns the value 3. This becomes the new value of `accum`.

```
accum = addOne(accum); // result = 3
```

- The second iteration of the `reduceRight` method starts, with `fn` set to `double`. The function is called with `accum` as the argument, and returns the value 6. This becomes the new value of `accum`.

```
accum = double(accum); // result = 6
```

- The third and final iteration of the `reduceRight` method starts, with `fn` set to `square`. The function is called with `accum` as the argument, and returns the value 36. This becomes the final value of `acuum`.

```
accum = square(accum); // result = 36
```

The returned function from `compose` is called with the argument 2. This function applies each function in the funcs array to the argument in a right-to-left order. First, `addOne` is called with the argument 2, which returns 3. Then, `double` is called with the argument 3, which returns 6. Finally, `square` is called with the argument 6, which returns 36

So, in summary, the compose function takes any number of functions as arguments and returns a new function that applies these functions in a right-to-left order. The returned function takes a single argument and applies each function in the provided array to it, starting from the right side. By doing this, we can create a new function that is composed of multiple smaller functions, which can make our code more modular and easier to read.

As usual thank you for reading and I hope you got value for your time. Follow me @frontend_jedi to find more educating reads. Follow me on twitter @[Frontend_Jedi](https://twitter.com/excel_bill) let's connect and grow together.

{% embed https://twitter.com/excel_bill/status/1547292393174716418 %}