Switch Case Statement

The switch statement is used to execute one of many blocks of code based on a specified condition. It is an alternative to the if...else statement when you need to test multiple conditions.

Before we dive into the syntax and examples, let's understand the basic structure of the switch statement:

• The switch keyword is followed by an expression enclosed in parentheses ( ).
• The expression is evaluated once, and the value is compared to the values of each case statement.
• If the value matches a case statement, the corresponding block of code is executed.
• If no case value matches the expression, the default block is executed.
• The break statement is used to exit the switch statement after a case block is executed.

Here is the basic syntax of the switch statement:

switch (expression) {
  case value1:
    // Code block to execute if expression matches value1
    break;
  case value2:
    // Code block to execute if expression matches value2
    break;
  case value3:
    // Code block to execute if expression matches value3
    break;
  default:
    // Code block to execute if expression doesn't match any case
}

Example

Here is an example of using the switch statement to check the day of the week based on a number:

day-of-week.js

let day = 3;
let dayName;
switch (day) {
  case 1:
    dayName = "Sunday";
    break;
  case 2:
    dayName = "Monday";
    break;
  case 3:
    dayName = "Tuesday";
    break;
  case 4:
    dayName = "Wednesday";
    break;
  case 5:
    dayName = "Thursday";
    break;
  case 6:
    dayName = "Friday";
    break;
  case 7:
    dayName = "Saturday";
    break;
  default:
    dayName = "Invalid day";
}
console.log(`Today is ${dayName}`); // Output: Today is Tuesday

In the example above, the switch statement checks the value of the day variable. If the value matches a case statement, the corresponding dayName is assigned. If the value doesn't match any case, the default block is executed, and the dayName is set to "Invalid day".

Multiple Cases

You can have multiple case statements that share the same code block. This is useful when you want to execute the same code for different values. Here is an example:

multiple-cases.js

let grade = "B";
let message;
switch (grade) {
  case "A":
  case "B":
  case "C":
    message = "Pass";
    break;
  case "D":
  case "F":
    message = "Fail";
    break;
  default:
    message = "Invalid grade";
}
console.log(message); // Output: Pass

In the example above, the switch statement checks the value of the grade variable. If the value matches "A", "B", or "C", the message is set to "Pass". If the value matches "D" or "F", the message is set to "Fail". If the value doesn't match any case, the default block is executed, and the message is set to "Invalid grade".

Fall-Through

In JavaScript, when a case block is executed, the control flow continues to the next case block unless a break statement is used. This behavior is known as "fall-through". Here is an example:

fall-through.js

let num = 2;
let message;
switch (num) {
  case 1:
    message = "One";
    break;
  case 2:
    message = "Two";
    // No break statement
  case 3:
    message += " Three";
    break;
  default:
    message = "Invalid number";
}
console.log(message); // Output: Two Three

In the example above, the switch statement checks the value of the num variable. When num is 2, the message is set to "Two". Since there is no break statement, the control flow continues to the next case block, and the message is appended with "Three". Finally, the break statement exits the switch statement.

You can use the If statement to check multiple conditions. However, the switch statement provides a more concise way to handle multiple conditions. It is especially useful when you have a large number of conditions to check.

For example, we can rewrite the day of the week example using an if...else statement:

day-of-week-if-else.js

let day = 3;
let dayName;
if (day === 1)
  dayName = "Sunday";
else if (day === 2)
  dayName = "Monday";
else if (day === 3)
  dayName = "Tuesday";
else if (day === 4)
  dayName = "Wednesday";
else if (day === 5)
  dayName = "Thursday";
else if (day === 6)
  dayName = "Friday";
else if (day === 7)
  dayName = "Saturday";
else
  dayName = "Invalid day";
console.log(`Today is ${dayName}`); // Output: Today is Tuesday

As you can see, the switch statement provides a more readable and concise way to handle multiple conditions compared to the if...else statement.

warning

Note: It is recommended to use the break statement to avoid fall-through unless it is intentional.

Congratulations! 🎉 You now know how to use the switch statement in JavaScript to execute different blocks of code based on a specified condition🚀

In the next section, we will learn about for loops in JavaScript. Let's keep going! 🚀

Made with ❤️ by Fasakin Henry