How to Write Efficient Loops in JavaScript

This article will give you 6 tips to write more efficient loops in Javascript, helping you create faster and more performant apps and websites.

Avoid using for-in loops for arrays

Using for-in loops for arrays can be slower and can cause unexpected behavior as they iterate over all properties of an object, including those inherited from its prototype. Instead, use a for loop or a forEach loop, which are designed for arrays.

Example:

const myArray = [1, 2, 3, 4, 5];

// Avoid using for-in loops for arrays
for (let index in myArray) {
  console.log(myArray[index]);
}

// Use a for loop instead
for (let i = 0; i < myArray.length; i++) {
  console.log(myArray[i]);
}

// Or use a forEach loop
myArray.forEach((value) => {
  console.log(value);
});

Use caching

If you need to access a property of an object multiple times in a loop, consider caching it in a variable before the loop starts to avoid repeatedly accessing the property.

Example:

const myObject = { 
  prop1: 'value1',
  prop2: 'value2',
  prop3: 'value3'
};

// Caching the property in a variable for better performance
const prop2Value = myObject.prop2;

for (let i = 0; i < 10; i++) {
  // Avoid accessing the property multiple times
  console.log(prop2Value);
}

Use the most efficient loop for your situation

Depending on the situation, different types of loops may be more efficient. For example, for loops are generally faster than forEach loops, but forEach loops are more concise and easier to read (and write?).

Example:

const myArray = [1, 2, 3, 4, 5];

// Use a for loop for maximum performance
for (let i = 0; i < myArray.length; i++) {
  console.log(myArray[i]);
}

// Use a forEach loop for simplicity and readability
myArray.forEach((value) => {
  console.log(value);
});

Use while loops for unknown loop counts

If you don’t know the exact number of iterations needed for a loop, consider using a while loop instead of a for loop. This allows you to control the loop based on a condition rather than a fixed number of iterations.

Example:

let i = 0;
const max = Math.floor(Math.random() * 10) + 1;

// Use a while loop when the number of iterations is unknown
while (i < max) {
  console.log(`Iteration ${i}`);
  i++;
}

Minimize DOM access

When manipulating the DOM in a loop, try to minimize the number of times you access the DOM, as it can be a slow operation. Instead, use variables to store the elements you need to access and only update the DOM once after the loop has finished.

Example:

const myElements = document.querySelectorAll('.my-class');

// Store the elements in an array to avoid repeated DOM access
const elementsArray = Array.from(myElements);

for (let i = 0; i < elementsArray.length; i++) {
  // Do something with the element
  elementsArray[i].classList.add('new-class');
}

// Only update the DOM once, after the loop has finished
document.body.append(...elementsArray);

Use the least amount of code possible

Minimizing the amount of code in a loop can improve its performance. Avoid unnecessary operations and conditionals, and only include the code that is necessary for the loop to function correctly.

Example:

const myArray = [1, 2, 3, 4, 5];

for (let i = 0; i < myArray.length; i++) {
  // Only include the necessary code in the loop
  if (myArray[i] === 3) {
    console.log('Found 3!');
    // exit the loop to stop unneccessary iterations
    break;
  }
}

In this example, within the loop, there is an if statement that checks if the current element in the array is equal to 3. If the condition is true, then the message Found 3! is printed to the console using console.log(). The break statement is also executed, which immediately exits the loop and stops further iterations.