JavaScript Loops: Mastering Iteration

Loops are fundamental in JavaScript, enabling you to execute a block of code repeatedly based on certain conditions.

Get Rajeswari Depala’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Understanding the various types of loops and their use cases will help you write more efficient and maintainable code.

The for Loop

The for loop is the most common looping construct in JavaScript. It consists of three parts: initialization, condition, and final expression.

for (initialization; condition; finalExpression) {
  // Loop body
}

for (let i = 0; i < 5; i++) {
  console.log(i);
}

• Initialization: Executes once at the start of the loop (e.g., let i = 0).
• Condition: Evaluated before each iteration. The loop continues as long as the condition is true.
• Final Expression: Executes after each iteration, typically updating the loop counter (e.g., i++).

Key Points:

• Use a for loop when the number of iterations is known.

for...in

The for...in loop iterates over the enumerable property keys of an object. However, it is not ideal for arrays because it may traverse the prototype chain.

let obj = { a: 1, b: 2 };
for (let key in obj) {
  console.log(key, obj[key]);
}

for...of

The for...of loop iterates over iterable objects such as arrays, strings, maps, and sets. It’s particularly useful for handling values directly.

let arr = [1, 2, 3];
for (let value of arr) {
  console.log(value);
}

Asynchronous Iteration

Traditional loops don’t wait for promises. For asynchronous operations, use for...of with await or map over an array of promises.

async function processArray(array) {
  for (let item of array) {
    await doAsyncWork(item);
  }
}

The while Loop

The while loop executes as long as its condition evaluates to true.

while (condition) {
  // Loop body
}

let i = 0;
while (i < 5) {
  console.log(i);
  i++;
}

• Condition is checked before each iteration. The loop continues if the condition is true.
• Use while when the number of iterations is not predetermined.

Infinite Loops

A loop that never terminates can freeze your application. Always ensure your condition eventually becomes false or use a break statement to exit.

while (true) {
  // Condition never becomes false
  break; // Prevents freezing
}

The do...while Loop

The do...while loop is similar to the while loop but ensures that the loop body executes at least once because the condition is checked after the body.

do {
  // Loop body
} while (condition);

let i = 0;
do {
  console.log(i);
  i++;
} while (i < 5);

Key Points:

• The loop body executes once before the condition is evaluated.
• Use do...while when the loop must run at least once, regardless of the condition.

Conclusion

JavaScript offers multiple looping constructs to cater to different scenarios:

• Use for when the iteration count is known.
• Use while for indeterminate loops that depend on runtime conditions.
• Use do...while when the loop must execute at least once.
• Leverage for...in for objects and for...of for iterable objects.

By mastering these loops, you can handle a wide range of iterative tasks with clarity and efficiency.

Happy coding!