JavaScript switch...case Statement

In JavaScript, the switch...case statement provides a more concise way to handle multiple conditions compared to using nested if...else statements. It is particularly useful when you have a single expression that needs to be compared against several possible values.

Understanding how to use the switch...case statement effectively can make your code cleaner and easier to read, especially when dealing with multiple conditional branches. In this tutorial, we'll explore how to use the switch...case statement, the importance of the break keyword, and how to handle default cases.

Core Content

What is a switch...case Statement?

The switch...case statement evaluates an expression and executes the code block associated with the first case whose value matches the expression. If no matching case is found, it executes the code in the default case, if one exists.

Here's the basic syntax:

1switch (expression) {
2case value1:
3  // Code to execute if expression === value1
4  break;
5case value2:
6  // Code to execute if expression === value2
7  break;
8default:
9  // Code to execute if no cases match
10}

How Does it Work?

• The expression is evaluated once.
• Each case label is compared with the result of the expression using strict equality (===).
• If a case matches, its associated code block is executed.
• The break keyword is used to terminate the switch statement and prevent fall-through to subsequent cases.
• If no cases match, the code inside the default block (if present) is executed.

Example 1: Basic Usage

Let's see how a simple switch...case statement works:

1let day = "Monday";
2 
3switch (day) {
4case "Monday":
5  console.log("It's the start of the week.");
6  break;
7case "Tuesday":
8  console.log("Just another day.");
9  break;
10case "Wednesday":
11  console.log("Halfway through the week.");
12  break;
13default:
14  console.log("It's not a weekday.");
15}

It's the start of the week.

Example 2: Multiple Cases

You can have multiple cases that execute the same code block:

1let fruit = "apple";
2 
3switch (fruit) {
4case "banana":
5case "orange":
6  console.log("It's a citrus fruit.");
7  break;
8case "apple":
9  console.log("It's an apple.");
10  break;
11default:
12  console.log("Unknown fruit.");
13}

It's an apple.

Example 3: Default Case

The default case is optional but recommended to handle unexpected values:

1let number = 5;
2 
3switch (number) {
4case 1:
5  console.log("One");
6  break;
7case 2:
8  console.log("Two");
9  break;
10default:
11  console.log("Other number");
12}

Other number

Example 4: Without Break

If you forget to include the break keyword, it can lead to fall-through behavior:

1let grade = "B";
2 
3switch (grade) {
4case "A":
5  console.log("Excellent!");
6case "B":
7  console.log("Well done.");
8case "C":
9  console.log("You passed.");
10default:
11  console.log("Try harder next time.");
12}

Well done.
You passed.
Try harder next time.

Practical Example

Let's create a practical example where we use a switch...case statement to categorize user input:

1let userInput = prompt("Enter a number between 1 and 3:");
2 
3switch (userInput) {
4case "1":
5  console.log("You entered one.");
6  break;
7case "2":
8  console.log("You entered two.");
9  break;
10case "3":
11  console.log("You entered three.");
12  break;
13default:
14  console.log("Invalid input. Please enter a number between 1 and 3.");
15}

Summary

• The switch...case statement is used for multiple conditional branches.
• Each case is compared with the expression using strict equality (===).
• Use the break keyword to terminate the switch statement and prevent fall-through.
• The default case handles any values that do not match the specified cases.

What's Next?

Now that you've learned about the switch...case statement, let's move on to loops in JavaScript. The next topic is the JavaScript for Loop. Understanding loops will help you automate repetitive tasks and make your code more efficient.

Happy coding!