Print bookPrint book

Loop Control Structures (break, continue, Nested Loop)

Site: Philippine Science High School - MC - Knowledge Hub
Course: SY25.CS3.Web Development
Book: Loop Control Structures (break, continue, Nested Loop)
Printed by: , Guest user
Date: Thursday, 7 August 2025, 9:50 AM

Table of contents

1. Introduction


After completing this module, you are expected to:

    • Control loops with the break and continue statements
    • Implement nested loop

          In the previous learning module, you learned how to create corresponding loop statements to represent the iterative process and how to use the while, the do while, and the for..in statements to repeatedly execute codes in JavaScript.

          In this learning module you will learn how to control loops with the break and continue statements, and how to use nested loops in JavaScript. 

          JavaScript gives you more flexibility when it comes to loop statements. There are instances that you might need to get out of a loop without going all the way to the bottom. You may also want to skip a part of your code block and go straight to the next loop iteration.

          The break and continue statements in JavaScript will manage these situations. These statements are used to exit a loop immediately or to begin the next iteration of a loop.

2. break statement


          When a break statement in a loop is encountered by JavaScript, the loop exits immediately without any other statements in the loop being executed. Control is passed immediately to the statement following the body of the loop.

for (var count = 1; count <= 5; count++) {
if (count === 3) {
break;
}
document.write("<p>" + count + "</p>");
}


          The for loop is used in the above program code to print the value of the count in each iteration.

          The break statement is used as:

          This implies that the break statement terminates the loop when count is equal to 3. Hence, values greater than or equal to 3 are not included in the output.


3. continue statement


          It prevents the execution of the current iteration when JavaScript finds a continue statement in a loop and goes back to the beginning of the loop to begin the next iteration.

          In the example code below, if the count variable is equal to 3, the continue statement also prevents the current iteration of the while loop, and the script skips printing the number 3. The loop, however, continues to iterate until it is false for the conditional expression count <= 5.

var count = 1;
while (count <= 5 ) {
count++;
if (count === 3) {
 continue;
}
document.write("<p>" + count + "</p>");
}


4. Nested Loop


          Nested loops are a type of loop that is made up of many loops. The most popular type of nested loop is one loop within another. “Outer loop” is the first loop and the “inner loop” is the second loop. The outer loop executes first, followed by the inner loop, which executes inside the outer loop each time the outer loop runs.

Syntax:

Let us look at the example below:

<script>
// count from 1 to 5 three times
for (counter = 1; counter < 4; counter++) {
 document.write("Count from 1 to 5" + "</br>");
 for (counterTwo = 1; counterTwo < 6; counterTwo++){
 document.write(counterTwo + "<br />");
 }
}
</script>


Output:

          The sample code runs the outer loop and the inner loop five times each and the numbers 1-5 are printed 3 different times. The individual digits are printed by the inner loop, while the outer loop determines how many times this task is repeated. Trying to change the counter from < 4 to < 2, the numbers 1 through 5 should only be printed once if this change is made. This is because it only executes the outer loop once. Only the inner loop, not the outer loop would exit if the break; statement occurred in the inner loop.

          The next two example codes below show the nested for a while loop and a do while loop that will generate the same output as the example codes above.

 Nested while loop example:

<script>
// count from 1 to 5 three times
counter = 1;
while (counter < 4) {
document.write("Count from 1 to 5" + "<br />");
counter++;
counterTwo = 1;
 while (counterTwo < 6) {
  document.write( counterTwo + "<br />");
  counterTwo++;
}
 }
 </script>


Nested do while loop example:

<script>
// count from 1 to 5 three times
counter = 1;
do {
    document.write("Count from 1 to 5" + "<br />");
    counter++;
    
    counterTwo = 1;
    do {
         document.write( counterTwo + "<br />");   
         counterTwo++;
 
    } while (counterTwo < 6)
       
} while (counter < 4)         
</script>


5. Summary and References


Summary

In summary,

  • break statement when encountered by JavaScript in a loop, the loop exits immediately without any other statements in the loop being executed.
  • continue statement prevents the execution of the current iteration when JavaScript finds a continuous statement in a loop and goes back to the beginning of the loop to begin the next iteration.
  • Nested loops are a type of loop that is made up of many loops. The most popular type of nested loop is one loop within another.

 References

Sasha Vodnik and Don Gosselin(2015). JavaScript. In Sasha Vodnik and Don Gosselin (Sixth Edition), Building Arrays and Controlling Flow (147-211). Australia, Brazil, Mexico, Singapore, United Kingdom, United States, Cengage Learning

 JavaScript Loops: (n.d.). Retrieve from https://www.tutorialrepublic.com/javascript-tutorial/javascript-loops.php

 JavaScript Loops: (n.d.). Retrieve from https://www.dofactory.com/javascript/loops

 JavaScript break statement: (n.d.). Retrieve from https://www.programiz.com/javascript/break-statement

Nested Loop JavaScript: (n.d.). Retrieve from https://codingrooms.com/blog/nested-loops-javascript/

 What is Nested Loop in JavaScript: (n.d.). Retrieve from https://gyandecoder.com/what-is-nested-loop-in-javascript/