Understanding the `switch` Statement in JavaScript

The switch statement is a control structure that allows you to execute one of many code blocks based on the value of an expression. It's a cleaner and more readable alternative to multiple if-else statements. Let's break it down in the simplest way possible.

The Syntax

The basic syntax of a switch statement is as follows:

switch (expression) {
  case value1:
    // code to execute if expression === value1
    break;
  case value2:
    // code to execute if expression === value2
    break;
  // ... more cases ...
  default:
    // code to execute if none of the cases match
}

An Example

Let's look at a simple example where we use a switch statement to determine the day of the week based on a number.

let day = 3;
let dayName;

switch (day) {
  case 1:
    dayName = "Monday";
    break;
  case 2:
    dayName = "Tuesday";
    break;
  case 3:
    dayName = "Wednesday";
    break;
  case 4:
    dayName = "Thursday";
    break;
  case 5:
    dayName = "Friday";
    break;
  case 6:
    dayName = "Saturday";
    break;
  case 7:
    dayName = "Sunday";
    break;
  default:
    dayName = "Invalid day";
}

console.log(dayName); // Output: Wednesday

Explanation:

• The switch statement evaluates the value of day.
• If day is 1, it sets dayName to "Monday".
• If day is 2, it sets dayName to "Tuesday".
• And so on...
• If day does not match any of the cases, it sets dayName to "Invalid day".

Grouping of case

You can group multiple case statements together if you want to execute the same code for different values.

Example:

let fruit = "apple";
let category;

switch (fruit) {
  case "apple":
  case "banana":
  case "orange":
    category = "fruit";
    break;
  case "carrot":
  case "broccoli":
    category = "vegetable";
    break;
  default:
    category = "unknown";
}

console.log(category); // Output: fruit

Explanation:

• If fruit is "apple", "banana", or "orange", it sets category to "fruit".
• If fruit is "carrot" or "broccoli", it sets category to "vegetable".
• If fruit does not match any of the cases, it sets category to "unknown".

Type Matters

The switch statement uses strict comparison (===) to match the expression with the case values. This means that both the value and the type must match.

Example:

let value = "1";

switch (value) {
  case 1:
    console.log("Number 1");
    break;
  case "1":
    console.log("String 1");
    break;
  default:
    console.log("Unknown");
}

// Output: String 1

Explanation:

• The switch statement matches value with the case values using strict comparison.
• Since value is a string "1", it matches the case "1" and prints "String 1".

Summary

• Syntax: The switch statement evaluates an expression and executes the corresponding case block.
• Example: A simple example demonstrates how to use the switch statement to determine the day of the week.
• Grouping of case: Multiple case statements can be grouped together to execute the same code.
• Type Matters: The switch statement uses strict comparison (===) to match the expression with the case values.

Conclusion

The switch statement is a powerful and readable way to handle multiple conditions in JavaScript. By understanding its syntax, how to group cases, and the importance of type matching, you'll be able to write more efficient and maintainable code. Keep practicing and exploring to deepen your understanding of the switch statement in JavaScript.

Stay tuned for more in-depth blogs on JavaScript! Happy coding!

Comments

[Jon Randy 🎖️]

It would be better to write expression1, expression2 etc. in the syntax explanation as writing value1 etc. implies that the cases cannot be expressions, which is not true.

[codenextgen]

You're absolutely right!
switch (expression) {
case expression1:
// code to execute if expression === expression1
break;
case expression2:
// code to execute if expression === expression2
break;
// ... more cases ...
default:
// code to execute if none of the cases match
}