JavaScript Switch Statement

❮ Previous Next ❯

switch statement helps to do different things depending on different situations.

The JavaScript Switch Statement

Sure, here is the simplified version: Use the switch command to choose one of various code blocks for execution.

Syntax

switch(expression) {
  case x:
    // code block
    break;
  case y:
    // code block
    break;
  default:
   // code block
}

This is how it works:

The switch expression is evaluated once.
The value of the expression is compared with the values of each case.
If there is a match, the associated block of code is executed.
If there is no match, the default code block is executed.

The break Keyword

When JavaScript encounters a 'break' keyword within a switch block, it exits the block.

This will halt the process within the switch block.

Breaking the final case in a switch block is not mandatory. The block naturally concludes at that point.

Note: If you omit the break statement, the next case will be executed even if the evaluation does not match the case.

The default Keyword

The default keyword indicates the code to execute when no matching case is found.

The default case in a switch block doesn't necessarily need to be the last one.

If the word default is not the final option in the switch block, ensure to conclude the default choice with a break statement.

Common Code Blocks

At times, you may need various switch cases to utilize identical code.

In this instance, code blocks 4 and 5 have identical content, while code blocks 0 and 6 share a different set of code.

Switching Details

If several situations match a particular case value, the first case encountered is chosen.

If the program doesn't find any matching cases, it moves on to the default label.

If the program doesn't find a default label, it proceeds to the statement(s) following the switch.

Strict Comparison

Switch cases employ strict comparison (===).

The values must be of the same type to match.

A direct comparison is only accurate when the items being compared are of identical types.

In this example there will be no match for x:

<!DOCTYPE html>
<html>
  <body>
    <h2>JavaScript switch</h2>
    <p id="demo"></p>
    <script>
      let day;
      switch (new Date().getDay()) {
        case 0:
          day = "Sunday";
          break;
        case 1:
          day = "Monday";
          break;
        case 2:
          day = "Tuesday";
          break;
        case 3:
          day = "Wednesday";
          break;
        case 4:
          day = "Thursday";
          break;
        case 5:
          day = "Friday";
          break;
        case 6:
          day = "Saturday";
      }
      document.getElementById("demo").innerHTML = "Today is " + day;
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h2>JavaScript switch</h2>
    <p id="demo"></p>
    <script>
      let text;
      switch (new Date().getDay()) {
        case 6:
          text = "Today is Saturday";
          break;
        case 0:
          text = "Today is Sunday";
          break;
        default:
          text = "Looking forward to the Weekend";
      }
      document.getElementById("demo").innerHTML = text;
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h2>JavaScript switch</h2>
    <p id="demo"></p>
    <script>
      let text;
      switch (new Date().getDay()) {
        default:
          text = "Looking forward to the Weekend";
          break;
        case 6:
          text = "Today is Saturday";
          break;
        case 0:
          text = "Today is Sunday";
      }
      document.getElementById("demo").innerHTML = text;
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h2>JavaScript switch</h2>
    <p id="demo"></p>
    <script>
      let text;
      switch (new Date().getDay()) {
        case 4:
        case 5:
          text = "Soon it is Weekend";
          break;
        case 0:
        case 6:
          text = "It is Weekend";
          break;
        default:
          text = "Looking forward to the Weekend";
      }
      document.getElementById("demo").innerHTML = text;
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h2>JavaScript switch</h2>
    <p id="demo"></p>
    <script>
      let x = "0";
      switch (x) {
        case 0:
          text = "Off";
          break;
        case 1:
          text = "On";
          break;
        default:
          text = "No value found";
      }
      document.getElementById("demo").innerHTML = text;
    </script>
  </body>
</html>

❮ Previous Next ❯

JavaScript Tutorial

JS Math

JS Versions

JS Objects

JS Functions

JS Classes

JS Async

JS HTML DOM

JS Browser BOM

JS Web APIs

JS AJAX

JS JSON

JS vs jQuery

JS Graphics