Object.groupBy — group an array in one line

<div class="wrap">
    <h1>🎮 Group an array in one line</h1>
    <p class="sub">
      Pick a key below and watch these tasks snap into buckets — that's
      <code>Object.groupBy(tasks, t =&gt; t[key])</code>, the native replacement for the
      hand-written <code>reduce</code> everyone writes. Click any task to change it live.
    </p>

<div class="note" id="polyNote" hidden>
      ⚠️ Your browser lacks native <code>Object.groupBy</code> / <code>Map.groupBy</code>, so a tiny
      inline polyfill is running the demo. In Chrome 117+, Firefox 119+, Safari 17.4+ or Node 21+ this is native.
    </div>

<div class="panel">
      <h2>Group by…</h2>
      <div class="seg" role="group" aria-label="Grouping key">
        <button data-key="status"   aria-pressed="true">status</button>
        <button data-key="priority" aria-pressed="false">priority</button>
        <button data-key="assignee" aria-pressed="false">assignee</button>
      </div>
      <p class="caption" id="caption" aria-live="polite"></p>
      <div class="buckets" id="buckets"></div>
    </div>

<div class="panel">
      <h2>The one line that replaces the reduce</h2>
      <div class="code2">
        <pre class="old" id="codeOld"></pre>
        <pre class="new" id="codeNew"></pre>
      </div>
    </div>

<div class="panel">
      <h2>The tasks</h2>
      <div class="toolbar">
        <button id="add">+ Add random task</button>
        <button id="reset" class="ghost">Reset</button>
      </div>
      <p class="hint">Tip: <b>click any row</b> to cycle its <span id="hintKey">status</span> — it jumps to a different bucket instantly.</p>
      <div class="tablewrap">
        <table>
          <thead><tr><th scope="col">Task</th><th scope="col">Status</th><th scope="col">Priority</th><th scope="col">Assignee</th></tr></thead>
          <tbody id="tbody"></tbody>
        </table>
      </div>
    </div>

<div class="panel">
      <h2>Bonus · Map.groupBy — when keys aren't strings</h2>
      <div class="tabs" role="tablist" aria-label="groupBy variant">
        <button role="tab" data-view="map" aria-selected="true">Map.groupBy ✅</button>
        <button role="tab" data-view="obj" aria-selected="false">Object.groupBy ⚠️</button>
      </div>
      <p class="caption" id="mapCaption" aria-live="polite"></p>
      <div class="buckets" id="mapBuckets"></div>
      <div class="mapcode" id="mapCode"></div>
    </div>
  </div>

preview

Edits run in a sandbox in your browser — nothing is saved and nothing leaves the page.