Exiting Loops

These tutorials are about JavaScript and its use for client-side Web programming.

Sometimes you want to break out of a control statement early, perhaps because of an error or some other condition that the conditional expression itself is not testing for. We have seen an example of this already with the break statement used in a switch statement coding block.

Here we will look at various ways to prematurely terminate loops and conditionals by setting multiple exit points.

The break Statement

break breaks you out of the conditional statement and moves on to the first statement outside of the conditional statement. When using break to get out of a condition, be aware that it ignores if statements. This is so you can use an if statement to test whether you need to terminate the current conditional.

For instance, we could use it to modify a previous do ... while statement. In the following example, the code will now terminate if the value to be processed is not a number.

var x = 0;
var rVal = "";
do {
  if (aName[x]) {
    if (parseInt(aName[x]) == NaN) {
      rVal = "Bad Value";
      break;
      }
    bName[x] = someProc(aName[x]);
    }
  x++;
  }
while (aName[x]);

The continue Statement

If you are using an iterative statement and don't want to terminate it, just skip the current instance or iteration, you can use the continue statement. Continue says that the current iteration is done and the next one should be started. This is useful if the statement block has multiple possible exit points.

var x = 0;
var y = 0;
var rVal = newArray();
do {
  if (aName[x]) {
    if (parseInt(aName[x]) == NaN) {
      rVal[y] = "Bad Value at " + aName[x];
      x++;
      y++;
      continue;
      }
    bName[x] = someProc(aName[x]);
    }
  x++;
  }
while (aName[x]);

The following code is in error and might generate an infinite loop. This is because if it hits continue, it doesn't increment the conditional variable before beginning the next iteration, so it will just keep processing the same error over and over again.

// bad code - potential infinite loop
var x = 0;
var y = 0;
var rVal = newArray();
do {
  if (aName[x]) {
    if (parseInt(aName[x]) == NaN) {
      rVal[y] = "Bad Value at " + aName[x];
      y++;
      continue;
      }
    bName[x] = someProc(aName[x]);
    }
  x++;
  }
while (aName[x]);

In spite of this example, it is not recommended that you use the continue statement with do ... while loops, since it may create an infinite loop in browsers running JavaScript 1.2. This is due to a bug in JavaScript 1.2 that causes processing to return to the top of the statement without checking the condition at the end first.

Labels

What happens if you want to exit multiple levels of conditionals at once?

To do this, you need to tell JavaScript where you want to step out to. In order to do this, you need to label the code.

A label is just an identifier that names a specific location in the code. JavaScript identifiers are associated with the statement that follows the label. Therefore, you can use labels to name conditions, giving you a means by which to refer to them.

You label statements by preceding them with an identifier followed by a colon.

myLoop:
while (x < 10) {
  statements;
  }

You can then use the label with a break or continue statement to specify what to break out of or continue with. To use labels with these statements, the labels must refer to a control statement that contains the statement. In other words, you have to be inside something to continue or break out of it.

This example looks complicated, but it is a good example of how using labels might work. The exclamation point in front of the zArray identifier is the negation operation in action. It is saying, " if not some expression." In this case, if the array element in question does not exist.

Loop1:
while (x < 10) {
  Loop2:
  while (y < 10) {
    Loop 3:
    while (z < 10) {
// if no more elements terminate
      if (!zArray[x]) {
        break Loop1;
        }
// if end of sub-array
// move to next primary array element
      else if (!zArray[x][y]) {
        continue Loop1;
        }
      else if (!zArray[x][y][z]) {
        continue Loop2;
        }
// if end of sub-sub-array
// move to next sub-array element
      else {
        some statements;
        }
      }
    }
  }

The break Loop1 statement would terminate the entire loop structure, while the continue Loop1 would start with the next iteration of the top level while statement. This way we can step out to any level we want to, rather than having to run through every iteration of the inner loops every time.

These pages can be found at: [http://academ.hvcc.edu/~kantopet/]
Copyright 2003 -- Peter L. Kantor[kantopet@hvcc.edu]
Last Updated January 2003