reduce function in javascript

Reduce is one of the higher-order functions in JavaScript. Other higher-order functions include

Map()
Sort()
Filter()
Fill()

In this article, I will be covering the reduce function as it seems to be the trickiest one to understand.

Before going into the Reduce() function, let’s understand what a higher-order function is.

Higher-Order Functions

A higher-order function is just a function that takes in another function as the parameter or returns a function or does both.

Let’s look at an example

// A normal function
function multipler(x, factor){
    return x * factor;
}

// A higher order function implementation of the same
function multiplier(factor){
    return function(x) {
        return x * factor;
    }
}

The above code can be condensed even more using the arrow functions but let’s not worry about it now.

The normal function can just take two parameters and return the multiplication of those.

The higher order function takes only the factor and returns another function which takes the number to be multiplied with the factor and returns that value.

To see how that helps, consider the following code

let doubler = multiplier(2) //factor = 2
let tripler = multiplier(3) //factor = 3

logging the doubler and tripler now will just return the body of the multiplier function which is another anonymous function.

Now we can call the doubler and tripler functions with a number as the parameter which will be multiplied by the factor.

console.log(doubler(4))
// 8

console.log(tripler(4))
// 12

This is also known as a closure, which you can read more about here.

But now, let’s understand the reduce function

The Reduce Function

It is as we know now, a higher-order function. It is used to reduce an array into something like say, the sum of the array, an average of the array, or the maximum value of the array.

It doesn’t overwrite the original array and returns a copy of the old array with the updated values.

I think it’s time to look at an example. Let’s start with finding the sum of the array

For loop implementation

let values = [3, 19, 10, 8, 5]

// finding the sum of the array using the for loop
let prev = 0
for(let val of values){
    prev += val;
}
console.log(sum) 
// 45

Before looking at the usage of reduce, we need to look at its syntax.

The reduce function takes in two parameters, previousValue and currentValue.

To compare it with the above example, the previousValue will act as the prev variable and currentValue acts as the val variable.

There is also a third parameter initialValue which we’ll look into later.

Now, let’s implement calculating the sum of the array using the reduce function

Reduce function implementation

let values = [3, 19, 10, 8, 5]

function sum(prev, curr){
    return prev += curr
}

//passing the sum function as a parameter to the reduce function
let newValues = values.reduce(sum) 

console.log(newValues) 
//45

Generally, this is not how it is done, but to understand what happens exactly, the above code snippet helps.

Now, The general implementation would look like this

Reduce function using arrow function

let values = [3, 19, 10, 8, 5]

// arrow function alert
let newValues = values.reduce((prev, curr) => prev += curr)

console.log(newValues)

At this point, you may have got a vague idea of how reduce works. Now, let’s look at where initialValue comes in.

Reduce function with initialValue

let values = [3, 19, 10, 8, 5]

// here 20 is the initialValue for prev
let newValues = values.reduce((prev, curr) => prev += curr, 20) 

console.log(newValues)
// 65

The above syntax may be a little confusing, so, to better understand this, let’s use our first example of the reduce function.

In this, I am making only one change, i.e., adding another parameter to the reduce function along with the sum function.

Here, the value of the prev is 20 at the start of execution.

This should help you understand the complete picture of the reduce function.

let values = [3, 19, 10, 8, 5]

function sum(prev, curr){
    return prev += curr
}

//passing the initial value 20 as another parameter
let newValues = values.reduce(sum, 20) 
console.log(newValues) 
// 65

As a final example, let's see how to find the maximum value of a given array


// Finding the maximum value of the given array

let values = [3, 19, 10, 8, 5]

let maxVal = values.reduce((prev, curr) => {
    if(curr > prev) {
       prev = curr
    }
    return prev
})
console.log(maxVal)
// 19

I hope this helped you understand the working of the reduce function. If you were able to understand anything from this, feel free to leave a comment below.

If you were not able to understand anything, still leave a comment below so that I can help you if I can.

Have a great day!

Karthik's blog