Secrets of reduce in JavaScript

JavaScript is an amazing language, almost all websites use it and it gives breath to any webpage by its spectacular features.

One of the amazing methods of javascript is reduce which is a method that executes a reducer function (that you provide) on each element of the array, resulting in a single output value.

With this reducer, you can do many amazing things like summing a list of numbers, converting an array to an object, or even more like sorting and optimizing an array.

In this article, I am going to explore the reduce method and show some examples of its usage.

arr.reduce(callback, initialValue);

callback pass accumulator, currentValue, index, array

So let’s see it in action, and start from simple examples

1. Summation of an array of a number or object.
It can be used for summing grades of a student to get an average or to calculate the total cost of an order.

[1, 2, 3, 4].reduce((sum, item) => sum + item, 0)
// 10

and

[
  { id: 1, product: "shoe", cost: 85.0 },
  { id: 2, product: "sacks", cost: 15.0 },
  { id: 3, product: "belt", cost: 40.0 },
].reduce((sum, item) => sum + item.cost, 0)
// 140

2. Converting an array to an object or an object to an array.
Let’s say you have a list of names and want to make them into an array of student objects. Or you want to list products in an order.

[
  'Shayan',
  'Sara',
  'George',
  'Brent',
  'Elisabeth'
].reduce((obj, item, index) => ({
  ...obj,
  [item]: {
    id: index,
    name: item,
  }
}), {})

// {
//   Shayan: { id: 0, name: "Shayan" },
//   Sara: { id: 1, name: "Sara" },
//   George: { id: 2, name: "George" },
//   Brent: { id: 3, name: "Brent" },
//   Elisabeth: { id: 4, name: "Elisabeth" }
// }

and

[
  { id: 1, product: "shoe", cost: 85.0 },
  { id: 1, product: "sacks", cost: 15.0 },
  { id: 1, product: "belt", cost: 40.0 },
].reduce((ary, item) => [...ary, item.product], []);

// ["shoe", "sacks", "belt"]

3. Filtering duplicate items within an array of item

[
  'Shayan',
  'Brent',
  'George',
  'Brent',
  'Shayan',
  'Brent'
]
.reduce((ary, item) => (ary.includes(item) ? ary : [...ary, item]) , []);
// ["Shayan", "Brent", "George"]

and

[
  'Linux', 
  'Mac',
  'Windows',
  'Mac',
  'Linux',
  'Mac'
].reduce((obj, item, index) => ({
  ...obj,
  [item]: {
    id: index,
    name: item,
    count: obj[item] ? ++obj[item] : 1
  }
}) , {});
// ["Shayan", "Brent", "George"]

and

[
  'Linux',
  'Mac',
  'Windows',
  'Mac',
  'Linux',
  'Mac'
].reduce((obj, item) => ({
  ...obj,
  [item]: {
    id: obj[item] ? obj[item].id : Object.keys(obj).length,
    name: item,
    count: obj[item] ? ++obj[item].count : 1
  }
}) , {});
// {
//   Linux: { id: 0, name: "Linux", count: 2 },
//   Mac: { id: 1, name: "Mac", count: 3 },
//   Windows: { id: 2, name: "Windows", count: 1 }
// }

Know any other uses, please comment below :)

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

Blog

Secrets of reduce in JavaScript

shayan

Join Our Newsletter. No Spam, Only the good stuff.

Related