JavaScript

Switch Case in JavaScript

There are two main conditional statements in the JavaScript programming language, one known as the Switch-Case statements. The switch case statements are pretty easy to understand, as their work is pretty straightforward.

The switch checks for an expression and then compares the value of that expression with the cases defined underneath. If the value of expressions matches the value defined in any case statements, then the respective block is executed. Otherwise, the body of the default clause is executed.

Structure of Switch Case Statements

To understand this better, take a look at the structure of the switch case statements:

switch (expression/Condition) {
  case a:
    // Code to be executed if value is a
    break;
  case b:
    // Code to be executed if value is b
    break;
  default:
  // Code to be executed if value doesn’t match any case
}

There are a few things that to consider from this structure, these are:

  • The condition or expressions is passed inside the argument of the switch statement.
  • There can be an infinite number of case statements for each switch case.
  • The case statements end with a colon “:”.
  • Each case must include a break statement at the end of the case.
  • After the case statements there must be a default clause which will be executed if no cases match the expression’s value.

It would be better to simply demonstrate the working of the case statement with the help of an example.

Example 1: Weekday Calculator Using Switch Case Statements

The goal of this example is going to take an integer value, and based on that integer value, we are going to display a day of the week with the following criteria:

1= Monday, 2 = Tuesday, 3 = Wednesday, and so on.

Start by creating the integer value and set it equal to 6 with the following line:

numericValue = 6;

After that, apply the switch on the numericValue like so:

switch (numericValue) {
// Case statements go inside here
}

Within the curly brackets of this switch, simply define seven different cases for seven different days of the week with the help of the following lines:

case 1:
    console.log("The day is Monday");
    break;
  case 2:
    console.log("The day is Tuesday");
    break;
  case 3:
    console.log("The day is Wednesday");
    break;
  case 4:
    console.log("The day is Thursday");
    break;
  case 5:
    console.log("The day is Friday");
    break;
  case 6:
    console.log("The day is Saturday");
    break;
  case 7:
    console.log("The day is Sunday");
    break;

At the end, add a default clause to manage invalid inputs with the following lines:

  default:
    console.log("Invalid Input");

The complete code snippet is as:

numericValue = 6;

switch (numericValue) {
  case 1:
    console.log("The day is Monday");
    break;
  case 2:
    console.log("The day is Tuesday");
    break;
  case 3:
    console.log("The day is Wednesday");
    break;
  case 4:
    console.log("The day is Thursday");
    break;
  case 5:
    console.log("The day is Friday");
    break;
  case 6:
    console.log("The day is Saturday");
    break;
  case 7:
    console.log("The day is Sunday");
    break;
  default:
    console.log("Invalid Input");
}

Upon executing the code snippet above, the following result is displayed onto the terminal:

It is clear from the output that the program is working perfectly fine and deciding the day of the week from the integer value correctly.

Example 2: Trying the Default Clause With a Non-Matching Expression

To demonstrate the working of the default clause, simply take the code snippet from example 1, and in that example, simply modify the value of numericValue to a string value like:

numericValue = "Google";

Now, this can be considered to be an invalid input to our program. Executing the code with this value would result in the following output:

From this output, it is easy to conclude that the default clause is executed when none of the cases match the expression.

Wrap up

The Switch Case statements implement conditional verification upon a specific expression. All of the possible values that the expression that the user wants to have an output for are placed in the case statements, and the block of code to be executed on that particular match is also placed inside that case statement. The remaining possible values that do not require an output or processing are placed in the default clause. The default clause is executed only when none of the values defined in the case statements match the value of the expressions. It is important to note that every case ends on a colon (:), and at the end of the body, it must contain a break statement.

About the author

Abdul Mannan

I am curious about technology and writing and exploring it is my passion. I am interested in learning new skills and improving my knowledge and I hold a bachelor's degree in computer science.