Array.prototype.reduce is one of those Array methods in JavaScript that I knew existed but I never really looked into it because I could achieve the same output using Array.prototype.forEach. Recently I decided to learn how it worked and wanted to show a couple examples of how you can transform some code using forEach to using reduce.

So to start, what is Array.prototype.reduce? Array.prototype.reduce is a method that allows you to take an array and reduce it to a single value. For example, maybe you want to create a sum from items in the array, or maybe you want to find the highest or lowest value of something in the array. You can achieve this using standard forEach or for loops, but I am finding that using Array.prototype.reduce requires less code and improves readability once you understand how it works. Let's look at an example.

Let's say we have an array of objects, products in this example, which is a very common scenario in a web application.

var products = [
  { name: 'Running shoes', price: 75 },
  { name: 'Golf shoes', price: 85 },
  { name: 'Dress shoes', price: 95 },
  { name: 'Walking shoes', price: 65 },
  { name: 'Sandals', price: 55 },
];

Calculating the total

The first thing you might want to do is calculate the total price of all the products. Using forEach:

var total = 0;

products.forEach(function (product) {
  total += product.price;
});

console.log(total); // 375

Alternatively, using reduce:

var total = products.reduce(function (previousTotal, product) {
  return previousTotal + product.price;
}, 0);

console.log(total); // 375

Array.prototype.reduce takes 2 arguments. The first argument is a callback function that receives the return value from the previous iteration and the current element in the array being processed. The second argument to Array.prototype.reduce is the initial value. In this case, I want the initial value of previousTotal to be 0. Note that the intial value is an optional argument but required in this example.

Let's look at another example.

Finding the most expensive item

Here I want to find the highest priced product. Using forEach:

var highestPrice = products[0].price;

products.forEach(function (product, index) {
  if (product.price > highestPrice) {
    highestPrice = product.price;
  }
});

console.log(highestPrice); // 95

Inside of the forEach callback function, I check if the price of the current processing product element is greater than highestPrice, and if so, I set highestPrice to that new higher price. And now using reduce:

var highestPrice = products.reduce(function (previousHighestPrice, product) {
  if (product.price > previousHighestPrice) {
    return product.price;
  }

  return previousHighestPrice;
}, products[0].price);

console.log(highestPrice); // 95

In this second example, using reduce required about the same amount of code as using forEach. One minor reason why I like reduce a little more in this example is that finding the highest price is all contained in one function, whereas using forEach required creating an external variable to keep track of the current highest price.

Hopefully this post has helped you understand Array.prototype.reduce. Please let me know what approaches you like in the comments.