Last modified on 25 March 2015, at 14:20

JavaScript/Control Structures

Previous: Operators Index Next: Functions

The control structures within JavaScript allow the program flow to change within a unit of code or function. These statements can determine whether or not given statements are executed, as well as repeated execution of a block of code.

Most of the statements enlisted below are so-called conditional statements that can operate either on a statement or a block of code enclosed with braces ({ and }). The same structures utilize Booleans to determine whether or not a block gets executed, where any defined variable that is neither zero nor an empty string is treated as true.

Conditional statementsEdit

ifEdit

The if statement is straightforward ‐ if the given expression is true, the statement or statements will be executed. Otherwise, they are skipped.

if (a === b) {
  document.body.innerHTML += "a equals b";
}

The if statement may also consist of multiple parts, incorporating else and else if sections. These keywords are part of the if statement, and identify the code blocks that are executed, if the preceding condition is false.

if (a === b) {
  document.body.innerHTML += "a equals b";
} else if (a === c) {
  document.body.innerHTML += "a equals c";
} else {
  document.body.innerHTML += "a does not equal either b or c";
}

whileEdit

The while statement executes a given statement as long as a given expression is true. For example, the code block below will increase the variable c to 10:

while (c < 10) {
  c += 1;
  // …
}

This control loop also recognizes the break and continue keywords. The break keyword causes the immediate termination of the loop, allowing for the loop to terminate from anywhere within the block.

The continue keyword finishes the current iteration of the while block or statement, and checks the condition to see, if it is true. If it is true, the loop commences again.

do … whileEdit

The do … while statement executes a given statement as long as a given expression is true - however, unlike the while statement, this control structure will always execute the statement or block at least once. For example, the code block below will increase the variable c to 10:

do {
  c += 1;
} while (c < 10);

As with while, break and continue are both recognized and operate in the same manner. break exits the loop, and continue checks the condition before attempting to restart the loop.

forEdit

The for statement allows greater control over the condition of iteration. While it has a conditional statement, it also allows a pre-loop statement, and post-loop increment without affecting the condition. The initial expression is executed once, and the conditional is always checked at the beginning of each loop. At the end of the loop, the increment statement executes before the condition is checked once again. The syntax is:

for (<initial expression>;<condition>;<final expression>)

The for statement is usually used for integer counters:

var c;
for (c = 0; c < 10; c += 1) {
  // …
}

While the increment statement is normally used to increase a variable by one per loop iteration, it can contain any statement, such as one that decreases the counter.

Break and continue are both recognized. The continue statement will still execute the increment statement before the condition is checked.

A second version of this loop is the for .. in statement that has following form:

for (element in object) {
  // …
}

The order of the got elements is arbitrary. It should not be used when the object is of Array type

switchEdit

The switch statement evaluates an expression, and determines flow control based on the result of the expression:

switch(i) {
case 1:
  // …
  break;
case 2:
  // …
  break;
default:
  // …
  break;
}

When i gets evaluated, it's value is checked against each of the case labels. These case labels appear in the switch statement and, if the value for the case matches i, continues the execution at that point. If none of the case labels match, execution continues at the default label (or skips the switch statement entirely, if none is present.)

Case labels may only have constants as part of their condition.

The break keyword exits the switch statement, and appears at the end of each case in order to prevent undesired code from executing. While the break keyword may be omitted (for example, you want a block of code executed for multiple cases), it may be considered bad practice doing so.

The continue keyword does not apply to switch statements.

withEdit

The with statement is used to extend the scope chain for a block[1] and has the following syntax:

with (expression) {
  // statement
}

ProsEdit

The with statement can help

  • reduce file size by reducing the need to repeat a lengthy object reference, and
  • relieve the interpreter of parsing repeated object references.

However, in many cases, this can be achieved by using a temporary variable to store a reference to the desired object.

ConsEdit

The with statement forces the specified object to be searched first for all name lookups. Therefore

  • all identifiers that aren't members of the specified object will be found more slowly in a 'with' block and should only be used to encompass code blocks that access members of the object.
  • with makes it difficult for a human or a machine to find out which object was meant by searching the scope chain.
  • Used with something else than a plain object, with may not be forward-compatible.

Therefore, the use of the with statement is not recommended, as it may be the source of confusing bugs and compatibility issues. See the "Ambiguity Con" paragraph in the "Description" section below for details.

ExampleEdit

var area;
var r = 10;
 
with (Math) {
  a = PI*r*r;       // == a = Math.PI*r*r
  x = r*cos(PI);    // == a = r*Math.cos(Math.PI);
  y = r*sin(PI/2);  // == a = r*Math.sin(Math.PI/2);
}


Previous: Operators Index Next: Functions
  1. Sheppy, Shaver et al. (2014-11-18). "with" (in English) (HTML). Mozilla. Archived from the original on 2014-11-18. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/with. Retrieved 2015-03-18.