HiveBrain v1.2.0
Get Started
← Back to all entries
snippetjavascriptTip

Use JavaScript for loops if you need to break out early

Submitted by: @import:30-seconds-of-code··
0
Viewed 0 times
javascriptoutloopsearlyyouuseneedbreakfor

Problem

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:
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:

Solution

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`

Code Snippets

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`
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

Context

From 30-seconds-of-code: for-loop-early-break

Revisions (0)

No revisions yet.