javascript 22 lines · 6 steps

Building a flexible groupBy in JavaScript

A single reduce groups an array by a key that can be either a property name or a custom function.

Explained by highlit

Intermediate higher-order-functions reduce data-transformation grouping

1function groupBy(items, keySelector) {
2  const resolveKey = typeof keySelector === 'function'
3    ? keySelector
4    : (item) => item[keySelector];
5 
6  return items.reduce((groups, item) => {
7    const key = resolveKey(item);
8    (groups[key] ??= []).push(item);
9    return groups;
10  }, {});
11}
12 
13const orders = [
14  { id: 1, status: 'paid', total: 49 },
15  { id: 2, status: 'pending', total: 12 },
16  { id: 3, status: 'paid', total: 80 },
17  { id: 4, status: 'refunded', total: 30 },
18  { id: 5, status: 'pending', total: 25 },
19];
20 
21const byStatus = groupBy(orders, 'status');
22const byPriceTier = groupBy(orders, (o) => (o.total >= 50 ? 'high' : 'low'));

01 / 01

STEP 01

Walkthrough

Space play ←→ step click any line

Three takeaways

1Accepting either a key name or a selector function makes one utility fit many callers.
2reduce with an object accumulator is a clean pattern for bucketing items by a derived key.
3The ??= operator lazily initializes a bucket only the first time a key appears.

Related explainers

javascript

'use server'
 
import { revalidatePath } from 'next/cache'
import { redirect } from 'next/navigation'

How a Next.js Server Action updates a post

server-actions authorization validation

Intermediate 7 steps

python

from collections.abc import Mapping
from typing import Any, Iterator

Flattening nested config into dotted keys

recursion generators tree-traversal

Intermediate 7 steps

javascript

const express = require('express');
 
const v1 = express.Router();

Versioning an API with Express Routers

api versioning routing modularity

Intermediate 10 steps

javascript

const RATE_LIMIT = 100;
const WINDOW_MS = 60 * 1000;
const BLOCK_MS = 5 * 60 * 1000;

Building a rate-limiting middleware in Express

rate-limiting middleware closures

Intermediate 9 steps

javascript

const transitions = {
  cart: { checkout: 'shipping' },
  shipping: { submitAddress: 'payment', back: 'cart' },
  payment: { submitPayment: 'review', back: 'shipping' },

A finite state machine for checkout flow

state-machine event-driven data-driven-design

Intermediate 7 steps

javascript

import { useState, useEffect, useCallback, useRef } from "react";
 
export function usePersistentForm(storageKey, initialValues) {
  const [values, setValues] = useState(() => {