loading...
Cover image for Transforming data with Array.reduce

Transforming data with Array.reduce

sgolovine profile image Sunny Golovine ・2 min read

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
}, [])

Enter fullscreen mode Exit fullscreen mode

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;
  }  
}

Enter fullscreen mode Exit fullscreen mode

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)

Enter fullscreen mode Exit fullscreen mode

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,
  }
  ....
]

Enter fullscreen mode Exit fullscreen mode

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


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

Enter fullscreen mode Exit fullscreen mode

Lets see how we can do this with Array.reduce

  const data = [...]

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

Enter fullscreen mode Exit fullscreen mode

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

Discussion

pic
Editor guide
Collapse
lukaszahradnik profile image
Lukáš Zahradník

Hi,

I would recommend using approach bellow instead of yours (with object destructuring)

const toObject = data.reduce((acc, item) => {
   acc[item.id] = item
   return acc
}, {})
Enter fullscreen mode Exit fullscreen mode

Your approach creates a new object on every iteration which is just more time consuming in the end.

The same applies for the array - use push instead of destructuring.