Loop control

JavaScript provides control to exit out of loops and also switch statements. There are many use cases when we have to exit a loop, with it going through the full iterations.
Also, there are situations where you need to skip some of the iterations.

To handle such situations JavaScript has a break and continue statements.

break statement

We have seen the JavaScript break statement in the switch part. There we exited out of the switch statement once the condition is satisfied.
Now, let look at an example where we can break from a for loop.

var num = 10;
for(var counter=0; counter < 100 ; counter++) {
 if(num === counter) {
   console.log('Found the num ', num);
   break;
 }
 console.log('Counter is ', counter);
}

//Output -

//Counter is 0 
//Counter is 1 
//Counter is 2 
//Counter is 3 
//Counter is 4 
//Counter is 5 
//Counter is 6 
//Counter is 7 
//Counter is 8 
//Counter is 9
//Found the num 10

In the above example, we are trying to find a num 10. Inside the for loop, we have a conditional checking if statement. It checks whether num is equal to counter. This will be false first 10 times i.e. 0-9 and it will print Counter is x to the console.
Once the counter is 10 then the if statement will be true and statements inside it will be executed. It will first print Found the num 10 and then break from them for a loop. Notice that the for loop is till 100 and it should print till Counter is 99 if it didn’t exit prematurely.

continue statement

The continue statement tell the compiler to immediately start the next iteration of the loop, by skipping the rest of the statement below it in the current iteration.

Consider the following example to find the odd numbers between 0 to 10.

for(var n=0; n < 10 ; n++) {
 if(n%2 === 0) {
   continue;
 }
 console.log('Odd number ', n);
}
//Odd number 1 
//Odd number 3 
//Odd number 5 
//Odd number 7 
//Odd number 9

As we can see from above code, if the condition of n%2 === 0 is true, then we skip the console log in the next line. This will be true for 2, 4, 6, 8.

Using the label to control the flow

We can use a label with break and continue to control where the break or to continue statement goes. A label is simply an identifier followed by a colon (:).
Let’s look at the below example.

outerLabel:
for(var i=0; i<5; i++) {
 console.log('Outer loop i -', i);
 innerLabel:
 for(var j=0; j<5; j++) {
   if(j%2 === 0) continue innerLabel;
   if(i === 4) break outerLabel;
   console.log('Inner loop j -', j);    
 }
}
//Outer loop i - 0 
//Inner loop j - 1 
//Inner loop j - 3 
//Outer loop i - 1 
//Inner loop j - 1 
//Inner loop j - 3 
//Outer loop i - 2 
//Inner loop j - 1 
//Inner loop j - 3 
//Outer loop i - 3 
//Inner loop j - 1 
//Inner loop j - 3 
//Outer loop i - 4

As in the above example, whenever the inner loop of j encounters 0, 2, 4 the condition j%2 === 0 becomes true and the continue will run to the label innerLabel.
Similarly, when the condition i === 4 is true, we get a break from both inner and outer loop and go to the label outerLabel.