Group values on same property - JavaScript

When working with arrays of objects, you often need to group items that share the same property value. This tutorial shows how to group objects by a common property and combine other properties.

The Problem

Suppose we have an array of objects with unit and brand properties:

const arr = [
    {unit: 35, brand: 'CENTURY'},
    {unit: 35, brand: 'BADGER'},
    {unit: 25, brand: 'CENTURY'},
    {unit: 15, brand: 'CENTURY'},
    {unit: 25, brand: 'XEGAR'}
];

console.log("Original array:");
console.log(arr);

Original array:
[
  { unit: 35, brand: 'CENTURY' },
  { unit: 35, brand: 'BADGER' },
  { unit: 25, brand: 'CENTURY' },
  { unit: 15, brand: 'CENTURY' },
  { unit: 25, brand: 'XEGAR' }
]

We want to group all brands that have the same unit value into a single object with concatenated brand names.

Expected Output

The grouped array should look like this:

[
  { unit: 35, brand: 'CENTURY, BADGER' },
  { unit: 25, brand: 'CENTURY, XEGAR' },
  { unit: 15, brand: 'CENTURY' }
]

Method 1: Using Custom Helper Function

We can extend Array prototype with a custom helper function to find objects by unit value:

const arr = [
    {unit: 35, brand: 'CENTURY'},
    {unit: 35, brand: 'BADGER'},
    {unit: 25, brand: 'CENTURY'},
    {unit: 15, brand: 'CENTURY'},
    {unit: 25, brand: 'XEGAR'}
];

// Helper function to find index by unit value
const indexOf = function(unit){
    return this.findIndex(el => el.unit === unit)
};
Array.prototype.indexOf = indexOf;

const groupArray = arr => {
    const res = [];
    for(let i = 0; i 

[
  { unit: 35, brand: 'CENTURY, BADGER' },
  { unit: 25, brand: 'CENTURY, XEGAR' },
  { unit: 15, brand: 'CENTURY' }
]


Method 2: Using reduce() (Modern Approach)

A more modern and cleaner approach uses the reduce() method:

const arr = [
    {unit: 35, brand: 'CENTURY'},
    {unit: 35, brand: 'BADGER'},
    {unit: 25, brand: 'CENTURY'},
    {unit: 15, brand: 'CENTURY'},
    {unit: 25, brand: 'XEGAR'}
];

const groupByUnit = arr => {
    const grouped = arr.reduce((acc, current) => {
        const existingUnit = acc.find(item => item.unit === current.unit);
        
        if (existingUnit) {
            existingUnit.brand += `, ${current.brand}`;
        } else {
            acc.push({...current});
        }
        
        return acc;
    }, []);
    
    return grouped;
};

console.log(groupByUnit(arr));


[
  { unit: 35, brand: 'CENTURY, BADGER' },
  { unit: 25, brand: 'CENTURY, XEGAR' },
  { unit: 15, brand: 'CENTURY' }
]


How It Works

Both approaches follow the same logic:


Iterate through the original array
For each object, check if an object with the same unit value already exists in the result array
If it exists, concatenate the brand value to the existing brand string
If it doesn't exist, add the current object to the result array


Comparison

Conclusion

Both methods effectively group objects by a common property. The reduce() approach is preferred for its functional programming style and cleaner code without modifying prototypes.