Eager arrays vs lazy iterator helpers

<div class="pg">
    <h1 class="pg-title">⚡ Eager arrays vs. lazy iterator helpers</h1>
    <p class="pg-sub">
      The same pipeline — <code>filter(even) → map(square) → take(n)</code> — run two
      ways over the same source. Array methods are <strong>eager</strong>: they walk
      everything and allocate an array at each step. Iterator helpers are
      <strong>lazy</strong>: they pull one element at a time and stop the moment
      <code>take(n)</code> is full. The counters below are <strong>real</strong> — the
      filter/map callbacks are instrumented, so you see exactly how many elements each
      approach actually touched.
    </p>

<div class="banner info" id="nativeBanner">
      ℹ️ Your browser has <strong>native</strong> <code>Iterator.from()</code> helpers
      (Baseline 2024) — the lazy side below runs the real thing.
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Set up the pipeline</div>
      <div class="wrap-controls">
        <div class="field grow">
          <label class="label" for="sizeRange">Source size — <span class="mono" id="sizeVal">10,000</span> numbers</label>
          <input id="sizeRange" type="range" min="100" max="100000" step="100" value="10000" aria-label="Source size" />
        </div>
        <div class="field grow">
          <label class="label" for="takeRange">Take the first <span class="mono" id="takeVal">5</span> results</label>
          <input id="takeRange" type="range" min="1" max="50" step="1" value="5" aria-label="How many to take" />
        </div>
      </div>
      <div class="code" id="pipeCode" style="margin-top:14px"></div>
      <div class="btn-row" style="margin-top:14px">
        <button class="btn primary" id="runBtn">▶ Run both</button>
        <button class="btn ghost" id="infiniteBtn">♾️ Infinite source</button>
      </div>
      <div class="presets" style="margin-top:12px">
        <button class="btn sm" data-take="3" data-size="10000">first 3 of 10k</button>
        <button class="btn sm" data-take="5" data-size="100000">first 5 of 100k</button>
        <button class="btn sm" data-take="50" data-size="200">first 50 of 200</button>
      </div>
      <p class="hint" id="scenarioHint" style="margin-top:12px"></p>
    </div>

<div class="cards">
      <div class="card2 eager">
        <h3>❌ Array methods · eager</h3>
        <div class="metric">
          <span class="big-num" id="eagerVisits">—</span>
          <span class="unit">elements visited</span>
        </div>
        <div class="sub-metrics" id="eagerSubs"></div>
        <div class="trace" id="eagerTrace"></div>
        <div class="result-arr" id="eagerResult"></div>
      </div>
      <div class="card2 lazy">
        <h3>✅ Iterator helpers · lazy</h3>
        <div class="metric">
          <span class="big-num" id="lazyVisits">—</span>
          <span class="unit">elements visited</span>
        </div>
        <div class="sub-metrics" id="lazySubs"></div>
        <div class="trace" id="lazyTrace"></div>
        <div class="result-arr" id="lazyResult"></div>
      </div>
    </div>

<div class="status" style="margin-top:14px" role="status" aria-live="polite">
      <span class="dot" id="dot"></span><span id="statusText">Press <strong>Run both</strong> to compare.</span>
    </div>

<div class="panel" style="margin-top:14px">
      <div class="panel-label"><span class="n">2</span> Same output, different work</div>
      <p class="hint" style="margin-top:0">
        Both pipelines return the identical array. The difference is everything you
        <em>didn't</em> see: the eager version visited the whole source and allocated a
        fresh intermediate array after <code>filter</code> and again after <code>map</code>.
        The lazy version threaded each element straight through and stopped early —
        <span id="ratioLine">no wasted allocations, no wasted passes</span>.
      </p>
    </div>
  </div>

preview

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