Merge and group object properties in JavaScript

In JavaScript, merging and grouping object properties is a common task when working with arrays of objects. This technique allows you to combine objects that share a common property (like a name or ID) into single objects with all their properties merged.

Understanding the Problem

We need to create a JavaScript function that takes an array of objects and groups them by a common property (like 'name'), merging all properties of objects that share the same value for that property.

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

Using reduce() Method

The reduce() method provides an elegant solution by building an accumulator object where each key represents a unique group.

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

function mergeByName(arr) {
  const grouped = arr.reduce((acc, curr) => {
    const { name, ...rest } = curr;
    
    if (acc[name]) {
      // Merge properties if name already exists
      acc[name] = { ...acc[name], ...rest };
    } else {
      // Create new entry for this name
      acc[name] = { name, ...rest };
    }
    
    return acc;
  }, {});
  
  return Object.values(grouped);
}

const result = mergeByName(data);
console.log(result);

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

Using forEach() Method

The forEach() method offers a more imperative approach, building the grouped object step by step.

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

function mergeByNameForEach(arr) {
  const grouped = {};
  
  arr.forEach((obj) => {
    const { name, ...rest } = obj;
    
    if (grouped[name]) {
      // Merge properties if name already exists
      grouped[name] = { ...grouped[name], ...rest };
    } else {
      // Create new entry for this name
      grouped[name] = { name, ...rest };
    }
  });
  
  return Object.values(grouped);
}

const result = mergeByNameForEach(data);
console.log(result);

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

Real-World Example: Grouping Sales Data

Here's a practical example that merges sales data by state and sums numeric values:

const salesData = [
  { city: "New York", state: "NY", sales: 100000 },
  { city: "San Francisco", state: "CA", sales: 50000 },
  { city: "Los Angeles", state: "CA", sales: 200000 },
  { city: "Chicago", state: "IL", sales: 150000 }
];

function mergeSalesByState(arr) {
  const grouped = arr.reduce((acc, curr) => {
    const { state, sales, ...rest } = curr;
    
    if (acc[state]) {
      // Sum sales for existing state
      acc[state].sales += sales;
    } else {
      // Create new state entry
      acc[state] = { state, sales, ...rest };
    }
    
    return acc;
  }, {});
  
  return Object.values(grouped);
}

const result = mergeSalesByState(salesData);
console.log(result);

[
  { state: 'NY', sales: 100000, city: 'New York' },
  { state: 'CA', sales: 250000, city: 'San Francisco' },
  { state: 'IL', sales: 150000, city: 'Chicago' }
]

Comparison

Key Points

• Use destructuring to separate the grouping property from other properties
• The spread operator (...) helps merge properties efficiently
• Object.values() converts the grouped object back to an array
• Both methods have O(n) time complexity

Conclusion

Merging and grouping object properties is essential for data processing in JavaScript. The reduce() method offers a functional approach, while forEach() provides a more traditional imperative style. Both methods efficiently handle object grouping with linear time complexity.