Javascript .Reduce() Method

The JavaScript reduce method is probably the hardest method for me to get a grip on. So why not write a blog on it!?. Today I will explain how this method works and the amazing upside of using the method once you get the hang of it.

Reduce may be the most versatile function in JavaScript. You can use it to map an array, to count an array, to sum values, to find the min or max value, to find a specific record, to flatten an array, to convert from an array to an object, and the list goes on.

The reduce method in JavaScript gives you a simple way to take an array of values and combine them into one value, or sum the array based on multiple categories. The first time that the callback is run there is no “return value of the previous calculation”. If supplied, an initial value may be used in its place. Otherwise, array element 0 is used as the initial value and iteration starts from the next element (index 1 instead of index 0).

I’ll show you 3 examples of how you can use the reduce method and explain what's going on in the code. For the examples ill be creating a variable called people that is an array with 9 objects(person) inside, and another variable for result.

Example 1.)

Count the number of people in the array and return the number.

The first thing I do is set the result to a new value of “people.reduce()”. Then inside of the reduce method I have a callback function that takes in an accumulator(acc) and the people array. Then return acc + 1 with an initial value of 0. So what's going on is the accumulator will start at index[0] and add 1 to every person in the array. If you decide to try it out on your own, you should receive 9 people as the result.

Example 2.)

Sum up all the ages of every single person inside of the array.

In this example it's almost the same as example 1 but, this time we are looking for the sum of all the people's ages. Inside of the reduce function we do the same as the last example with a callback function that takes in the accumulator and people array. Then we return the accumulator and add the people.age starting at an initial value of 0. The accumulator will loop through the array and grab each person's age and add them together.

Example 3.)

Return the people array with the names of every person.

For this example, we use the same reduce method but we return an array with the spread operator of the accumulator(array) and the person.name. Then setting the initial value to an empty array. If you run the code you should end up with an array of all the people’s names.

This is the best that I can explain using the reduce method. I think that in some situations it would be more beneficial to use a different method but it's always nice to be able to use the reduce method on the fly.

Below I’ll have a link for the reduce method so you can have a better understanding of reading the docs as well. I think it’s definitely a hard method to wrap your head around at first, but when you do it's a super nice javascript method.

Link to reduce docs: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce