top

Search

JavaScript Tutorial

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 statementWe 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 10In 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 statementThe 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 9As 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 flowWe 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 - 4As 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.
logo

JavaScript Tutorial

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.

Leave a Reply

Your email address will not be published. Required fields are marked *

Comments

Aditya

The tutorial provides the more information JavaScript this provides the end to end information about JS and also they provides the more detailed concepts of loops, functions, objects, arrays this will use us to buld the effective web site. Thanks for the team good job.

Suggested Tutorials

Node JS Tutorial

Build various types of web applications,command-line application,etc.
Node JS Tutorial

Build various types of web applications,command-line application,etc....

Read More

Angular JS Tutorial

Introduction: Angular  (What is Angular?)Angular was formerly introduced by Google corporation in 2012 and was considered to be one of the most promising among JavaScript frameworks. It was written completely in JavaScript to separate an application’s logic from DOM manipulation, aiming at dynamic page updates. Angular introduced many powerful features enabling the developer to effortlessly create rich and single-page applications.Topics CoveredThis Angular tutorial will span over eight modules, each module covering numerous individual aspects that you need to gain complete information about Angular. This set of modules serves as an Angular tutorial for beginners along with experienced IT professionals.Here are the topics that will be covered in the Angular tutorial:Get started with Angular.Learn the basics of Angular.Know what Angular Directives.Get an idea of Component Inputs and Outputs of Angular.Know about Forms in Angular.About Services in Angular.Pipes in Angular.HTTP, Routing and Building in Angular.Who can benefit from this tutorial?This Angular tutorial will be helpful to IT professionals such as:Software Developers, Web Application Programmers and IT Professionals Software Architects and Testing Professionals Career aspirants in web development
Angular JS Tutorial

Introduction: Angular  (What is Angular?)Angular was formerly introdu...

Read More