What is and how to use the conditional SWITCH in JavaScript

The switch conditional is a control structure in JavaScript that allows you to execute different blocks of code depending 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 usually worsens it.

Basic Syntax

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

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

• expression: It 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 be executed if none of the cases match the value of the expression.

The default block will be executed if none of the previous cases match the value of the expression. It is optional, but it is most common to have it.

Basic Example

Let’s take a 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 possibility of “falling” from one case to another, and executing multiple code statements. Unlike other languages (such as C++), “fall-through” in JavaScript is intentionally limited.

In order to “fall” from one case to another, it is mandatory that the case from which we are going to fall 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 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 according to 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 according to the operator

This code shows how to use a switch to determine the mathematical operation according to 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 according to 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;
}