switch case in JavaScript

The switch is a statement used to perform actions based on conditions. Its functionality matches that of the if-else statement. You might be guessing why there are two keywords with the same functionality. There are some such cases where we prefer using a switch statement instead of if-else. The cleaner syntax of the switch statement makes it preferable over using long conditional expressions. Now let us study about switch case in JavaScript.

Description

The first and foremost action the switch statement does is to evaluate the expression. Firstly, it evaluates the first case in the list of cases written in the code to the result of the expression given as an input. The associated code of the case that gets matched continues to execute. It continues to evaluate all the cases until the case gets matched with the result of the expression given as an input. Even if multiple cases get matched with that the result of the expression given as an input, the associated code of the first case gets executed and the rest would get neglected in all the cases if the break statement precedes the next case. The switch statement continues to execute the default case if provided when no case gets matched with the result of the expression given as an input. There would be some cases where the default case is not found. At such times, the switch continues to execute the code written in the place below the switch statement.

The break statement after each case ensures that the program gets broken out once the case gets matched with the result of the expression given as an input. There might be cases where we omit the break statement after a case. At that time the switch statement continues to evaluate the case written below. The switch statement always checks for strict equality (===) to the result of the expression given as an input and the case. Only after equality does it continues to execute the associated code with the case.

Syntax

It has cleaner syntax than that of statements with if-else. Given below is a basic syntax using switch statements.

switch (expression) {

  case 1:

   //this code will execute if case 1 matches the result of the input expression

    break;

  case 2:

   //this code will execute if case 2 matches the result of the input expression and all the above cases doesn’t match

        break;

  case 3:

   //this code will execute if case 3 matches the result of the input expression and all the above cases doesn’t match
        break;
.

.

.

.




case n:

   //this code will execute if case n matches the result of the input expression and all the above cases don’t match

 break;

  default:

    //this code will execute if none of the above cases doesn’t match the result of the input expression

    break;

}

The switch statement checks all cases for strict equality (==) between the cases and the result of the input expression and executes the code associated with the case that gets matched.

Examples

a. Using basic syntax of switch

const month = 'may';

switch (thing) {

  case 'january':

    console.log('January has 31 days.');

    break;

  case 'june':

    console.log('May has 30 days.');

    break;

  case 'june':

    console.log('June has 31 days.');

    break;

    default:

    console.log(`Sorry, we didn't find ${month} in the list.`);

}

When you run the above code snippet, you will get the following output:

> “May has 30 days”

b. Using single operation for multicase

const Fruit = 'papaya';

switch (Fruit) {

  case 'apple':

  case 'banana':

  case 'guava':

  case 'Papaya':

    console.log('This is a fruit.');

    break;

  case 'brinjal':

  case 'potato':

  default:

    console.log('This is not a fruit.');

}

When you run the above-written code, you will get the output as shown below:

> “This is a fruit.”

Like an example shown above, we can use the switch statement for multiple cases making our work easier.

c. Using switch to find the type

let a = 5;

switch (a) {

    case 1:

        a = 5;

         break;

    case 5:

        a = 'five';

        break;

    case 3:

        a = 'V';

        break;

  case “four”:

        a = 'FIVE';

        break;

    default:

        a = 'not found';

        break;

}

console.log(`The value is ${a}`);

When you run the above-written code, you will get the output as shown below:

> The value is five

Summary of how switch statements work

Firstly there should be an expression given to switch as an input
It evaluates the input and starts matching with the cases written in the code
After some of the cases get matched, it starts executing the code associated with the code.
When none of the cases gets matched with the result of input, it starts executing the code associated with the default case.
When the default case is not present, it starts executing the code written below.
When a break statement is present in all the cases, only the case that gets matched with the result of the expression first gets executed.

When to use switch statement?

As we have already discussed, the switch statement and if-else statement have similar functionality. At times there would be cases where the use of switch statements is preferable and at times the use of if-else statements is preferable. There might be some cases where we don’t evaluate a fixed value. Instead, we look forward to using the greater than and smaller than functions. At that time, the use of switch statements are not much preferable in those cases as we have to use the true expression. The use of if-else statements in those cases gives more readability.

const weight = 100;

if(weight > 80){

  console.log("Weight is greater than 80");

} else {

  console.log("Weight is less than 80");

}

At times there might be cases wherein you have to evaluate multiple cases to match with the result of the expression given as input. At that time, the use of switch statements is preferable as it gives more readability and also reduces the amount of code that has to be written. Also when working on complex codes, switch statements gives more readability.

var month = 3;

var monthName;

switch (month) {

    case 1:

        dayName = 'January';

        break;

    case 2:

        dayName = 'February';

        break;

    case 3:

        dayName = 'March';

        break;

    case 4:

        dayName = 'April';

        break;

    case 5:

        dayName = 'May';

        break;

    case 6:

        dayName = 'June';

        break;

    case 7:

        dayName = 'July';

        break;

    case 8:

        dayName = 'August';

        break;

    case 9:

        dayName = 'September';

        break;

    case 10:

        dayName = 'October';

        break;

    case 11:

        dayName = 'November';

        Break;

    case 12:

        dayName = 'December';

        break;

     default:

        monthName = 'Invalid month';

}

console.log(monthName);

When you run the above-written code, you will get the output as shown below: