JavaScript Separate objects based on properties

Separating objects based on properties in JavaScript means rearranging a group of objects into a new structure where objects that share the same value for a specific property are placed together. Objects are collections of key-value pairs that store large data as a key with associated information as its value. In JavaScript, you often need to group objects inside a larger object based on certain properties.

Separating objects based on properties in JavaScript can be done by writing a simple function using the reduce method. In this article, we will understand how to do this effectively.

Understanding the Problem

Suppose, we have an object like this:

const obj = {
    0: { "time": 1, "day": 1, },
    1: { "time": 2, "day": 1, },
    2: { "time": 3, "day": 1, },
    3: { "time": 1, "day": 2, },
    4: { "time": 2, "day": 2, },
    5: { "time": 3, "day": 2, }
};

We are required to transform this object into a new object where the key represents the day property, and the corresponding value is another object containing all the objects that share that day value, further indexed by their time value.

Using reduce() Method

The reduce() method is the best way to separate objects based on properties. This method executes a reducer function on each element of the array (from left to right) and returns a single value as a result.

Syntax

Here is the basic syntax of using JavaScript reduce() method on an array:

reduce(callbackFn(accumulator, currentValue, currentIndex, array), initialValue)

Implementation Steps

The following are steps to write a function that will be used to separate objects based on properties:

• Initialize object: Firstly, we have to create an object with numbered keys, where each value is an object containing time and day properties.
• Function Creation: Then, create a function that takes this object as a parameter.
• Using Object.values(): Using Object.values() method convert the object's values into an array.
• Reduce Operation: Using reduce method, will group the items.
• Applying Grouping Logic: For each iteration, check if a group for the current day exists, and if it does, add the current object to that day's group using the time as the key.

Grouping Objects by Day Property

In this example, we have used reduce() method. The groupObject function takes an object with time and day information and rearranges it into a new format. It groups the entries by day, creating a structure where each day has its related time entries.

const obj = {
    0: { "time": 1, "day": 1, },
    1: { "time": 2, "day": 1, },
    2: { "time": 3, "day": 1, },
    3: { "time": 1, "day": 2, },
    4: { "time": 2, "day": 2, },
    5: { "time": 3, "day": 2, }
};

const groupObject = obj => {
    let res = {};
    res = Object.values(obj).reduce((acc, val) => {
        if(acc[val['day']] === undefined){
            acc[val['day']] = {};
        };
        acc[val['day']][val['time']] = val;
        return acc;
    }, {});
    return res;
};

console.log(groupObject(obj));

{
  '1': {
    '1': { time: 1, day: 1 },
    '2': { time: 2, day: 1 },
    '3': { time: 3, day: 1 }
  },
  '2': {
    '1': { time: 1, day: 2 },
    '2': { time: 2, day: 2 },
    '3': { time: 3, day: 2 }
  }
}

Grouping Array of Objects by Category

This is another example of separating objects based on properties in JavaScript. This code separates an array of product objects into groups based on their category. The result is an object where each category contains an array of its corresponding products.

const products = [
    { name: "Laptop", category: "Electronics" },
    { name: "Shirt", category: "Clothing" },
    { name: "Phone", category: "Electronics" },
    { name: "Pants", category: "Clothing" }
];

// Separate products into categories
const separateProducts = (products) => {
    return products.reduce((acc, product) => {
        acc[product.category] = acc[product.category] || []; 
        // Initialize category if it doesn't exist
        acc[product.category].push(product);
        return acc;
    }, {});
};

const result = separateProducts(products);
console.log(result);

{
  Electronics: [
    { name: 'Laptop', category: 'Electronics' },
    { name: 'Phone', category: 'Electronics' }
  ],
  Clothing: [
    { name: 'Shirt', category: 'Clothing' },
    { name: 'Pants', category: 'Clothing' }
  ]
}

Key Points

• The reduce() method is ideal for transforming arrays into grouped objects
• Object.values() converts object values to an array for processing
• Always initialize empty containers (objects or arrays) for new groups
• The accumulator in reduce stores the final grouped result

Conclusion

The reduce() method provides an efficient way to separate and group objects based on their properties. This technique is essential for data organization and makes working with JavaScript objects more manageable.