`switch` Keyword

Examples

Using switch

In the following example, if expr evaluates to Bananas, the program matches the value with case 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 the case 'Cherries' would also be executed.

switch (expr) {
  case 'Oranges':
    console.log('Oranges are $0.59 a pound.');
    break;
  case 'Apples':
    console.log('Apples are $0.32 a pound.');
    break;
  case 'Bananas':
    console.log('Bananas are $0.48 a pound.');
    break;
  case 'Cherries':
    console.log('Cherries are $3.00 a pound.');
    break;
  case 'Mangoes':
  case 'Papayas':
    console.log('Mangoes and papayas are $2.79 a pound.');
    break;
  default:
    console.log(`Sorry, we are out of ${expr}.`);
}

console.log("Is there anything else you'd like?");

Putting the default clause between two case clauses

If no match is found, execution will start from the default clause, and execute all statements after that.

const foo = 5;
switch (foo) {
  case 2:
    console.log(2);
    break; // it encounters this break so will not continue into 'default:'
  default:
    console.log('default')
    // fall-through
  case 1:
    console.log('1');
}

It also works when you put default before all other case clauses.

Taking advantage of fall-through

This method takes advantage of the fact that if there is no break below a case clause, execution will continue to the next case clause regardless if that case meets the criteria.

The following is an example of a single operation sequential case statement, where four different values perform exactly the same.

const Animal = 'Giraffe';
switch (Animal) {
  case 'Cow':
  case 'Giraffe':
  case 'Dog':
  case 'Pig':
    console.log('This animal is not extinct.');
    break;
  case 'Dinosaur':
  default:
    console.log('This animal is extinct.');
}

The following is an example of a multiple-operation sequential case clause, where, depending on the provided integer, you can receive different output. This shows you that it will traverse in the order that you put the case clauses, and it does not have to be numerically sequential. In JavaScript, you can even mix in definitions of strings into these case statements as well.

const foo = 1;
let output = 'Output: ';
switch (foo) {
  case 0:
    output += 'So ';
  case 1:
    output += 'What ';
    output += 'Is ';
  case 2:
    output += 'Your ';
  case 3:
    output += 'Name';
  case 4:
    output += '?';
    console.log(output);
    break;
  case 5:
    output += '!';
    console.log(output);
    break;
  default:
    console.log('Please pick a number from 0 to 5!');
}

The output from this example:

Value	Log text
`foo` is `NaN` or not `1`, `2`, `3`, `4`, `5`, or `0`	Please pick a number from 0 to 5!
`0`	Output: So What Is Your Name?
`1`	Output: What Is Your Name?
`2`	Output: Your Name?
`3`	Output: Name?
`4`	Output: ?
`5`	Output: !

An alternative to if...else chains

You may often find yourself doing a series of if...else matches.

if ('fetch' in globalThis) {
  // Fetch a resource with fetch
} else if ('XMLHttpRequest' in globalThis) {
  // Fetch a resource with XMLHttpRequest
} else {
  // Fetch a resource with some custom AJAX logic
}

This pattern is not doing a sequence of === comparisons, but you can still convert it to a switch construct.

switch (true) {
  case 'fetch' in globalThis:
    // Fetch a resource with fetch
    break;
  case 'XMLHttpRequest' in globalThis:
    // Fetch a resource with XMLHttpRequest
    break;
  default:
    // Fetch a resource with some custom AJAX logic
    break;
}

The switch (true) pattern as an alternative to if...else is especially useful if you want to utilize the fall-through behavior.

switch (true) {
  case isSquare(shape):
    console.log('This shape is a square.');
    // Fall-through, since a square is a rectangle as well!
  case isRectangle(shape):
    console.log('This shape is a rectangle.');
  case isQuadrilateral(shape):
    console.log('This shape is a quadrilateral.');
    break;
  case isCircle(shape):
    console.log('This shape is a circle.');
    break;
}

switch Keyword