Array Grouping (Type-Safe Version)
Lightweight and type-safe alternative to lodash.groupBy, groups array elements by specified rules and returns structured grouping object
Implementation
Copy the complete example or adapt its typed interface to your project. Comments are kept inside the snippet so the intent travels with the code.
/**
* Array grouping function
* @param arr Array to be grouped
* @param keyFn Function to generate grouping key
* @returns Grouped object
*/
function groupArray<T>(arr: T[], keyFn: (item: T) => string | number): Record<string | number, T[]> {
return arr.reduce((acc, item) => {
const key = keyFn(item);
if (!acc[key]) acc[key] = [];
acc[key].push(item);
return acc;
}, {} as Record<string | number, T[]>);
}
// Usage Example
const data = [
{ type: "js", name: "Basic Syntax" },
{ type: "ts", name: "Type Definition" },
{ type: "js", name: "Asynchronous Programming" }
];
const grouped = groupArray(data, item => item.type);
console.log(grouped);
// { js: [{type: 'js', name: 'Basic Syntax'}, {type: 'js', name: 'Asynchronous Programming'}], ts: [{type: 'ts', name: 'Type Definition'}] }When to use it
Ideal for categorizing list data, organizing API responses, or creating grouped UI components
Review the input assumptions and browser or runtime support before adopting a utility unchanged. Small helpers are easiest to maintain when their contract stays narrow.
Reasoning and trade-offs
How it works
The key selector runs once for every item and returns the bucket name. The reducer creates that bucket on demand and pushes the item into it, while generics retain the original item type in every grouped array.
What to watch for
Object keys are strings, so values such as objects are coerced and may collide unexpectedly. Very large or untrusted key spaces can also create awkward object properties; a Map is safer when keys are not controlled strings.
Production use
Use grouping to prepare table sections, aggregate records by status, or organize events by date. Keep key generation pure and test missing or unusual values so a record never disappears into an accidental “undefined” bucket.
Before you ship
- Confirm the input contract with tests that cover empty, invalid, boundary, and representative real-world values before sharing the helper across a codebase.
- Keep the function focused on one responsibility and name any project-specific policy explicitly instead of hiding it inside a generic-looking utility.
- Measure behavior in the browsers or runtime versions your product supports, especially when timing, storage, DOM state, locale, or network access is involved.
- Document the return type, mutation behavior, failure mode, and performance characteristics beside the call site so future maintainers can evaluate changes safely.
- Compare the example with current official platform documentation when it relies on a browser API, language feature, or runtime behavior that may change over time.
- If the helper crosses a trust boundary, validate again on the server and avoid treating browser-side checks, TypeScript annotations, or formatted output as a security guarantee.
- Add a small regression test whenever a real edge case is discovered; concrete examples preserve the reason behind a guard more reliably than a general comment.