What is and how to use the conditional SWITCH in JavaScript

The switch conditional is a control structure in JavaScript that allows executing different blocks of code based on the value of a variable or expression.

Sometimes it is used as a cleaner and more readable alternative to a series of nested if-else statements. However, many people (myself included) believe that instead of improving readability, it often worsens it.

Basic syntax

The basic syntax of a switch conditional in JavaScript is as follows:

switch (expression) {
    case value1:
        // Code to execute if expression is equal to value1
        break;
    case value2:
        // Code to execute if expression is equal to value2
        break;
    // ...
    default:
        // Code to execute if expression does not match any case
        break;
}

• expression: This is the expression whose value is evaluated in each case.
• case: Represents a specific value that is compared with the expression.
• default: Optionally, a default block can be included that will execute if none of the cases match the value of the expression.

The default block will execute if none of the previous cases match the value of the expression. It is optional, but it is common to include it.

Basic example

Let’s look at an example of how switch is used:

let number = 2;

switch (number) {
    case 1:
        console.log("One");
        break;
    case 2:
        console.log("Two");
        break;
    case 3:
        console.log("Three");
        break;
    default:
        console.log("Invalid number");
        break;
}

In this case, depending on the value of number:

• 1, 2, and 3 will print the corresponding number on the screen.
• Any other number will display “Invalid number.”

Fall-Through between cases

Fall-Through is the ability to “fall” from one case to another and execute multiple statements of code. Unlike other languages (like C++), “fall-through” in JavaScript is intentionally limited.

To be able to “fall” from one case to another, it is mandatory that the case from which we are falling does not have statements.

Let’s see an example:

let fruit = "apple";
let color;

switch (fruit) {
  case "apple":
  case "pear":
  case "kiwi":
    color = "green";
    break;
  case "banana":
  case "lemon":
    color = "yellow";
    break;
  case "strawberry":
  case "raspberry":
  case "cherry":
    color = "red";
    break;
  default:
    color = "unknown";
}

console.log("The fruit " + fruit + " is " + color);

In this example, switch is used to assign a color according to the given fruit. Several fruits are grouped under the same colors.

Practical examples

Determine the name of a number

In this example, we use the switch structure to determine the name of a number based on its value.

let number = 2;

switch (number) {
    case 1:
        console.log("One");
        break;
    case 2:
        console.log("Two");
        break;
    case 3:
        console.log("Three");
        break;
    default:
        console.log("Invalid number");
        break;
}

Determine the mathematical operation based on the operator

This code shows how to use a switch to determine the mathematical operation based on the provided operator.

let operator = '+';

switch (operator) {
    case '+':
        console.log("Addition");
        break;
    case '-':
        console.log("Subtraction");
        break;
    case '*':
        console.log("Multiplication");
        break;
    case '/':
        console.log("Division");
        break;
    default:
        console.log("Invalid operator");
        break;
}

Determine the name of a day of the week

This example shows how to determine the name of a day of the week using a switch structure.

let day = 3;

switch (day) {
    case 1:
        console.log("Monday");
        break;
    case 2:
        console.log("Tuesday");
        break;
    case 3:
        console.log("Wednesday");
        break;
    // Add cases for the remaining days...
    default:
        console.log("Invalid day");
        break;
}

Determine the name of a month

Here, a switch is used to determine the name of a month based on its value.

let month = 5;

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