How to use Array.reduce in JavaScript

In this guide, we will demonstrate some examples of how we can use Array.reduce() in JavaScript. We will share three examples.

• Finding the lowest value in an array of numbers
• Finding the highest value in an object array
• Calculating the sum of a particular value in an object array

Finding lowest number in an array of numbers

We start with our simplest example. Let's create an array with some numbers, and find the smallest number.

const numbers = [12, 45, 4, 34, 7, 2, 34, 11];

const smallestNumber = numbers.reduce(
  (previous, current) => Math.min(previous, current),
  Infinity
);

console.log(smallestNumber); // 2

All right, not to hard right? Well, if you are not familiar with the reduce function, this doesn't make any sense what so ever. Let me explain what is going on.

So, the reduce() function takes a set of arguments. A callback function, and an intialValue. In our case, we set the initalValue to Infinity since we want to find the lowest value, if we would have set it to like -1 or something, that would be the return value at the end since non of our other numbers are smaller than that.

The callback function is the interesting part here, it will accept three arguments (we are only using two here), but they are basically

• previousValue - The previous returned value of the function (in our case, the result of Math.min())
• currentValue - The current element in the array
• index - The current index of the array

So in our first iteration we compare 12 and Infinity, and then 12 is returned from Math.min() and passed in as previous in the next iteration. Next time, we compare 12 with 45 and so on.

Makes sense? I hope so. In our next example, we will work with an object array to finding the team with the highest point in a football turnament!

Finding highest value in object array

All right, let's get our hands dirty.

const teams = [
  {
    name: "California monsters",
    points: 18,
  },
  {
    name: "Colorado bulls",
    points: 23,
  },
  {
    name: "Seattle penguins",
    points: 2,
  },
  {
    name: "New York flowers",
    points: 32,
  },
];

const winningTeam = teams.reduce((prev, curr) => {
  if (prev.points > curr.points) {
    return prev;
  }
  return curr;
}, {});

console.log(winningTeam); // { name: 'New York flowers', points: 32 }

All right, New York flowers is our winning team!

So in this example we are checking the previous teams points and comparing with the current, and based on the highest score, we return the corresponding team.

Next up we will count the total apples picked by some school kids.

Calculating the total sum of a specific value in an object array

Yet again, let's roll up the sleeves.

const kids = [
  {
    name: "Lisa",
    applesPicked: 34,
  },
  {
    name: "Stefan",
    applesPicked: 21,
  },
  {
    name: "Fred",
    applesPicked: 14,
  },
  {
    name: "Esther",
    applesPicked: 97,
  },
  {
    name: "Filip",
    applesPicked: 44,
  },
];

const totalApples = kids.reduce((accumulated, kid) => {
  return (accumulated += kid.applesPicked);
}, 0);

console.log(totalApples); // 210

There we go. In this example, we altered the return value into a number, instead of keeping the original value. So, instead of returning a kid object, we now return a number. Our inital value is 0, and then we simply add each kids applesPicked to the number and return it. And then for every iteration, accumulated will have the total amount of all current apples picked.

Outro

So that's it for this tutorial. I hope you enjoyed it and that it helped you in some way. Reduce is a fantastic function, once you get familiar with it. At first, it is very confusing. but once you have learnt it, you will find that it has enormous impact when it comes to calculating sums, finding highest/lowest values, grouping things etc. This guide shows a very good example when it comes to grouping objects from an array into a more convinient structure.

Thanks for reading and have a wonderful day!