No announcement
 

Loops (for, while, do-while, loop control)

Loops in JavaScript are used to repeatedly execute a block of code as long as a certain condition is true. There are three main types of loops in JavaScript: for, while, and do-while.

for Loop:

The for loop is commonly used when you know the number of iterations you want to perform. It consists of three parts: initialization, condition, and iteration. The loop will continue as long as the condition is true.

Example:

for_loop.html

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript for Loop Example</title>
</head>
<body>

<h2>JavaScript for Loop:</h2>
<script>
for (let i = 1; i <= 5; i++) {
  console.log("Iteration: " + i);
}
</script>

</body>
</html>

Output
Iteration: 1 Iteration: 2 Iteration: 3 Iteration: 4 Iteration: 5

In this example, the for loop starts with i initialized to 1. It will continue as long as i is less than or equal to 5. After each iteration, i is incremented by 1. The loop will execute five times, printing the message "Iteration: 1" up to "Iteration: 5".

while Loop:

The while loop continues to execute a block of code as long as the specified condition is true. The loop may not execute at all if the condition is initially false.

Example:

while_loop.html

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript while Loop Example</title>
</head>
<body>

<h2>JavaScript while Loop:</h2>
<script>
let count = 1;

while (count <= 5) {
  console.log("Count: " + count);
  count++;
}
</script>

</body>
</html>

Output
Count: 1 Count: 2 Count: 3 Count: 4 Count: 5

In this example, the while loop starts with count initialized to 1. The loop will continue as long as count is less than or equal to 5. After each iteration, count is incremented by 1. The loop will execute five times, printing the message "Count: 1" up to "Count: 5".

do-while Loop:

The do-while loop is similar to the while loop, but it guarantees that the code block is executed at least once before the condition is checked.

Example:

do_while.html

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript do-while Loop Example</title>
</head>
<body>

<h2>JavaScript do-while Loop:</h2>
<script>
let num = 1;

do {
  console.log("Number: " + num);
  num++;
} while (num <= 5);
</script>

</body>
</html>

Output
Number: 1 Number: 2 Number: 3 Number: 4 Number: 5

In this example, the do-while loop starts with num initialized to 1. The code block inside the loop will execute and print "Number: 1". After each iteration, num is incremented by 1. The loop will execute five times in total, printing "Number: 1" up to "Number: 5".

Loops are essential in JavaScript for repetitive tasks and processing collections of data. Each type of loop offers different functionalities and is used depending on the specific requirements of the program.

Loop Control Statements

Loop control statements in JavaScript allow you to alter the flow of loops. The two main loop control statements are break and continue.

break Statement:

The break statement is used to terminate the execution of a loop prematurely. When encountered inside a loop, it immediately exits the loop, and the program continues with the next statement after the loop.

Example:

break.html

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript break Statement Example</title>
</head>
<body>

<h2>JavaScript break Statement:</h2>
<script>
for (let i = 1; i <= 5; i++) {
  if (i === 3) {
    break; // Terminate the loop when i is equal to 3
  }
  console.log("Iteration: " + i);
}
</script>

</body>
</html>

Output
Iteration: 1 Iteration: 2

In this example, the for loop runs from i = 1 to i = 5. When i becomes equal to 3, the break statement is encountered, terminating the loop. As a result, only two iterations occur, and the output displays "Iteration: 1" and "Iteration: 2".

continue Statement:

The continue statement is used to skip the current iteration of a loop and move on to the next iteration. When encountered inside a loop, it jumps to the next iteration without executing the rest of the loop's code for the current iteration.

Example:

continue.html

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript continue Statement Example</title>
</head>
<body>

<h2>JavaScript continue Statement:</h2>
<script>
for (let i = 1; i <= 5; i++) {
  if (i === 3) {
    continue; // Skip iteration when i is equal to 3
  }
  console.log("Iteration: " + i);
}
</script>

</body>
</html>

Output
Iteration: 1 Iteration: 2 Iteration: 4 Iteration: 5

In this example, the for loop runs from i = 1 to i = 5. When i becomes equal to 3, the continue statement is encountered, skipping the current iteration. As a result, the output displays "Iteration: 1", "Iteration: 2", "Iteration: 4", and "Iteration: 5", with the iteration corresponding to i = 3 being skipped.

Loop control statements, such as break and continue, offer greater flexibility and control when working with loops, enabling you to tailor the loop's behavior based on specific conditions.