Merge and group object properties in JavaScript

In the given problem, we have to merge and group object properties with the help of javascript. In this article you will learn how to merge and group the same type of properties in javascript.

Understanding the Problem

We are required to create a javascript method that will take in one array of objects. The created function should group all the properties of all the objects that have a value for name property. For example:

Input

[
  {name: 'Adi', age: 22, color:'Black'},
  {name: 'Adi', weight: 40, height:6} ,
  {name: 'Mack', age: 20}
]

Output

[
 {name: 'Adi', age: 22, color:'Black', weight: 40, height:6},
 {name: 'Mack', age: 20}
]

Algorithm - using reduce method

The algorithm mentioned below will give a step by step process to solve the given problem.

Step 1: First define a data array with the name groupedData. This array in this application receives a call to the reduce() method with an initial value of an empty object. The parameters acc and curr are passed to the callback function.

Step 2: Each time the reduce() method is used, the callback function first uses destructuring to remove the state property from the curr object before using the spread operator to build a new object with the remaining properties.

Step 3: The callback function then determines whether or not the state property has previously been used as a key in the acc object. If so, the current object's population is added to the one already present for that state. The state and other properties from the curr object are transferred to a new entry in the acc object in the absence of that.

Step 4: The result variable is used to hold the transformation of the groupedData object back into an array of objects using the Object.values() method.

Step 5: Show the output with the result.

Example

// define a function to check power of 3
const data = [
  { city: "New York", state: "NY", population: 100000 },
  { city: "San Francisco", state: "CA", population: 50000 },
  { city: "Los Angeles", state: "CA", population: 200000 },
  { city: "San Diego", state: "CA", population: 10000 },
  { city: "Chicago", state: "IL", population: 150000 },
  { city: "Miami", state: "FL", population: 5000 }
];

const groupedData = data.reduce((acc, curr) => {
  const { state, ...rest } = curr;
  if (acc[state]) {
   acc[state] = { ...acc[state], population: acc[state].population + curr.population };
  } else {
   acc[state] = { state, ...rest };
  }
  return acc;
}, {});

const result = Object.values(groupedData);

console.log(result);

Output

[
  { state: 'NY', city: 'New York', population: 100000 },
  { state: 'CA', city: 'San Francisco', population: 260000 },
  { state: 'IL', city: 'Chicago', population: 150000 },
  { state: 'FL', city: 'Miami', population: 5000 }
]

Algorithm - Using forEach method

Steps for algorithm using forEach method is as follows:

Step 1: At the very first step, define an array with city, state and population keys and put some values in it. Then, create an empty array and give it the name ‘groupedData’.

Step 2: To use the forEach() method on the data array in this programme, a callback function with a single parameter named obj is used.

Step 3: The callback function utilizes destructuring to remove the state property from the obj object on each iteration of the forEach() method before using the spread operator to build a new object with the remaining properties.

Step 4: The callback function then determines whether the state attribute has ever been used as a key for the groupedData object in step four. If yes, the population of that state is increased by the population of the present item. If not, the state and other properties from the obj object are added to a new item in the groupedData object.

Step 5: The groupedData object is transformed back into an array of objects and saved in the result variable using the Object.values() function.

Example

const data = [
  { city: "New York", state: "NY", population: 100000 },
  { city: "San Francisco", state: "CA", population: 50000 },
  { city: "Los Angeles", state: "CA", population: 200000 },
  { city: "San Diego", state: "CA", population: 10000 },
  { city: "Chicago", state: "IL", population: 150000 },
  { city: "Miami", state: "FL", population: 5000 }
];

const groupedData = {};

data.forEach((obj) => {
  const { state, ...rest } = obj;
  if (groupedData[state]) {
   groupedData[state].population += obj.population;
  } else {
   groupedData[state] = { state, ...rest };
  }
});

const result = Object.values(groupedData);

console.log(result);

Time complexity

The time complexity of this program is O(n), where n is the number. This is because the reduce and forEach functions are taking the length of the array to produce the result.

Hence space complexity of this program is O(n), because it uses a n amount of memory to store the array.

Conclusion

This is the basic idea behind solving this kind of problem. In the overall process we have used a javascript's functions called reduce and forEach, arithmetic operators and comparison operators to solve the problem. And saw how to calculate the time and space complexity of the algorithm.