← Back to JavaScript Course | Chapter 4: Modern JS, Async & DOM | Lesson 4 of 26

JS Switch

Think of a vending machine, you press a specific button, and the machine checks it against each labeled slot until it finds a match, then dispenses that exact item, ignoring all the other buttons. A switch statement in JavaScript works similarly, it compares one value against several possible cases, running the code for whichever case matches, which can be cleaner than a long chain of else if statements when checking a single value against many options. You'll see switch used for things like handling different menu selections or theme choices across sites like cookiescursor.com.

In this page:

  1. Basic switch Syntax
  2. case and break
  3. default
  4. Grouping Cases Together
  5. switch vs if-else
Syntax
javascript 
switch (expression) {
  case value1:
    // code
    break;
  default:
    // code
}

Basic switch Syntax

A switch statement takes a value in parentheses and compares it against each case label in order, running the code inside the first matching case block.

Note: switch is often more readable than a long else if chain when you're comparing the exact same variable against many possible values.
Warning: switch uses strict comparison internally, so the type of the value being compared must match the case label exactly, 1 and 1 are not considered equal.

उदाहरण: Basic switch Syntax

javascript 
// Declare the constant `day`, set to "Mon"
// Declare the constant `day`, set to "Mon"
const day = "Mon";
// Switch on `day` and branch by matching case
// Switch on `day` and branch by matching case
switch (day) {
  // Case: `"Mon"`
  // Case: `"Mon"`
  case "Mon":
    // Print "Start of week" to the console
    // Print "Start of week" to the console
    console.log("Start of week");
}

case and break

Each case label marks the start of a block to run for a specific matching value, and break exits the switch statement immediately once its block finishes, preventing execution from continuing into the next case.

Note: As a habit, always add a break at the end of every case unless you specifically intend to fall through into the next one.
Warning: Missing a break causes fall-through, execution continues running the code in the next case as well, even though its condition wasn't matched.

उदाहरण: case and break

javascript 
// Declare the constant `day`, set to "Mon"
// Declare the constant `day`, set to "Mon"
const day = "Mon";
// Switch on `day` and branch by matching case
// Switch on `day` and branch by matching case
switch (day) {
  // Case: `"Mon"`
  // Case: `"Mon"`
  case "Mon":
    // Print "Monday" to the console
    // Print "Monday" to the console
    console.log("Monday");
    break;
  // Case: `"Tue"`
  // Case: `"Tue"`
  case "Tue":
    // Print "Tuesday" to the console
    // Print "Tuesday" to the console
    console.log("Tuesday");
    break;
}

default

The default case runs when none of the listed case labels match the switch value, functioning similarly to a final else in an if/else if chain, and is commonly placed last, though it can technically appear anywhere.

Note: Always include a default case, even if it just logs an unexpected value, it makes debugging unmatched cases much easier.
Warning: Without a default case, a switch statement with no matching case simply does nothing, which can silently hide bugs.

उदाहरण: default

javascript 
// Declare the constant `day`, set to "Sun"
// Declare the constant `day`, set to "Sun"
const day = "Sun";
// Switch on `day` and branch by matching case
// Switch on `day` and branch by matching case
switch (day) {
  // Case: `"Mon"`
  // Case: `"Mon"`
  case "Mon":
    // Print "Weekday" to the console
    // Print "Weekday" to the console
    console.log("Weekday");
    break;
  // Default case, if nothing above matched
  // Default case, if nothing above matched
  default:
    // Print "Not Monday" to the console
    // Print "Not Monday" to the console
    console.log("Not Monday");
}

Grouping Cases Together

Multiple case labels can share the same block of code by stacking them without a break in between, letting several different values all trigger the same response.

Note: Grouped cases are especially handy for handling multiple equivalent inputs, like both Sat and Sun meaning weekend.
Warning: Only the very last case in a grouped stack should have the break, adding one earlier would prevent the group from working together.

उदाहरण: Grouping Cases Together

javascript 
// Declare the constant `day`, set to "Sat"
// Declare the constant `day`, set to "Sat"
const day = "Sat";
// Switch on `day` and branch by matching case
// Switch on `day` and branch by matching case
switch (day) {
  // Case: `"Sat"`
  // Case: `"Sat"`
  case "Sat":
  // Case: `"Sun"`
  // Case: `"Sun"`
  case "Sun":
    // Print "Weekend" to the console
    // Print "Weekend" to the console
    console.log("Weekend");
    break;
  // Default case, if nothing above matched
  // Default case, if nothing above matched
  default:
    // Print "Weekday" to the console
    // Print "Weekday" to the console
    console.log("Weekday");
}

switch vs if-else

switch tends to be clearer when comparing one single value against many specific possibilities, while if-else chains are more flexible for complex conditions involving ranges, multiple variables, or logical combinations.

Note: If your conditions involve ranges, like score >= 60, stick with if-else, switch is built for exact value matching, not ranges.
Warning: Trying to force range-based logic into a switch statement, using tricks like switch (true), can make code confusing rather than clearer.

उदाहरण: switch vs if-else

javascript 
const num = 5;
// switch is clean for one value vs many options:
switch (num) {
  case 5:
    console.log("Five");
    break;
}
// if-else is better for ranges:
if (num > 0 && num < 10) {
  console.log("Single digit");
}
Live Example
Related Topics

JS Conditionals · JS Loop For · JS Math · JS Loop While

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
🔒

Chapter Quiz — Complete all 26 topics to unlock

0/26 topics done

Complete these topics first:

← Previous Lesson JS Conditionals Next Lesson → JS Loop For

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.