Lesson guide

Learning objectives

  • Explain the main purpose of The "switch" statement in JavaScript.
  • Identify the syntax, APIs, or concepts introduced in this lesson.
  • Use the examples to predict how JavaScript will behave before you run similar code.
  • Connect this topic to nearby lessons in JavaScript Fundamentals.

Real-world context

This lesson matters when you need to recognize where The "switch" statement fits into real JavaScript programs. A statement can replace multiple checks.

Key ideas

  • The "switch" statement is part of the JavaScript Fundamentals chapter, so it builds on the surrounding concepts rather than standing alone.
  • Read each code example in two passes: first for the result, then for the rule that explains the result.
  • When a section compares similar features, focus on the condition that makes you choose one feature over another.

Key terms

  • The "switch" statement
  • switch
  • statement
  • JavaScript Fundamentals
  • JavaScript

A switch statement can replace multiple if checks.

It gives a more descriptive way to compare a value with multiple variants.

The syntax

The switch has one or more case blocks and an optional default.

It looks like this:

javascript
switch(x) {
  case 'value1':  // if (x === 'value1')
    ...
    [break]

  case 'value2':  // if (x === 'value2')
    ...
    [break]

  default:
    ...
    [break]
}
  • The value of x is checked for a strict equality to the value from the first case (that is, value1) then to the second (value2) and so on.
  • If the equality is found, switch starts to execute the code starting from the corresponding case, until the nearest break (or until the end of switch).
  • If no case is matched then the default code is executed (if it exists).

An example

An example of switch (the executed code is highlighted):

javascript
let a = 2 + 2;

switch (a) {
  case 3:
    alert( 'Too small' );
    break;
  case 4:
    alert( 'Exactly!' );
    break;
  case 5:
    alert( 'Too big' );
    break;
  default:
    alert( "I don't know such values" );
}

Here the switch starts to compare a from the first case variant that is 3. The match fails.

Then 4. That’s a match, so the execution starts from case 4 until the nearest break.

If there is no break then the execution continues with the next case without any checks.

An example without break:

javascript
let a = 2 + 2;

switch (a) {
  case 3:
    alert( 'Too small' );
  case 4:
    alert( 'Exactly!' );
  case 5:
    alert( 'Too big' );
  default:
    alert( "I don't know such values" );
}

In the example above we’ll see sequential execution of three alerts:

javascript
alert( 'Exactly!' );
alert( 'Too big' );
alert( "I don't know such values" );

Any expression can be a switch/case argument

Both switch and case allow arbitrary expressions.

For example:

javascript
let a = "1";
let b = 0;

switch (+a) {
  case b + 1:
    alert("this runs, because +a is 1, exactly equals b+1");
    break;

  default:
    alert("this doesn't run");
}

Here +a gives 1, that’s compared with b + 1 in case, and the corresponding code is executed.

Grouping of “case”

Several variants of case which share the same code can be grouped.

For example, if we want the same code to run for case 3 and case 5:

javascript
let a = 3;

switch (a) {
  case 4:
    alert('Right!');
    break;

  case 3: // (*) grouped two cases
  case 5:
    alert('Wrong!');
    alert("Why don't you take a math class?");
    break;

  default:
    alert('The result is strange. Really.');
}

Now both 3 and 5 show the same message.

The ability to “group” cases is a side effect of how switch/case works without break. Here the execution of case 3 starts from the line (*) and goes through case 5, because there’s no break.

Type matters

Let’s emphasize that the equality check is always strict. The values must be of the same type to match.

For example, let’s consider the code:

javascript
let arg = prompt("Enter a value?");
switch (arg) {
  case '0':
  case '1':
    alert( 'One or zero' );
    break;

  case '2':
    alert( 'Two' );
    break;

  case 3:
    alert( 'Never executes!' );
    break;
  default:
    alert( 'An unknown value' );
}
  1. For 0, 1, the first alert runs.
  2. For 2 the second alert runs.
  3. But for 3, the result of the prompt is a string "3", which is not strictly equal === to the number 3. So we’ve got a dead code in case 3! The default variant will execute.

Common mistakes

  • Skipping the small examples and then missing the exact rule that The "switch" statement depends on.
  • Copying code without changing one value at a time to see which part controls the result.
  • Treating similar-looking syntax or APIs as interchangeable before checking their edge cases.

Summary

  • The "switch" statement gives you one more piece of the JavaScript mental model.
  • The examples in this lesson are the quickest way to check whether the rule is clear.
  • Revisit the key terms when you meet the same idea in later chapters.

Predict

Before running this check, predict the three labels. Remember that switch uses strict equality and that grouped cases share the same code until a break.

javascript
Reveal explanation

The output is string zero or one, then number one, then computed four. The first call matches the grouped string cases because "1" is strictly equal to the string case "1". The second call does not match those string cases because 1 is a number, so it reaches case 1. The third call matches case 2 + 2 because case expressions are evaluated before strict comparison.

Try it

Add console.log(describeInput("4")); and predict why it falls to unknown. Then add a case "4": above case 2 + 2: to see how strict type matching changes the branch.

Practice

  • Rewrite one example from this lesson without looking at the original, then run it and compare the result.
  • Change one input, operator, method call, or option in a code sample and predict what will happen before running it.
  • Explain The "switch" statement in your own words as if you were reviewing it with another learner.

Keep learning

Continue with Functions when you are ready for the next lesson.