Jesus cornelio
b345e49385
New examples (examples/): - modal-dialog: <dialog> vs Radix/react-modal - url-params: URLSearchParams vs query-string - number-formatting: Intl.NumberFormat vs numeral - infinite-scroll: IntersectionObserver vs react-infinite-scroll-component - deep-clone: structuredClone vs lodash.cloneDeep / JSON hack - group-by: Object.groupBy vs lodash.groupBy New doc (docs/platform-native.md): Comprehensive reference of platform-native solutions across HTML elements, CSS, Browser APIs, Node.js stdlib, Python stdlib, and database features. Covers 60+ cases where the platform already has what developers reach for a package to do.
36 lines
940 B
Markdown
36 lines
940 B
Markdown
# Group By
|
|
|
|
**Task:** "Group this array of objects by a key."
|
|
|
|
## Without Ponytail
|
|
|
|
```bash
|
|
npm install lodash
|
|
```
|
|
|
|
```js
|
|
import { groupBy } from "lodash";
|
|
|
|
const byStatus = groupBy(orders, "status");
|
|
// → { pending: [...], shipped: [...], delivered: [...] }
|
|
```
|
|
|
|
Or the hand-rolled version:
|
|
|
|
```js
|
|
const byStatus = orders.reduce((acc, order) => {
|
|
(acc[order.status] ??= []).push(order);
|
|
return acc;
|
|
}, {});
|
|
```
|
|
|
|
## With Ponytail
|
|
|
|
```js
|
|
// ponytail: Object.groupBy does this
|
|
const byStatus = Object.groupBy(orders, order => order.status);
|
|
// → { pending: [...], shipped: [...], delivered: [...] }
|
|
```
|
|
|
|
**1 dependency (or a reduce) → 1 built-in.** `Object.groupBy` shipped in Chrome 117, Firefox 119, Safari 17.4, Node.js 21. If you need a `Map` instead of a plain object: `Map.groupBy(orders, o => o.status)`. Check your target runtime; if you need IE11 or old Node, the `reduce` one-liner is still the right call — not lodash.
|