switch

This article is in need of an editorial review.

Summary

Evaluates an expression, matching the expression's value to a case clause, and executes statements associated with that case.

Statement
Implemented in JavaScript 1.2
ECMAScript Edition ECMA-262 3rd Edition

Syntax

switch (expression) {
  case expression1:
    statements1
    [break;]
  case expression2:
    statements2
    [break;]
  ...
  case expressionN:
    statementsN
    [break;]
  default:
    statements_def
    [break;]
}

Parameters

expression
An expression matched against each case clause.
case expressionN
A case clause used to match against expression.
statementsN
Statements that are executed if expression matches the associated case clause.
statements_def
Statements that are executed if expression does not match any case clause.

Description

If a match is found, the program executes the associated statements. If multiple cases match the provided value, the first case that matches is selected, even if the cases are not equal to each other.

The program first looks for a case clause whose expression evaluates to the same value as the input expression (using strict comparison, ===) and then transfers control to that clause, executing the associated statements. If no matching case clause is found, the program looks for the optional default clause, and if found, transfers control to that clause, executing the associated statements. If no default clause is found, the program continues execution at the statement following the end of switch. By convention, the default clause is the last clause, but it does not need to be so.

The optional break statement associated with each case label ensures that the program breaks out of switch once the matched statement is executed and continues execution at the statement following switch. If break is omitted, the program continues execution at the next statement in the switch statement.

Examples

Example: Using switch

In the following example, if expr evaluates to "Bananas", the program matches the value with case "Bananas" and executes the associated statement. When break is encountered, the program breaks out of switch and executes the statement following switch. If break were omitted, the statement for case "Cherries" would also be executed.

switch (expr) {
  case "Oranges":
    document.write("Oranges are $0.59 a pound.<br>");
    break;
  case "Apples":
    document.write("Apples are $0.32 a pound.<br>");
    break;
  case "Bananas":
    document.write("Bananas are $0.48 a pound.<br>");
    break;
  case "Cherries":
    document.write("Cherries are $3.00 a pound.<br>");
    break;
  case "Mangoes":
  case "Papayas":
    document.write("Mangoes and papayas are $2.79 a pound.<br>");
    break;
  default:
    document.write("Sorry, we are out of " + expr + ".<br>");
}

document.write("Is there anything else you'd like?<br>");

What happens if I forgot a break?

If you forget a break then script will run from the case where criteria is met, and will run the case after that regardless if criteria was met. See example here:

var foo = 0;
switch (foo) {
    case -1:
        alert('negative 1');
    case 0: // foo is 0 so criteria met here so this block will run
        alert(0)
        // NOTE: the forgotten break would have been here
    case 1: / /no break statement in 'case 0:' so this case will run as well
        alert(1);
        break; // it encounters this break so will not continue into 'case 2:'
    case 2:
        alert(2);
        break;
    default:
        alert('default');
}

Methods for Multi-criteria Case

If you would like one case segment to meet multiple criteria there are two methods/tricks. Method one is the recommended way, method two is a "hacky" way. The two methods below aim to alert "yes" when variable foo is 0, 1, 2, or 3.

Sources for these techniques are here:

  1. Multple Cripteria Single Case Switch Statement (Stackoverflow)
  2. Switch statement multiple cases in JavaScript (Stackoverflow)

Method One

This method takes advantage of the fact that if there is no break below a case statement it will continue to execute the next case statement regardless if the case meets the criteria. See the section title "What happens if I forgot a break?"

var foo = 1;
switch (foo) {
    case 0:
    case 1:
    case 2:
    case 3:
        alert('yes');
        break;
    default:
        alert('not');
}

Method Two

This is the "hacky" method; on "Line 2"  where you would usually find switch(foo) {, we instead put an invariant true, and place conditional logic (instead of constants) into the case statements:

var foo = 1;
switch (true) { // invariant TRUE instead of variable foo
    case foo >= 0 && foo <= 3:
        alert('yes');
        break;
    default:
        alert('not');
}

Document Tags and Contributors

Last updated by: OtherMichael,