The JavaScript loops are used to iterate the piece of code using for, while, do while or for-in loops. It makes the code compact. It is mostly used in array. Looping or iteration control is used to execute some set of instructions repeatedly. Without loops, we would have to write the instructions as many times we want them to execute. Let's print numbers 1 through 5 without using a loop -
<script language="javascript"> document.write (1 + "<br>"); document.write (2 + "<br>"); document.write (3 + "<br>"); document.write (4 + "<br>"); document.write (5 + "<br>"); </script>
The following shows the output of the above code -
1 2 3 4 5
Before we do this same example with a loop control structure, let's first point out that there are two types of loops. loops that repeat a set number of times before quitting. This type of loop is created with a for loop. You can use a for loop when you know exactly how many times you want to execute some code. loops that repeat until a certain condition is satisfied. This type of loop is created with a while loop. The while is useful for those situation in which it is known how many times a specific code needs to be run.
These are statements you can use to alter the normal flow of control in the loop. For example, you may have to terminate a loop before it’s complete execution. Another situation may be that you may need to skip part of the loop based on certain criteria. In situations like this, JavaScript provides the break and continue statements.The break statement helps you come out of a loop prior to its normal completion while the continue statement helps you jump tot he next iteration of the loop.
In Javascript, when required you can stop or come out from the loop by placing break statement in the Javascript Loop Control. Sometimes when coding in JavaScript, developers come across situations where there is need to control the output of a loop or control when the loop stops running. Situations like this are very common and can only be taken care of using the knowledge of loop control. To handle such looping situations, JavaScript allows the use of the break and continue statements. With the help of this statements, developers can control the loop by either coming out of the loop at a specific time, or by starting the next iteration of any loop.
After understanding JavaScript loops in our previous tutorial, we are now going to look at the basic JavaScript loop control statements. If you haven’t read the JavaScript Loops article yet, I strongly recommend you to do that. You cannot fully grasp the concept of loop controls if you are unfamiliar with what loops are and how they work. After knowing what JavaScript loops are…let’s start with our tutorial on JavaScript Loop Control.
Loop control statements deviates a loop from its normal flow. All the loop control statements are attached to some condition inside the loop.
Break statement
break statement is used to break the loop on some condition.
Syntax
for(initializer, condition, modifier)
{
if(condition)
{
break;
}
statements;
}
//same thing is valid for while loop
while(condition)
{
if(condition)
{
break;
}
statements;
}
Example
<script>
for(var i=1;i<10;i++)
{
if(i===7) break;
document.write(i + "<br />");
}
/**********output***********
1
2
3
4
5
6
***************************/
</script>
for loop should print from 1 - 10. But inside loop we have given a condition that if value of i equals to 7, then break out of loop. I have left the curly braces within the if condition because there is only one statement to be executed.
Remember break burst the nearest for loop within which it is contained. To understand what it means check out the next example.
Example
<script>
for(var i=1;i<=3;i++)
{
document.write("Outer Loop : " + i + "<br />");
for(var j=1;j<=3;j++)
{
document.write("Inner Loop : " + j + "<br />");
if(j===2)
{
break;
}
}
document.write("<br />");
}
/**********output***********
Outer Loop : 1
Inner Loop : 1
Inner Loop : 2
Outer Loop : 2
Inner Loop : 1
Inner Loop : 2
Outer Loop : 3
Inner Loop : 1
Inner Loop : 2
***************************/
</script>
Continue statement
continue statement is used to skip an iteration of a loop.
Syntax
for(initializer, condition, modifier)
{
if(condition)
{
continue;
}
statements;
}
//same thing is valid for while loop
while(condition)
{
if(condition)
{
continue;
}
statements;
}
Example
<script>
for(var i=0;i<10;i++)
{
if(i===3 || i===7) continue;
document.write(i + "<br />");
}
/**********output***********
0
1
2
4
5
6
8
9
***************************/
</script>
In the code above when the value of i becomes 3 or 7, continue forces the loop to skip without further executing any instructions inside the for loop in that current iteration. Remember continue skips the nearest loop iteration within which it is contained. To understand what it means check out the next example.
Javascript Infinite Loop
If you have an expression that always evaluates to true , that is your code gets stuck in the loop "forever". These types of loop is called infinite loop.
for(var i=1;;i++){
document.write( i + "<br>" );
}
This loop will run forever because there is no condition is specified in the loop statement.