Object.hasOwn() — interactive playground

<div class="pg">
    <h1 class="pg-title">🔍 Object.hasOwn() vs hasOwnProperty</h1>
    <p class="pg-sub">
      Pick a scenario that exposes a failure mode in the classic
      <code>obj.hasOwnProperty(key)</code> approach — then see how
      <code>Object.hasOwn(obj, key)</code> handles it safely.
    </p>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Choose a scenario</div>
      <div class="scenario-btns">
        <button class="scenario-btn active" data-scenario="normal" id="btnNormal">
          <span class="tag safe">both work</span>
          <span><strong>Regular object</strong> — standard prototype chain</span>
        </button>
        <button class="scenario-btn" data-scenario="null-proto" id="btnNullProto">
          <span class="tag bad">throws</span>
          <span><strong>Null-prototype object</strong> — <code>Object.create(null)</code></span>
        </button>
        <button class="scenario-btn" data-scenario="shadowed" id="btnShadowed">
          <span class="tag risky">lies</span>
          <span><strong>Shadowed method</strong> — <code>hasOwnProperty</code> overwritten on the object</span>
        </button>
      </div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> Enter a key to check</div>
      <div class="key-row">
        <input type="text" id="keyInput" value="name" maxlength="32" spellcheck="false" />
        <button class="btn" id="checkBtn">Check</button>
      </div>
      <div class="obj-preview" id="objPreview" aria-live="polite"></div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">3</span> Results</div>
      <div class="compare-grid">
        <div class="compare-cell" id="oldCell">
          <div class="compare-label">obj.hasOwnProperty(key)</div>
          <div class="compare-result" id="oldResult">—</div>
          <div class="compare-note" id="oldNote"></div>
        </div>
        <div class="compare-cell" id="newCell">
          <div class="compare-label">Object.hasOwn(obj, key)</div>
          <div class="compare-result" id="newResult">—</div>
          <div class="compare-note" id="newNote"></div>
        </div>
      </div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">4</span> The code for this scenario</div>
      <div class="code" id="codeDisplay" aria-live="polite"></div>
    </div>
  </div>

preview

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