Mastering Loops in JavaScript: `while`, `do...while`, and `for`

In this blog, we'll explore the different types of loops in JavaScript: while, do...while, and for. We'll also cover how to break out of loops, continue to the next iteration, and use labels for more complex control flow. Let's dive in!

The while Loop

The while loop continues to execute as long as a specified condition is true.

Syntax:

while (condition) {
  // code to execute
}

Example:

let count = 0;

while (count < 5) {
  console.log(count);
  count++;
}
// Output: 0 1 2 3 4

Explanation:

• The loop continues to execute as long as count is less than 5.
• Inside the loop, count is incremented by 1 in each iteration.

The do...while Loop

The do...while loop ensures that the code block is executed at least once before checking the condition.

Syntax:

do {
  // code to execute
} while (condition);

Example:

let count = 0;

do {
  console.log(count);
  count++;
} while (count < 5);
// Output: 0 1 2 3 4

Explanation:

• The loop ensures that the code block is executed at least once.
• The condition is checked after the first iteration.

The for Loop

The for loop is used when you know in advance how many times you want to execute a statement or a block of statements.

Syntax:

for (initialization; condition; increment) {
  // code to execute
}

Example:

for (let i = 0; i < 5; i++) {
  console.log(i);
}
// Output: 0 1 2 3 4

Explanation:

• initialization: let i = 0 initializes the loop counter.
• condition: i < 5 is the condition that must be true for the loop to continue.
• increment: i++ increments the loop counter after each iteration.

Breaking the Loop

The break statement is used to exit a loop prematurely.

Example:

for (let i = 0; i < 10; i++) {
  if (i === 5) {
    break;
  }
  console.log(i);
}
// Output: 0 1 2 3 4

Explanation:

• The loop exits when i equals 5.

Continue to the Next Iteration

The continue statement is used to skip the current iteration and move to the next iteration of the loop.

Example:

for (let i = 0; i < 10; i++) {
  if (i === 5) {
    continue;
  }
  console.log(i);
}
// Output: 0 1 2 3 4 6 7 8 9

Explanation:

• The loop skips the iteration when i equals 5 and continues with the next iteration.

Labels for break and continue

Labels can be used to break out of or continue to the next iteration of an outer loop from an inner loop.

Example:

outerLoop: for (let i = 0; i < 3; i++) {
  for (let j = 0; j < 3; j++) {
    if (i === 1 && j === 1) {
      break outerLoop;
    }
    console.log(`i = ${i}, j = ${j}`);
  }
}
// Output: i = 0, j = 0
//         i = 0, j = 1
//         i = 0, j = 2
//         i = 1, j = 0

Explanation:

• The break outerLoop statement exits the outer loop when i equals 1 and j equals 1.

Example with continue:

outerLoop: for (let i = 0; i < 3; i++) {
  for (let j = 0; j < 3; j++) {
    if (i === 1 && j === 1) {
      continue outerLoop;
    }
    console.log(`i = ${i}, j = ${j}`);
  }
}
// Output: i = 0, j = 0
//         i = 0, j = 1
//         i = 0, j = 2
//         i = 1, j = 0
//         i = 2, j = 0
//         i = 2, j = 1
//         i = 2, j = 2

Explanation:

• The continue outerLoop statement skips the current iteration of the outer loop when i equals 1 and j equals 1.

Summary

• while Loop: Continues to execute as long as a condition is true.
• do...while Loop: Ensures the code block is executed at least once before checking the condition.
• for Loop: Used when you know in advance how many times you want to execute a statement or block of statements.
• break Statement: Exits a loop prematurely.
• continue Statement: Skips the current iteration and moves to the next iteration of the loop.
• Labels: Used to break out of or continue to the next iteration of an outer loop from an inner loop.

Conclusion

Loops are essential for performing repetitive tasks in JavaScript. By understanding the different types of loops and how to control their flow with break, continue, and labels, you'll be able to write more efficient and flexible code. Keep practicing and exploring to deepen your understanding of loops in JavaScript.

Stay tuned for more in-depth blogs on JavaScript! Happy coding!