Group Array by Property in JavaScript

This challenge will test your ability to transform an array of objects into a more organized structure. You'll need to group these objects based on the value of a specified property, creating a new object where keys are the property values and values are arrays of the corresponding objects. This is a common task in data manipulation and front-end development for tasks like filtering, categorizing, and displaying information.

Problem Description

Your task is to implement a JavaScript function groupByProperty(arr, propertyName) that takes two arguments:

1. arr: An array of objects.
2. propertyName: A string representing the name of the property by which to group the objects.

The function should return a new object where:

• The keys of the returned object are the unique values found for the propertyName across all objects in the input array arr.
• The values associated with each key are arrays containing all the objects from arr that have that specific value for the propertyName.

Key Requirements:

• The function must create and return a new object; it should not modify the original input array.
• The order of objects within each group (the arrays in the output object) does not matter.
• The order of keys in the output object does not matter.

Edge Cases to Consider:

• An empty input array.
• Objects in the array that might be missing the specified propertyName or have it set to undefined or null. These should be grouped under keys like 'undefined' or 'null' respectively.
• Property values can be of various types (strings, numbers, booleans, etc.).

Examples

Example 1:

Input: [
  { id: 1, category: 'fruit', name: 'apple' },
  { id: 2, category: 'vegetable', name: 'carrot' },
  { id: 3, category: 'fruit', name: 'banana' },
  { id: 4, category: 'dairy', name: 'milk' },
  { id: 5, category: 'vegetable', name: 'broccoli' }
], 'category'
Output: {
  fruit: [
    { id: 1, category: 'fruit', name: 'apple' },
    { id: 3, category: 'fruit', name: 'banana' }
  ],
  vegetable: [
    { id: 2, category: 'vegetable', name: 'carrot' },
    { id: 5, category: 'vegetable', name: 'broccoli' }
  ],
  dairy: [
    { id: 4, category: 'dairy', name: 'milk' }
  ]
}
Explanation: Objects are grouped by the value of their 'category' property.

Example 2:

Input: [
  { name: 'Alice', age: 30 },
  { name: 'Bob', age: 25 },
  { name: 'Charlie', age: 30 },
  { name: 'David', age: 25 }
], 'age'
Output: {
  '25': [
    { name: 'Bob', age: 25 },
    { name: 'David', age: 25 }
  ],
  '30': [
    { name: 'Alice', age: 30 },
    { name: 'Charlie', age: 30 }
  ]
}
Explanation: Objects are grouped by their 'age' property. Note that numeric keys in JavaScript objects are coerced to strings.

Example 3:

Input: [
  { id: 1, status: 'pending' },
  { id: 2 },
  { id: 3, status: 'completed' },
  { id: 4, status: null },
  { id: 5, status: 'pending' }
], 'status'
Output: {
  pending: [
    { id: 1, status: 'pending' },
    { id: 5, status: 'pending' }
  ],
  undefined: [
    { id: 2 }
  ],
  'null': [
    { id: 4, status: null }
  ]
}
Explanation: Handles missing properties and null values, grouping them under 'undefined' and 'null' keys respectively.

Constraints

• The input array arr will contain at most 1000 objects.
• Each object in arr will have at most 10 properties.
• propertyName will be a non-empty string.
• The solution should aim for a time complexity of O(n), where n is the number of objects in the input array.

Notes

Consider how you might iterate through the input array and build the output object. Built-in JavaScript array methods like forEach, reduce, or map can be very helpful here. Pay close attention to how you handle the creation of new arrays for each group and how you add objects to them. Think about the best way to access the property value dynamically using the propertyName string.