JS Switch

JS Tutorial

JS Version

JS Objects

JS Function

JS Classes

JS Async

JS HTML DOM

JS Browser BOM

JS Web API

JS AJAX

JS JSON

JS vs JQUERY

JS Graphics

JavaScript Switch Statement

The switch statement is used to select one of many code blocks that are to be executed.

Syntax

switch(expression) {

  case x:

    // code block

    break;

  case y:

    // code block

    break;

  default:

    // code block

}

This is how it works:

  • Only once the switch expression is evaluated.
  • The values of the expression in each case are compared.
  • If it is matched, the associated block of code is executed.
  • If nothing is matched, the default code block is executed.

Example

The getDay() method returns the weekday as a number between 0 and 6

(Sunday=0, Monday=1, Tuesday=2 ..)

This example uses the weekday number to calculate the weekday name:

<!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>

Output

JavaScript switch

Today is friday

The break Keyword

When JavaScript reaches a break keyword, it leaves out of the switch block.

The execution inside the switch block is stopped.

It is not compulsory to break the last case in a switch block. The block breaks (ends) there anyway.

The default Keyword

The default keyword defines the code to run if there is no case match:

Example

The getDay() method is used to return the weekday as a number between 0 and 6.

If today is neither Saturday (6) nor Sunday (0), write a default message:

<!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>

Output

JavaScript switch

Looking forward to the Weekend

Common Code Blocks

There may be times when different switch cases use the same code.

In this example case 4 and 5 share the same code block, and 0 and 6 share another code block:

Example

<!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>

Output

JavaScript switch

Soon it is Weekend

Switching Details

If multiple cases match a case value, the first case is selected.

If no matching cases are found, the program continues to the default label.

If no default label is found, the program continues to the statement(s) after the switch.

Strict Comparison

Switch cases use strict comparison (===).

The values used should be of the same type to match.

If the operands are of the same type, only then the strict comparison is true.

In this example there will be no match for x:

Example

<!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>

Output

JavaScript switch

No value found