MAQ Learning

JavaScript Switch Statement

In this tutorial:

The switch statement in JavaScript
JavaScript switch statement with default clause
Use of break statement

The switch Statement in JavaScript

In JavaScript, switch statements are used to control complex conditional operations. Sometimes nested if...else statements become complex, whereas switch...case statement offers simple and cleaner syntax to implement same logic.

Syntax:

switch (expression) {
  case value1:
    statements
  case value2:
    statements
  // …
  case valueN:
    statements
  default:
    statements
}
  1. The switch statement is used when you have to select one choice from multiple choices on the basis of result of expression.
  2. The expression is evaluated.
  3. It looks for the first case clause whose value matches against expression value.
  4. The control passes to that case clause.
  5. The execution starts from the first statement after the matching case clause.
  6. The execution continues until either the break statement is encountered or execution reaches the end of the switch statement.
  7. If a break statement is encountered, subsequent case clause values will not be evaluated and control is transferred to the end of the switch statement.
  8. The switch statement can include any number of case clauses.
  9. If no case clause matches the expression, control transfers to the default statement and statements following that clause are executed. In case, there is no default clause, control is transferred to the end of the switch statement.
  10. The default clause is optional.
  11. Note: Internally, switch cases use strict comparison (===). The values must be of the same type to match.

Let’s try the following example.

let month = 3

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

In the above example,

  1. let month = 3; - This line declares a variable month and assigns it the value 3. This value represents the month number.
  2. The switch statement evaluates the value of the variable month. It checks the value against different cases using case statements.
  3. In this scenario, month is assigned the value 3. Therefore, when the switch statement is evaluated, it matches the case 3: statement.
  4. The code within the case 3: block is executed, which contains console.log("March");. This statement prints "March" to the console using console.log().
  5. The break; statement is used after each case block. It's important because it tells JavaScript to exit the switch statement after executing the code within the matched case. Without break;, JavaScript would continue to execute the code for subsequent cases even after finding a match.
  6. In this specific code snippet, if month had a value other than 1, 2, 3, 4, 5, or 6, nothing would be printed.

JavaScript switch Statement With Default Clause

A switch statement may also have a default clause. If the expression does not match to any case clause value, the default clause is executed.

let month = 7

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;
  default:
    console.log("Unknown Month");
 }

//output: Unknown Month
  1. let month = 7; - This line declares a variable month and assigns it the value 7. This value represents the month number.
  2. The switch statement evaluates the value of the variable month against different cases using case statements.
  3. In this scenario, month is assigned the value 7. When the switch statement is evaluated, it doesn’t match any of the defined case statements (1 through 6).
  4. Since none of the case statements match the value of month (which is 7 in this case), the code executes the default: case.
  5. The code within the default: block is executed, which contains console.log("Unknown Month");. This statement prints "Unknown Month" to the console using console.log().
  6. The default: case is used as a fallback for values that don't match any of the specified case statements. It provides a way to handle scenarios where the value of month doesn't match any explicitly defined cases.

In short, in the above example, since month has a value of 7, which does not match any of the defined cases (1 through 6), the default: case is executed, and it prints "Unknown Month" to the console.

Use of break Statement

Let’s try another example, and see how the program executes in the absence of a break statement in a case clause.

let month = 3

switch (month) {
  case 1:
    console.log("January");
    break;
  case 2:
     console.log("February");
    break;
  case 3:
    console.log("March");
  case 4:
    console.log("April");
  case 5:
   console.log("May");
  case 6:
   console.log("June");
  default:
   console.log(“Unknown Month”);
 }

//Output: 
March
April
May
June
Unknown Month

Here is the sequence of code flow.

  1. let month = 3;: This line declares a variable month and assigns it the value 3, representing the month of March.
  2. The switch statement is used to evaluate the value of the variable month against different cases.
  3. In this scenario:
    • When month is 3, it matches the case 3: statement, and the code block associated with case 3: is executed: console.log("March");.
    • Unlike the previous case statements (e.g., case 1:, case 2:) which include a break; statement after the console.log() statement, the case 3: block lacks a break; statement.
  4. The absence of a break; statement in the case 3: block causes what is known as "fall-through" behavior. After executing the code block for case 3: (printing "March"), the code continues to execute the subsequent cases (case 4:, case 5:, case 6:) without further checks for matching cases. This behavior is a consequence of no break; statement to exit the switch block.
  5. As a result of the fall-through behavior:
    • After printing "March," the code proceeds to execute the code blocks for case 4:, case 5:, and case 6: consecutively, printing "April," "May," and "June," respectively.
    • There is no break; statement in these subsequent cases, causing the code to continue executing until the end of the switch statement.
  6. In the above scenario where the break; statement is absent, default clause is also executed along with case clause(s). So you need to be very careful in program flow control otherwise you may experience unexpected results..

Therefore, when month is 3 in this code snippet, the output will be:

//Output: 
March
April
May
June
Unknown Month

The break; statement is crucial within each case block to prevent fall-through behavior. Without it, JavaScript will continue to execute code for subsequent cases after finding a match until it reaches a break; statement or the end of the switch block.

Summary

The switch statement evaluates an expression against multiple cases, executing the code block associated with the first matching case (along with its subsequent code) and exiting the switch statement unless break; is omitted, ensuring only the intended case's code is executed. If no cases match, the default block (if provided) is executed, or the switch statement finishes execution if there's no default case.