Array.prototype.group()

callbackFn

A function to execute for each element in the array. It should return a value that can get coerced into a property key (string or symbol) indicating the group of the current element. The function is called with the following arguments:

element

The current element being processed in the array.

index

The index of the current element being processed in the array.

array

The array group() was called upon.

thisArg Optional

A value to use as this when executing callbackFn. See iterative methods.

A null-prototype object with properties for all groups, each assigned to an array containing the elements of the associated group.

The group() method is an iterative method. It calls a provided callbackFn function once for each element in an array, returning a string or symbol (values that are neither type are coerced to strings) indicating the group of the element. A new property and array is created in the result object for each unique group name that is returned by the callback. Each element is added to the array in the property that corresponds to its group.

callbackFn is invoked for every index of the array, not just those with assigned values. Empty slots in sparse arrays behave the same as undefined.

The group() method is a copying method. It does not alter this but instead returns an object of arrays that contains the same elements as the ones from the original array. However, the function provided as callbackFn can mutate the array. Note, however, that the length of the array is saved before the first invocation of callbackFn. Therefore:

• callbackFn will not visit any elements added beyond the array's initial length when the call to group() began.
• Changes to already-visited indexes do not cause callbackFn to be invoked on them again.
• If an existing, yet-unvisited element of the array is changed by callbackFn, its value passed to the callbackFn will be the value at the time that element gets visited. Deleted elements are visited as if they were undefined.

The returned object references the same elements as the original array (not deep copies). Changing the internal structure of these elements will be reflected in both the original array and the returned object.

The group() method is generic. It only expects the this value to have a length property and integer-keyed properties.

First we define an array containing objects representing an inventory of different foodstuffs. Each food has a type and a quantity.

const inventory = [
  { name: "asparagus", type: "vegetables", quantity: 5 },
  { name: "bananas", type: "fruit", quantity: 0 },
  { name: "goat", type: "meat", quantity: 23 },
  { name: "cherries", type: "fruit", quantity: 5 },
  { name: "fish", type: "meat", quantity: 22 },
];

The code below groups the elements by the value of their type property.

const result = inventory.group(({ type }) => type);

/* Result is:
{
  vegetables: [
    { name: 'asparagus', type: 'vegetables', quantity: 5 },
  ],
  fruit: [
    { name: "bananas", type: "fruit", quantity: 0 },
    { name: "cherries", type: "fruit", quantity: 5 }
  ],
  meat: [
    { name: "goat", type: "meat", quantity: 23 },
    { name: "fish", type: "meat", quantity: 22 }
  ]
}
*/

The arrow function just returns the type of each array element each time it is called. Note that the function argument { type } is a basic example of object destructuring syntax for function arguments. This unpacks the type property of an object passed as a parameter, and assigns it to a variable named type in the body of the function. This is a very succinct way to access the relevant values of elements within a function.

We can also create groups inferred from values in one or more properties of the elements. Below is a very similar example that puts the items into ok or restock groups based on the value of the quantity field.

function myCallback({ quantity }) {
  return quantity > 5 ? "ok" : "restock";
}

const result2 = inventory.group(myCallback);

/* Result is:
{
  restock: [
    { name: "asparagus", type: "vegetables", quantity: 5 },
    { name: "bananas", type: "fruit", quantity: 0 },
    { name: "cherries", type: "fruit", quantity: 5 }
  ],
  ok: [
    { name: "goat", type: "meat", quantity: 23 },
    { name: "fish", type: "meat", quantity: 22 }
  ]
}
*/

When used on sparse arrays, the group() method iterates empty slots as if they have the value undefined.

console.log([1, , 3].group((x) => x)); // { 1: [1], undefined: [undefined], 3: [3] }

The group() method reads the length property of this and then accesses each integer index.

const arrayLike = {
  length: 3,
  0: 2,
  1: 3,
  2: 4,
};
console.log(Array.prototype.group.call(arrayLike, (x) => x % 2));
// { 0: [2, 4], 1: [3] }

• Polyfill of Array.prototype.group in core-js
• Indexed collections
• Array
• Array.prototype.groupToMap()
• Array.prototype.reduce()
• Object.fromEntries()