JS Reduce function. How React compose Function works.

3 min readOct 11, 2018

Reduce() method reduces the array to a single value. It executes a provided function for each value of the array from left-to-right.

[2, 3, 5, 7, 9].reduce(function(acc, cur, curInx, arr) {
    return accumulator + currentValue;
}, initialValue);

Accumulator — its the accumulated value
CurrentValue — its the current value in the loop
CurrentIndex — index of current value in the array
Array — the whole array

Will talk about initialValue in the next paragraph. So the loop goes like this :

When we pass the initial value as 6 the loop goes like this :

Here the index starts from 0 itself, as we passed the initial value

Now that we know how reduce works. There are lot of other things that we can do with reduce. Like in my previous post ( access-deeply-nested-objects-without-the-long-if-conditions-using-reduce ) we used reduce to check if a key exist in the object rather than using the typical ‘if’ condition, which disturbs the readability and also adds a lot of code.

If you have worked with react before, there is a compose function which composes set of functions from right to left and then apply each of them individually and return the final value. They internally use reduce function to do the above. Lets see a smaller version of that compose function using reduce.

Say we have three functions who accepts an input, manipulate them and return the value back.

function increment(input) {return input + 1}
function decrement(input) {return input - 1}
function double(input) {return input * 2}

to get the final value of the input value with all the functions applied in order would be,

const final = increment(double(decrement(input)));

Same thing can be achieved using reduce function,

let pipeline = [increment, double, decrement];const result = pipeline.reduce((acc, curVal) =>
    () => acc(curVal(2)), // 2 is the value for these functions
    (args) => { console.log(`arg: ${args}`)}
)result()

Here in the first loop we are passing a function as the initial value(acc) which just logs args, ‘curVal’ will be the first index in the array(increment function). So when the loop runs it returns a function which is acc(increment(2)), this becomes the acc in the second loop and ‘curVal’ is second index in the array(double function) which will be like acc(increment(double(2))) and the loop goes on.

So when we call result(), the final return value will be acc(increment(double(decrement(2)))), where decrement being the last index in the array, runs first with input value 2 and the returned value from decrement function is passed as input to double, whose result is then passed as input to the increment function and then the final value is passed to acc, which just logs the value.

const val = decrement(2) // 2-1, returns 1
const val1 = double(val) // 1*2 returns 2
const val2 = increment(val1) //2+1 returns 3
function(val2){
    console.log(val2) // prints 3
}

The catch here is the first index(i.e. first function) executes the last. They are executed from right to left.

Hope this post helped you understand about reduce and compose function. Happy coding :) :)

JS Reduce function. How React compose Function works.

Written by Spoorthi Naidu