javascript
  1. javascript-switch
PreviousNext

JavaScript Switch

Syntax

The syntax for a switch statement in JavaScript is as follows:

switch (expression) {
  case value1:
    // Code to be executed if expression matches value1
    break;
  case value2:
    // Code to be executed if expression matches value2
    break;
  ...
  default:
    // Code to be executed if expression doesn't match any of the values
}

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fruit Selection Example</title>
</head>
<body>

<!-- Placeholder for displaying the output -->
<p id="output"></p>

<script>
    // Assign a value to the constant 'fruit'
    const fruit = 'apple';

    // Use a switch statement to determine the output based on the value of 'fruit'
    switch (fruit) {
        case 'banana':
            document.getElementById("output").innerHTML = 'I want a banana';
            break;
        case 'orange':
            document.getElementById("output").innerHTML = 'I want an orange';
            break;
        case 'apple':
            document.getElementById("output").innerHTML = 'I want an apple';
            break;
        default:
            document.getElementById("output").innerHTML = 'I don\'t want any fruit';
    }
</script>

</body>
</html>

Output

I want an apple


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fruit Selection Example</title>
</head>
<body>

<!-- Placeholder for displaying the output -->
<p id="output"></p>

<script>
    // Assign a value to the constant 'fruit'
    const fruit = 'apple';

    // Use a switch statement to determine the output based on the value of 'fruit'
    switch (fruit) {
        case 'banana':
            document.getElementById("output").innerHTML = 'I want a banana';
            break;
        case 'orange':
            document.getElementById("output").innerHTML = 'I want an orange';
            break;
        case 'apple':
            document.getElementById("output").innerHTML = 'I want an apple';
            break;
        default:
            document.getElementById("output").innerHTML = 'I don\'t want any fruit';
    }
</script>

</body>
</html>
Try Playground

Exaplanation

The switch statement evaluates an expression and executes code based on a matching value. In the example above, the fruit variable has a value of 'apple'. The switch statement checks each case value until it finds a matching value and then executes the corresponding code. In this case, the 'apple' case matches and the console.log('I want an apple') code is executed.

If the expression doesn't match any of the case values, the default code is executed.

Use

Switch statements are often used in place of multiple if statements to provide a more concise and readable code block. They are commonly used for simple value comparison, such as checking for the month of the year or a day of the week.

Important Points

  • The case values must be unique.
  • The break statement is used to exit the switch block after the relevant code is executed.
  • A default statement is optional, but usually recommended to account for unexpected values.

Summary

Switch statements in JavaScript provide a way to evaluate an expression and execute code based on a matching value. They are useful for simplifying code blocks and improving readability while avoiding lengthy chains of if statements.

If StatementLoop
Published on: