JavaScript - Converting array of objects into object of arrays

In this article, we will learn to convert an array of objects into an object of arrays in JavaScript. When working with JavaScript, it's common to handle arrays of objects representing structured data. A frequent challenge is grouping these objects based on a shared property and transforming the result into a new data structure.

Problem Statement

The goal is to convert an array of objects into an object of arrays where the keys represent a specific property (e.g., roles) and the values are arrays of corresponding data (e.g., player names).

Input

const team = [
   { role: 'Batsman', player: 'V Kohli' },
   { role: 'Wicket Keeper', player: 'KL Rahul' },
   { role: 'Batsman', player: 'R Sharma' },
   { role: 'Wicket Keeper', player: 'R Pant' },
   { role: 'Bowler', player: 'B Kumar' },
   { role: 'Bowler', player: 'M Shami' }
];

Expected Output

{
   Batsman: [ 'V Kohli', 'R Sharma' ],
   'Wicket Keeper': [ 'KL Rahul', 'R Pant' ],
   Bowler: [ 'B Kumar', 'M Shami' ]
}

Different Approaches

Following are the two different approaches for converting an array of objects into an object of arrays in JavaScript:

• Using forEach Method
• Using reduce Method

Using forEach Method

The forEach method iterates through each element of the array, allowing us to perform operations on each item. We'll create a function that builds the grouped object step by step.

Following are the steps for converting an array of objects into an object of arrays using forEach:

• Create an empty object to store the grouped results
• Loop through each array element using forEach
• Check if the role (key) already exists in the result object
• If it exists, append the player to the existing array using push() method
• Otherwise, create a new array with the current player

Example

const team = [
   { role: 'Batsman', player: 'V Kohli' },
   { role: 'Wicket Keeper', player: 'KL Rahul' },
   { role: 'Batsman', player: 'R Sharma' },
   { role: 'Wicket Keeper', player: 'R Pant' },
   { role: 'Bowler', player: 'B Kumar' },
   { role: 'Bowler', player: 'M Shami' }
];

const objectify = (team) => {
   const teamObject = {};
   team.forEach(member => {
      if (teamObject[member.role]) {
         teamObject[member.role].push(member.player);
      } else {
         teamObject[member.role] = [member.player];
      }
   });
   return teamObject;
}

console.log(objectify(team));

{
   Batsman: [ 'V Kohli', 'R Sharma' ],
   'Wicket Keeper': [ 'KL Rahul', 'R Pant' ],
   Bowler: [ 'B Kumar', 'M Shami' ]
}

Time Complexity: O(n), where n is the number of elements in the array.
Space Complexity: O(k + m), where k is the number of unique roles and m is the total number of players.

Using reduce Method

The reduce method is a powerful functional programming tool that processes an array and combines its elements into a single value or data structure. It's particularly well-suited for transformation operations like this.

The reduce method works with an accumulator that builds up the final result through each iteration:

• Start with an empty object as the initial accumulator value
• For each array element, update the accumulator
• Check if the role key exists in the accumulator
• Add the player to the appropriate role array
• Return the updated accumulator for the next iteration

Example

const team = [
   { role: 'Batsman', player: 'V Kohli' },
   { role: 'Wicket Keeper', player: 'KL Rahul' },
   { role: 'Batsman', player: 'R Sharma' },
   { role: 'Wicket Keeper', player: 'R Pant' },
   { role: 'Bowler', player: 'B Kumar' },
   { role: 'Bowler', player: 'M Shami' }
];

const objectifyWithReduce = (team) => {
   return team.reduce((acc, member) => {
      acc[member.role] = acc[member.role] || [];
      acc[member.role].push(member.player);
      return acc;
   }, {});
}

console.log(objectifyWithReduce(team));

{
   Batsman: [ 'V Kohli', 'R Sharma' ],
   'Wicket Keeper': [ 'KL Rahul', 'R Pant' ],
   Bowler: [ 'B Kumar', 'M Shami' ]
}

Time Complexity: O(n), where n is the number of elements in the array.
Space Complexity: O(k + m), where k is the number of unique roles and m is the total number of players.

Comparison

Conclusion

Both forEach and reduce methods effectively convert arrays of objects into grouped object structures. Choose forEach for simplicity and readability, or reduce for functional programming style and data transformation tasks.