How to use the case clause in 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.

• The switch statement always has at least one or more case blocks and eventually an optional default.
• Each case in that switch statement carries out the corresponding statement, in our example statement1, statement2, statement.
• First, the switch statement evaluates if the expression equals the value, in our example value1, then the value2, and then the value3. In other words, the switch case statement checks whether the value of an expression is equal to the value1 from the first case and then value2 from the second one, and then the value3 from the third case. When we say equal, we talk about strict equality, therefore we use the triple equal sign above in the comments. If the switch statement finds the equality, the switch starts to execute the code starting from the case that matches, until the nearest break, if there is one, or until the end of the switch statement.
• You can also notice the break keyword, and we’ve mentioned it in the sentence above. As always, the break keyword will cause the execution of the switch statement to jump out, but if you leave out the break keyword, the code will carry out through the original case into the next one.
• And at the end, if the expression from the switch case statement does not match any of the given values, the defaultStatement, if it exists, is executed.

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!");