Skip to main content

JavaScript Switch Statement

The JavaScript switch statement is a control flow statement that is used to execute a block of code based on a matching case.

It is often used as an alternative to a series of if-else statements when there are multiple cases to consider.

Syntax:

switch (expression) {
case value1:
// code to be executed when expression matches value1
break;
case value2:
// code to be executed when expression matches value2
break;
...
default:
// code to be executed when none of the cases match expression
}

Explanation:

  • This is the basic syntax of a switch statement.
  • The expression is evaluated once and compared with the values of each case.
  • If there is a match, the code block associated with that case is executed.
  • The break keyword is used to exit the switch statement after a match is found.
  • If there is no match, the code block associated with the default keyword is executed.

The break Keyword

The break statement is used to exit the switch statement after a matching case has been found.

This prevents the execution of the code blocks for any subsequent cases.

As an example:

let color = "blue";

switch (color) {
case "red":
console.log("The color is red");
break;
case "blue":
console.log("The color is blue");
break;
case "green":
console.log("The color is green");
break;
default:
console.log("Unknown color");
}

In this example:

  • When the color variable is equal to "blue", the code block for the "blue" case is executed, and the break statement exits the switch statement.
  • This prevents the execution of the code blocks for the "green" and default cases.

The default Keyword

The default keyword is used in a switch statement to specify the code that should be executed if none of the cases match the value of the expression being evaluated.

As an example:

let day = "Saturday";

switch (day) {
case "Monday":
console.log("Today is Monday");
break;
case "Tuesday":
console.log("Today is Tuesday");
break;
case "Wednesday":
console.log("Today is Wednesday");
break;
default:
console.log("Today is neither Monday, Tuesday, nor Wednesday");
}

In this example:

  • If the value of the day variable is not "Monday", "Tuesday", or "Wednesday", then the code block associated with the default keyword will be executed, and the output will be "Today is neither Monday, Tuesday, nor Wednesday".

Difference between == and === in javascript

When using a switch statement, it's common to use strict comparison (using the === operator) to compare the value of the switch expression with the cases in the switch statement.

This is because strict comparison checks both the value and the data type of the two operands being compared. In contrast, loose comparison (using the == operator) only checks the value of the operands, and can sometimes lead to unexpected results.

Here's an example of using strict comparison in a switch statement:

let value = 2;

switch (value) {
case 1:
console.log("The value is 1");
break;
case 2:
console.log("The value is 2");
break;
case 3:
console.log("The value is 3");
break;
default:
console.log("The value is not 1, 2, or 3");
}

In this example:

  • The switch statement is comparing the value of the value variable with the cases using strict comparison.
  • When the value of value is equal to 2, the code block for the case 2: is executed and the output will be "The value is 2".

Switch Basic Example

Here's a basic example of a switch statement in JavaScript:

let day = "Monday";

switch (day) {
case "Monday":
console.log("Today is Monday");
break;
case "Tuesday":
console.log("Today is Tuesday");
break;
case "Wednesday":
console.log("Today is Wednesday");
break;
default:
console.log("Today is neither Monday, Tuesday, nor Wednesday");
}

In this example:

  • The switch statement is checking the value of the day variable and executing different code blocks depending on the value.
  • If the value of day is "Monday", the code block associated with the case "Monday": will be executed and the output will be "Today is Monday".
  • If the value of day is "Tuesday", the code block associated with the case "Tuesday": will be executed and the output will be "Today is Tuesday".
  • If the value of day is "Wednesday", the code block associated with the case "Wednesday": will be executed and the output will be "Today is Wednesday".