findLast() & findLastIndex() — search from the end

<div class="pg">
    <h1 class="pg-title">🎮 findLast() &amp; findLastIndex(): search from the end</h1>
    <p class="pg-sub">
      <code>find()</code> walks from the front and stops at the first match. <code>findLast()</code>
      walks from the back and stops at the first match it reaches — the array's <strong>last</strong>
      one. Pick a predicate, watch where each method lands, then reveal why
      <code>[...arr].reverse().find()</code> reports the wrong position.
    </p>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Pick a predicate</div>
      <div class="seg" id="predSeg" role="group" aria-label="Predicate">
        <button data-pred="even" aria-pressed="false">value is even</button>
        <button data-pred="gt5" aria-pressed="false">value &gt; 5</button>
        <button data-pred="error" aria-pressed="true">status is 'error'</button>
      </div>
      <div class="presets" style="margin-top:12px">
        <button class="btn sm" data-preset="error">🔥 Last error before it recovered</button>
        <button class="btn sm" data-preset="gt5">💰 Last big value (&gt;5)</button>
        <button class="btn sm" data-preset="even">🔢 Last even value</button>
      </div>
      <div class="btn-row" style="margin-top:14px; align-items:center;">
        <label class="toggle">
          <input type="checkbox" id="toggleOld" /><span class="switch"></span>
          <span>Reveal the old way (copy + reverse + find)</span>
        </label>
        <button class="btn ghost sm" id="resetBtn" style="margin-left:auto">Reset</button>
      </div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> The array</div>
      <div class="scan-arrows">
        <span class="fw">find() / findIndex() scan this way →</span>
        <span class="bw">← findLast() / findLastIndex() scan this way</span>
      </div>
      <div class="array-row" id="arrayRow" role="list" aria-label="Array items"></div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">3</span> What each method returns</div>
      <div class="stat-grid">
        <div class="stat fw">
          <span class="k">find(pred)</span>
          <span class="big-num" id="findVal">—</span>
        </div>
        <div class="stat fw">
          <span class="k">findIndex(pred)</span>
          <span class="big-num" id="findIdx">—</span>
        </div>
        <div class="stat bw">
          <span class="k">findLast(pred)</span>
          <span class="big-num" id="findLastVal">—</span>
        </div>
        <div class="stat bw">
          <span class="k">findLastIndex(pred)</span>
          <span class="big-num" id="findLastIdx">—</span>
        </div>
      </div>
      <div class="code" id="codeBlock" aria-hidden="true"></div>
      <div class="status good" style="margin-top:12px" role="status" aria-live="polite">
        <span class="dot good"></span><span id="statusText">Ready.</span>
      </div>
    </div>

<div class="panel old-way" id="oldWayPanel">
      <div class="panel-label"><span class="n">4</span> The old way: copy, reverse, then find</div>
      <p class="hint" style="margin-top:0">
        <code>[...items].reverse()</code> allocates a brand-new array with all
        <span id="copyCount">8</span> elements, then <code>.reverse()</code> flips that
        <strong>copy</strong> in place. <code>findIndex()</code> then runs on the copy — so
        the index it reports is a position <strong>inside the copy</strong>, not inside
        <code>items</code>.
      </p>
      <div class="reversed-row" id="reversedRow" aria-hidden="true"></div>
      <div class="compare-grid">
        <div>
          <h3 class="bad-h">❌ Old way</h3>
          <div class="code" id="codeOld"></div>
        </div>
        <div>
          <h3 class="good-h">✅ findLast way</h3>
          <div class="code" id="codeNew"></div>
        </div>
      </div>
      <p class="hint" id="bugHint"></p>
    </div>
  </div>

preview

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

findLast() &amp; findLastIndex() — search from the end

findLast() & findLastIndex() — search from the end