Run results for: F&S JS test code

Run details:

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:100.0) Gecko/20100101 Firefox/100.0

Browser: Firefox 100

Operating system: Windows

Device Platform: Desktop

Date tested: 2 years ago

Test name	Executions per second
forEach	2271.8 Ops/sec
for of	535.1 Ops/sec
for	318.8 Ops/sec

HTML Preparation code:

<div class="container input-block">
  <h2 class="change-text">Change my text</h2>
  <select class="selector">
    <option value="">Nothing</option>
    <option value="something">Something</option>
    <option>Helllllllllloooooooooooooo</option>

  </select>
  <button class="trigger">
    CLick me
  </button>
</div>
<div class="container input-block">
  <h2 class="change-text">You can't change my text</h2>
  <select class="selector-borked">
    <option value="">Nothing</option>
    <option value="something">Something</option>
  </select>
  <button class="trigger">
    CLick me
  </button>
</div>
<div class="container input-block">
  <h2 class="change-text">Change my text</h2>
  <select class="selector">
    <option value="">Nothing</option>
    <option value="something">Something</option>
  </select>
  <button class="trigger">
    CLick me
  </button>
</div>

Tests:

forEach
const inputBlocks = document.querySelectorAll(".input-block"); if (inputBlocks) inputBlocks.forEach((block, index) => { const select = block.querySelector(".selector"); const trigger = block.querySelector(".trigger"); const text = block.querySelector(".change-text"); const defaultText = text.textContent; if (!select || !trigger || !text) { return; } trigger.addEventListener("click", (e) => { text.textContent = select.value ? `Block ${index} says: ${select.value}` : defaultText; console.log( `Our text content is currently: ${text.textContent}, whereas our default copy is: ${defaultText}` ); }); });
for of
const inputBlocks = document.querySelectorAll(".input-block"); if (inputBlocks) // for of doesn't offer a builtin way of accessing index, so either do a counter or entries(). for(const [index, block] of inputBlocks.entries()) { const select = block.querySelector(".selector"); const trigger = block.querySelector(".trigger"); const text = block.querySelector(".change-text"); const defaultText = text.textContent; if (!select || !trigger || !text) { // we can't return because this is no longer a function. https://www.w3schools.com/js/js_break.asp continue; } trigger.addEventListener("click", (e) => { text.textContent = select.value ? `Block ${index} says: ${select.value}` : defaultText; console.log( `Our text content is currently: ${text.textContent}, whereas our default copy is: ${defaultText}` ); }); };
for
const inputBlocks = document.querySelectorAll(".input-block"); if (inputBlocks) for(let i = 0; i < inputBlocks.length; i++) { const block = inputBlocks[i]; const select = block.querySelector(".selector"); const trigger = block.querySelector(".trigger"); const text = block.querySelector(".change-text"); const defaultText = text.textContent; if (!select || !trigger || !text) { // we can't return because this is no longer a function. https://www.w3schools.com/js/js_break.asp continue; } trigger.addEventListener("click", (e) => { text.textContent = select.value ? `Block ${index} says: ${select.value}` : defaultText; console.log( `Our text content is currently: ${text.textContent}, whereas our default copy is: ${defaultText}` ); }); };

Run results for: F&S JS test code

forEach

for of

for