Optimizing JavaScript Loops for Fast Performance

// Before: length checked every iteration
for (let i = 0; i < items.length; i++) {
  process(items[i]);
}
 
// After: length cached once
for (let i = 0, len = items.length; i < len; i++) {
  process(items[i]);
}

// HTMLCollection: live, recalculated on every .length access
const divs = document.getElementsByTagName("div");
 
// Slow: divs.length recalculates if DOM changes
for (let i = 0; i < divs.length; i++) {
  divs[i].classList.add("processed");
}
 
// Fast: cache once
for (let i = 0, len = divs.length; i < len; i++) {
  divs[i].classList.add("processed");
}

// Before: creating regex and calculating discount every iteration
const orders = getOrders();
 
for (let i = 0; i < orders.length; i++) {
  const pattern = new RegExp("^PROMO-\\d+$");
  const discount = getBaseDiscount() * getMultiplier();
 
  if (pattern.test(orders[i].code)) {
    orders[i].total -= discount;
  }
}
 
// After: move invariants outside the loop
const orders = getOrders();
const pattern = new RegExp("^PROMO-\\d+$");
const discount = getBaseDiscount() * getMultiplier();
 
for (let i = 0; i < orders.length; i++) {
  if (pattern.test(orders[i].code)) {
    orders[i].total -= discount;
  }
}

const arr = Array.from({ length: 100000 }, (_, i) => i);
 
// 1. Classic for loop (fastest for indexed access)
for (let i = 0; i < arr.length; i++) {
  arr[i];
}
 
// 2. for...of (clean syntax, slight overhead)
for (const item of arr) {
  item;
}
 
// 3. forEach (function call overhead per iteration)
arr.forEach((item) => {
  item;
});
 
// 4. while loop (equivalent to for when structured similarly)
let i = 0;
while (i < arr.length) {
  arr[i];
  i++;
}

// Slow: 1,000 individual DOM updates
const list = document.getElementById("results");
 
for (let i = 0; i < 1000; i++) {
  const li = document.createElement("li");
  li.textContent = `Item ${i}`;
  list.appendChild(li); // triggers layout recalculation each time
}
 
// Fast: build in memory, attach once
const list = document.getElementById("results");
const fragment = document.createDocumentFragment();
 
for (let i = 0; i < 1000; i++) {
  const li = document.createElement("li");
  li.textContent = `Item ${i}`;
  fragment.appendChild(li); // no layout impact
}
 
list.appendChild(fragment); // single DOM update

// Build HTML string, set innerHTML once
const items = getData();
let html = "";
 
for (const item of items) {
  html += `<li>${item.name}</li>`;
}
 
document.getElementById("list").innerHTML = html;

// Batch style changes
const elements = document.querySelectorAll(".card");
 
// Slow: forced reflow on each iteration
for (const el of elements) {
  el.style.width = el.offsetWidth + 10 + "px"; // read + write = reflow
}
 
// Fast: read all, then write all
const widths = [];
for (const el of elements) {
  widths.push(el.offsetWidth); // read phase
}
 
for (let i = 0; i < elements.length; i++) {
  elements[i].style.width = widths[i] + 10 + "px"; // write phase
}

// Slow: processes entire array even after finding the target
function findUser(users, id) {
  let result = null;
  for (const user of users) {
    if (user.id === id) {
      result = user;
    }
  }
  return result;
}
 
// Fast: returns immediately on match
function findUser(users, id) {
  for (const user of users) {
    if (user.id === id) {
      return user;
    }
  }
  return null;
}

function findInGrid(grid, target) {
  for (let row = 0; row < grid.length; row++) {
    for (let col = 0; col < grid[row].length; col++) {
      if (grid[row][col] === target) {
        return { row, col }; // exits both loops
      }
    }
  }
  return null;
}

// O(n^2): nested loop comparison
function findCommon(arr1, arr2) {
  const result = [];
  for (const a of arr1) {
    for (const b of arr2) {
      if (a === b) result.push(a);
    }
  }
  return result;
}
 
// O(n): Set-based lookup
function findCommon(arr1, arr2) {
  const set = new Set(arr2);
  const result = [];
  for (const a of arr1) {
    if (set.has(a)) result.push(a);
  }
  return result;
}

function processInChunks(items, chunkSize, processItem) {
  let index = 0;
 
  function nextChunk() {
    const end = Math.min(index + chunkSize, items.length);
 
    for (; index < end; index++) {
      processItem(items[index]);
    }
 
    if (index < items.length) {
      requestAnimationFrame(nextChunk);
    }
  }
 
  nextChunk();
}
 
// Usage: process 100 items per frame
const bigArray = Array.from({ length: 50000 }, (_, i) => i);
processInChunks(bigArray, 100, (item) => {
  // heavy processing per item
});

const data = Array.from({ length: 100000 }, (_, i) => i);
 
const start = performance.now();
 
let sum = 0;
for (let i = 0; i < data.length; i++) {
  sum += data[i];
}
 
const end = performance.now();
console.log(`Time: ${(end - start).toFixed(2)}ms`);
console.log(`Sum: ${sum}`);

function benchmark(name, fn, iterations = 10) {
  const times = [];
 
  for (let run = 0; run < iterations; run++) {
    const start = performance.now();
    fn();
    times.push(performance.now() - start);
  }
 
  const avg = times.reduce((a, b) => a + b, 0) / times.length;
  const min = Math.min(...times);
  const max = Math.max(...times);
 
  console.log(`${name}: avg=${avg.toFixed(2)}ms min=${min.toFixed(2)}ms max=${max.toFixed(2)}ms`);
}
 
// Compare approaches
const arr = Array.from({ length: 100000 }, (_, i) => i);
 
benchmark("for loop", () => {
  let sum = 0;
  for (let i = 0; i < arr.length; i++) sum += arr[i];
});
 
benchmark("for...of", () => {
  let sum = 0;
  for (const n of arr) sum += n;
});
 
benchmark("forEach", () => {
  let sum = 0;
  arr.forEach((n) => (sum += n));
});
 
benchmark("reduce", () => {
  arr.reduce((a, b) => a + b, 0);
});