Deep Tech Point
first stop in your tech adventure
How to use the case clause in JavaScript?
October 29, 2021 | Javascript

This article will teach you all you need to know about the case clause in JavaScript. To begin with, the case clause is very closely connected to the switch statement and cannot stand alone. This is the main reason during this article we are going to discuss the cause clause in conjunction with the switch keyword. In general, the if-else statements are the simplified version of the conditional operations, however, when dealing with more complex conditional operations, the switch case statement comes into play, and the break keyword is also often a part of the story.

So, what is a switch case statement?

As we already mentioned in the introduction, the aim of the switch case statement is to control complex conditional operations and we often use the switch case statement to replace the if else statements chained together. Therefore, a switch statement can replace multiple if checks, and it also gives a more descriptive way to compare a value with multiple variants.
So, what does the switch case statement do? First, the switch case statement evaluates an expression and then tries to match the expression’s value to a case clause. Then the switch case statement executes statements associated with a specific case and also statements in cases that follow the case that matches.

Below you will find the syntax of the switch case statement, and in comments we added a comparison with a conditional if statement:

switch (expression) {
    case value1:  // if (expression === "value1")  
        statement1;
        break;
    case value2:  // if (expression === "value2")
        statement2;
        break;
    case value3:  // if (expression === "value3")
        statement3;
        break;
    default:
        defaultStatement;
}

Let’s explain the syntax of the switch case statement.

A simple example of the switch case statement

Below you will find a simple example of the switch case statement where we declared a variable named month whose values represent a month in a year. So, we have 12 cases, each case representing the value that stands for each month of the year. The code will show the name of the month that is based on the value of the month variable by using the switch statement, but if the expression from the switch case statement does not match any of the given values, the default value (monthName = “Invalid month”;)
will be executed.

var month = 5;
var monthName;
switch (month) {
    case 1:
        monthName = "January";
        break;
    case 2:
        monthName = "February";
        break;
    case 3:
        monthName = "March";
        break;
    case 4:
        monthName = "April";
        break;
    case 5:
        monthName = "May";
        break;
    case 6:
        monthName = "June";
        break;
    case 7:
        monthName = "July";
        break;
    case 8:
        monthName = "August";
        break;
    case 9:
        monthName = "September";
        break;
    case 10:
        monthName = "October";
        break;
    case 11:
        monthName = "November";
        break;
    case 12:
        monthName = "December";
        break;
    default:
        monthName = "Invalid month";
}
console.log(monthName); // the output will be May

Let’s take a look at another simple example of the switch case statement. We used the break statement here too. In the example below the switch starts to compare our x variable from the first case where the value is 5 and that match does not satisfy the strict equality. The second case is a match (4+2 is 6), so the execution will start from case 6 until the nearest break. If there aren’t any breaks, the execution continues with the next case without any checks.

var x = 4 + 2;

switch (x) {
  case 5:
    alert("Too small value!");
    break;
  case 6:
    alert("Correct!");
    break;
  case 7:
    alert("Too big value!");
    break;
  default:
    alert("I don't know!");
}

So, what happens if there aren’t any break statements in the code? First, the code looks like this:

var x = 4 + 2;

switch (x) {
  case 5:
    alert("Too small value!");
  case 6:
    alert("Correct!");
  case 7:
    alert("Too big value!");
  default:
    alert("I don't know!");
}

If there aren’t any breaks, the execution continues with the next case without any checks. And then, the example above gives us a subsequent execution of the three alerts (it will omit the first one, but list all the remaining although only one of them really match):

alert("Correct!");
alert("Too big value!");
alert("I don't know!");