Tip: Use JavaScript for loops if you need to break out early

Angelos Chalaris · JavaScript, Array, Loop · Jun 12, 2021

The usefulness of the humble for loop in modern JavaScript is rarely talked about. Apart from it being particularly useful in asynchronous operation scenarios, it can also make your code a lot more performant shall you need to break out of a loop early. Consider the following example:

const smallArray = [0, 2];
const largeArray = Array.from({ length: 1000 }, (_, i) => i);

const areEqual = (a, b) => {
  let result = true;
  a.forEach((x, i) => {
    if (!result) return;
    if (b[i] === undefined || x !== b[i]) result = false;
  });
  return result;
}

areEqual(largeArray, smallArray); // false
// Will loop over all items in `largeArray`

Obviously, the code isn't optimized, but it highlights the issue of array methods, such as Array.prototype.forEach() being unable to break out of the loop early. To counteract this, we could use a for loop and an early return instead:

const smallArray = [0, 2];
const largeArray = Array.from({ length: 1000 }, (_, i) => i);

const areEqual = (a, b) => {
  for (let i in a) {
    if (b[i] === undefined || a[i] !== b[i]) return false;
  }
  return true;
}

areEqual(largeArray, smallArray); // false
// Will only loop until the first mismatch is encountered

Recommended snippets & collections