Is Caching Array Length in JavaScript Loops Worth It? Uncover the Real Performance Impact

In JavaScript performance lore, a classic tip suggests caching the array's length property inside a for loop.

Typical code before optimization:

// “unoptimized” code
for (let i = 0; i < someArray.length; i++) {
  // ... do something
}

// “optimized” code
for (let i = 0, len = someArray.length; i < len; i++) {
  // ... do something
}

The idea is simple: accessing someArray.length on each iteration adds overhead, so storing it in a local variable len appears to improve loop performance.

But is length really that slow?

For standard arrays, length is lightning‑fast

Modern JavaScript engines treat .length as a constant‑time property read because the value is stored internally.

Thus, for ordinary arrays the two snippets have virtually identical performance; the second version is merely more concise and readable.

For DOM collections, length can be costly

Live collections such as NodeList and HTMLCollection returned by document.getElementsByTagName() or element.childNodes are not true arrays; each length access forces the browser to recount matching elements in the DOM.

Example:

const divs = document.getElementsByTagName('div'); // live HTMLCollection
for (let i = 0; i < divs.length; i++) {
  // imagine we create and insert a new <div> here
  const newDiv = document.createElement('div');
  document.body.appendChild(newDiv);
}

Each loop iteration re‑queries the DOM, causing the divs.length value to grow and potentially leading to an infinite loop or heavy performance penalties.

Correct approach

Convert live DOM collections to a static array before iterating:

// Recommended: use Array.from()
const divs = Array.from(document.getElementsByTagName('div'));
// or spread syntax
const divs = [...document.getElementsByTagName('div')];

divs.forEach(div => {
  // ... safe, fast iteration
});

for (let i = 0; i < divs.length; i++) {
  // .length access is now cheap
}

Methods like querySelectorAll() already return a static NodeList, whose length does not change. However, methods that return live collections (e.g., getElementsByTagName) should be converted to arrays for consistent, efficient loops.

For plain arrays you can safely use for...of, forEach, map, etc., without manually caching length.