Transforming data with Array.reduce

For the longest time I never understood why you would want to use Array.reduce, I mean why would I need anything else when I already have forEach, map and filter? Array.reduce as I found out is one of the most powerful functions for transforming data, especially when working with Objects.

What is it?

At its core, Array.reduce will simply reduce your data, so say you have an array of items like [foo, bar, baz], you could reduce it to only contain foo like so:

const justFoo = [foo, bar, baz].reduce((acc, item) => {
  if(item === 'foo') {
    return [...acc, item]
  }

  return acc
}, [])

In this case, acc is our accumulator, meaning it will collect the values in the reduction as we traverse the array. item in this case is the current item in the array. Lastly the empty array at the end is the initial value.

So it's a more complicated filter? Why are we using this instead of Array.filter again? Let me show you some better examples.

Some awesome use cases.

Traversing objects

Take an complex object with the following format:

const data = {
  foo: {
     someValue: number;
  },
  bar: {
     someValue: number;
  },
  baz: {
     someValue: number;
  }  
}

Say you wanted to take the sum of someValue, there's no immediately easy way to do this because you have an Object rather than an Array. But this is where Array.reduce can really help. Check this out:

// where data is in the same format
// as above
const data = {...}

const keys = Object.keys(data)

const sumValue = keys.reduce((acc, key) => {
  const currentItem = data[key]
  return acc + currentItem.someValue
}, 0)

Just like that we were able to take a typically difficult object to traverse and cut through it like butter.

Transformations

One overlooked use case of Array.reduce is it's ability to transform Arrays into objects. Take for example the array below.

const data = [
  {
   id: 1,
   fname: 'John',
   lname: 'Doe',
   age: 25,
  }
  ....
]

Say you wanted to convert this array into an object that looks like this:

{
  1: {
   id: 1,
   fname: 'John',
   lname: 'Doe',
   age: 25,
  },
  ...
}

Lets see how we can do this with Array.reduce

  const data = [...]

  const toObject = data.reduce((acc, item) => {
   return {
    ...acc,
    [item.id]: item
   }
  }, {})

While Array.reduce requires you input an Array, you can reduce that array into practically anything you want.

Final Thoughts

It took me a few years to finally adopt Array.reduce into my workflow and I only wish that I found out about it earlier. It can be a bit confusing at first, but once you get the hang of using it, it will be one the most powerful tools in your toolbox.

If you're interested in learning more about Array.reduce, check out the MDN page