Getting More Control: Ending and Continuing Loops

You actually have more control over loops than is apparent in the for , while , and other statements we've already seen. JavaScript also enables you to end a loop partway through using the break statement, and skip on to the next iteration using the continue statement. Those statements are coming up next.

Ending a Loop Early

Sometimes, you might want to end a loop earlyfor instance, when you've found the data for which you were searching an array. To end loops early, you can use the break statement. Here's the syntax of this statement:

 break [  label  ]

This statement can take an optional label that indicates to JavaScript what loop you want to break out of, as we'll see. The break statement has been around in JavaScript as long as there have been loops, as you see in Table 3.6.

Table 3.6. The break Statement

Statement	NS2	NS3	NS4	NS6	IE3a	IE3b	IE4	IE5	IE5.5	IE6
`break`	x	x	x	x	x	x	x	x	x	x

Here's an example; in this case, I'll set up a while loop that'll loop forever by using the Boolean value true as the loop condition. How do you end such a loop? You can use the break statement, as I do here when we've found Claire in an array of peoplewhen we've found Claire, the break statement will end the loop in this code:

(Listing 03-07.html on the web site)

 <HTML>      <HEAD>          <TITLE>              Using the break Statement          </TITLE>      </HEAD>      <BODY>          <H1>Using the break Statement</H1>          <SCRIPT LANGUAGE="JavaScript">              <!--             var index = 0, data = new Array(5)              data[0] = "Fank"              data[1] = "Tom"              data[2] = "Claire"              data[3] = "Sara"              data[4] = "Jane"  while(true){   if(data[index] == "Claire") {   break   }   index++   }   alert("Found Claire at index " + index)  // -->          </SCRIPT>      </BODY>  </HTML>

Tip

It's not usually good programming practice to write loops that would never terminate by themselves , called endless loops . If the break statements in such loops are never executed, those loops will just go on forever, wasting valuable computer time.

Continuing a Loop

Sometimes, you might not want to end a loop, as the break statement is designed to do, but you want to skip the processing of the current iteration and move on to the next iteration. You might have a loop where every iteration takes a great deal of time, for instance, and if you know you're in an iteration of the loop that won't yield anything useful, JavaScript enables you to use the continue statement to move on to the next iteration of the loop. Here's the syntax of the continue statement:

 continue [  label  ]

Like the break statement, this statement can take an optional label that indicates to JavaScript what loop you want to move on to the next iteration in. Like the break statement, the continue statement has been around in JavaScript as long as there have been loops, as you see in Table 3.7.

Table 3.7. The continue Statement

Statement	NS2	NS3	NS4	NS6	IE3a	IE3b	IE4	IE5	IE5.5	IE6
`continue`	x	x	x	x	x	x	x	x	x	x

Here's an example to make this clear. In this case, I'll search the array of names for "Claire" one last timeand each time through, if the current name isn't Claire, I'll continue on to the next iteration using the continue statement. Here's what the code looks like:

(Listing 03-08.html on the web site)

 <HTML>      <HEAD>          <TITLE>              Using the continue Statement          </TITLE>      </HEAD>      <BODY>          <H1>Using the continue Statement</H1>          <SCRIPT LANGUAGE="JavaScript">              <!--             var index = 0, claireIndex, data = new Array(5)              data[0] = "Fank"              data[1] = "Tom"              data[2] = "Claire"              data[3] = "Sara"              data[4] = "Jane"  while(true){   if(data[index] != "Claire") {   index++   continue   }   claireIndex = index   index++   }   alert("Found Claire at index " + claireIndex)  // -->          </SCRIPT>      </BODY>  </HTML>

Using Labeled Statements

Both the break and continue statements can take labels that show what loop you want to break or continue, and that proves useful when you're inside a nested loop (that is, one loop nested inside another). If you have a for loop, for example, and a for loop inside that for loop, and try to use a break statement, which for loop are you breaking out of, the inner one or the outer one? Here's what that problem looks like in code:

 for(var outerLoopIndex = 1; outerLoopIndex < 3; outerLoopIndex++){      for(var innerLoopIndex = 1; innerLoopIndex < 3; innerLoopIndex++){          if(outerLoopIndex == 2 * innerLoopIndex) {              break          }      }  }

To solve this problem, JavaScript now enables you to label loops. This is relatively recent, as you see in Table 3.8.

Table 3.8. Labeled Statements

Statement	NS2	NS3	NS4	NS6	IE3a	IE3b	IE4	IE5	IE5.5	IE6
Labeled			x	x			x	x	x	x

You label a statement with a text label of your choice, followed by a colon , just before the statement itself. And you can use the label in break and continue statements, as here, where I'm solving the problem we just saw by indicating that we want to break out of the outer loop (that is, end both loops):

 <HTML>      <HEAD>          <TITLE>              Using Labeled Statements          </TITLE>      </HEAD>      <BODY>          <H1>Using Labeled Statements</H1>          <SCRIPT LANGUAGE="JavaScript">              <!--                 outer:                  for(var outerLoopIndex = 1; outerLoopIndex < 3; outerLoopIndex++){                      inner:                      for(var innerLoopIndex = 1; innerLoopIndex < 3; innerLoopIndex++){                          if(outerLoopIndex == 2 * innerLoopIndex) {  break outer  }                      }                  }                  document.write("outerLoopIndex = " + outerLoopIndex +                      " innerLoopIndex = " + innerLoopIndex)              // -->          </SCRIPT>      </BODY>  </HTML>

That finishes our work with loops in this chapternow we'll take the next step up in our JavaScript work, which is to start working with functions .