Reduce

This week I've decided to write about reduce! Reduce is a built in function for Arrays in JavaScript. When we're talking about different built in functions for array transformations such as map or filter reduce is the most versatile of the bunch. It's our swiss army knife of array transformations!

So what does it do?

It reduces the array to a single value by executing the callback function provided for each value in the array from left to right. If that's really confusing maybe check out my previous blog post on higher-order functions. If it's only a little confusing then let's soldier on and try to clarify this.

A super straightforward example is if I have an array of numbers and I want to get the sum.

const nums = [2, 3, 4, 5]

I could absolutely accomplish this with a loop.

let sum = 0
for(let i = 0; i < num.length; i++) {
   sum += nums[i]
}
//sum = 14

We can accomplish the same thing with reduce.

const sum = nums.reduce(function(sum, num){
   return sum + num
}, 0)

//sum = 14

The logic is pretty straightforward but the syntax is worth breaking down. The syntax for reduce is:

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

So in the example above we're calling reduce on our array of numbers and passing in two arguments. First we pass in our callback function (since reduce takes a function in as an argument it's a higher-order function).

function(sum, num){
   return sum + num
}

I went ahead and wrote it inline but you could also store that function in a variable and pass that in. For the purposes of this example we only need to pass in two of the four potential arguments which are sum (the current total) and num (the current value). As a second argument to reduce I passed in an initial value of 0. So before reduce does anything else it will set the sum to an initial value of whatever you passed in, in this case 0.

Next, reduce is going to iterate over each element in the array from left to right. So for our first iteration it starts at the zero index or left most value (2). It performs the callback function with this num and our initial sum.

function(0, 2){
   return 0 + 2
}

This returns 2. That return value will now be passed in as the sum for our next iterations.

Reduce then moves one index to the right in the array and our new num or currentValue 3.

function(2, 3){
   return 2 + 3
}

We return a value of 5 and this is passed in as the sum on the next iteration. This continues until it's iterated over the entire array and returned our grand total of 14! So it returns only a single value as was mentioned above.

You can also use reduce when your array contains more complex items. So if you had an array of objects representing your office's donut orders for the month.

const orders = [
   { amount: 5, topping: "sprinkles" },
   { amount: 12, topping: "oreos" },
   { amount: 10, topping: "glaze" },
   { amount: 30, topping: "icing" }
]

We don't care about the toppings we just need to know how many donuts we've ordered. We could again use reduce to find that number

orders.reduce((total, order) => {
   return total + order.amount
}, 0)

I used an arrow function here just to give you an idea of what that would look like. We could also take away the curly braces and the word "return" and JavaScript would know to automatically return the value.

order.reduce((total, order) => total + order.amount, 0)

Hopefully that give you an idea on the basics of how reduce works! It doesn't show off how powerful and versatile reduce can really be but it's important to first understand how it works. Hopefully I'll be able to cover some more complex implementations of it in the future!