Switch statement in Javascript

Introduction

A switch statement helps you choose between many options easily. It makes your code cleaner when you check one value against many cases.

When you want to run different code based on a single variable's value.

When you have many conditions to check instead of many if-else statements.

When you want your code to be easier to read and organize choices clearly.

When you want to handle menu selections or commands based on user input.

When you want to group similar actions under one variable check.

Syntax

Javascript

switch (expression) {
  case value1:
    // code to run if expression === value1
    break;
  case value2:
    // code to run if expression === value2
    break;
  // more cases...
  default:
    // code to run if no case matches
    break;
}

The break stops the switch from running the next cases.

The default case runs if no other case matches.

Examples

This checks the value of day and prints a message for Monday, Friday, or any other day.

Javascript

switch (day) {
  case 'Monday':
    console.log('Start of the week');
    break;
  case 'Friday':
    console.log('Almost weekend');
    break;
  default:
    console.log('Just another day');
    break;
}

Multiple cases can share the same code, like blue and green here.

Javascript

let color = 'red';
switch (color) {
  case 'blue':
  case 'green':
    console.log('Cool color');
    break;
  case 'red':
    console.log('Warm color');
    break;
  default:
    console.log('Unknown color');
    break;
}

Sample Program

This program checks the fruit and prints its color category.

Javascript

const fruit = 'apple';
switch (fruit) {
  case 'banana':
    console.log('Yellow fruit');
    break;
  case 'apple':
    console.log('Red or green fruit');
    break;
  case 'orange':
    console.log('Orange fruit');
    break;
  default:
    console.log('Unknown fruit');
    break;
}

Important Notes

Always use break to avoid running code in the next cases unintentionally.

The default case is optional but useful for unexpected values.

Switch works best with simple values like strings or numbers.

Summary

Switch helps pick code to run based on one value.

Use case for each option and break to stop.

default runs if no case matches.

Practice

1. What is the main purpose of a switch statement in JavaScript?

easy

A. To choose which block of code to run based on a value

B. To repeat a block of code multiple times

C. To define a function

D. To create a new variable

Solution

1. Step 1: Understand the role of switch

   A switch statement checks a value and runs code matching that value.

2. Step 2: Compare with other options

   Repeating code is for loops, defining functions is with function keyword, and variables use let/const/var.

3. Final Answer:

   To choose which block of code to run based on a value -> Option A

4. Quick Check:

   Switch = choose code by value [OK]

Hint: Switch picks code based on one value quickly [OK]

Common Mistakes:

• Confusing switch with loops
• Thinking switch defines functions
• Believing switch creates variables

2. Which of the following is the correct syntax to start a switch statement in JavaScript?

easy

A. switch value { }

B. switch { value }

C. switch (value) { }

D. switch: (value) { }

Solution

1. Step 1: Recall switch syntax

   The switch statement requires parentheses around the value and curly braces for cases: switch (value) { ... }

2. Step 2: Check each option

   switch (value) { } matches correct syntax; others miss parentheses or use wrong symbols.

3. Final Answer:

   switch (value) { } -> Option C

4. Quick Check:

   Correct switch syntax uses parentheses and braces [OK]

Hint: Switch needs (value) and {cases} to work [OK]

Common Mistakes:

• Omitting parentheses around value
• Using curly braces instead of parentheses
• Adding colon after switch keyword

3. What will be the output of this code?

const day = 3;
switch(day) {
  case 1:
    console.log('Monday');
    break;
  case 2:
    console.log('Tuesday');
    break;
  case 3:
    console.log('Wednesday');
    break;
  default:
    console.log('Unknown day');
}

medium

A. Monday

B. Tuesday

C. Unknown day

D. Wednesday

Solution

1. Step 1: Match the value with cases

   The variable day is 3, so the switch looks for case 3.

2. Step 2: Identify executed case

   Case 3 matches and prints 'Wednesday', then break stops further checks.

3. Final Answer:

   Wednesday -> Option D

4. Quick Check:

   day=3 matches case 3 = Wednesday [OK]

Hint: Match value to case, break stops after match [OK]

Common Mistakes:

• Forgetting break causes fall-through
• Choosing default when case matches
• Mixing up case numbers and outputs

4. Find the error in this switch statement:

const color = 'red';
switch(color) {
  case 'red'
    console.log('Stop');
    break;
  case 'green':
    console.log('Go');
    break;
  default:
    console.log('Wait');
}

medium

A. Wrong variable name in switch

B. Missing colon ':' after case 'red'

C. Missing break after case 'red'

D. Missing default case

Solution

1. Step 1: Check case syntax

   Each case must end with a colon ':' after the value. Here, case 'red' misses the colon.

2. Step 2: Verify other parts

   Break is present after case 'red' block, variable name is correct, and default exists.

3. Final Answer:

   Missing colon ':' after case 'red' -> Option B

4. Quick Check:

   Case needs ':' after value [OK]

Hint: Each case must end with ':' before code [OK]

Common Mistakes:

• Omitting colon after case value
• Forgetting break causing fall-through
• Missing default case (not always error)

5. You want to print 'Weekend' for days 6 and 7, and 'Weekday' for days 1 to 5 using a switch. Which code correctly does this?

hard

A. switch(day) {
case 6:
case 7:
console.log('Weekend');
break;
case 1:
case 2:
case 3:
case 4:
case 5:
console.log('Weekday');
break;
default:
console.log('Invalid day');
}

B. switch(day) {
case 6:
console.log('Weekend');
case 7:
console.log('Weekend');
break;
case 1:
case 2:
case 3:
case 4:
case 5:
console.log('Weekday');
break;
default:
console.log('Invalid day');
}

C. switch(day) {
case 6:
case 7:
console.log('Weekend');
case 1:
case 2:
case 3:
case 4:
case 5:
console.log('Weekday');
break;
default:
console.log('Invalid day');
}

D. switch(day) {
case 6:
case 7:
console.log('Weekend');
break;
case 1:
case 2:
case 3:
case 4:
case 5:
console.log('Weekday');
default:
console.log('Invalid day');
}

Solution

1. Step 1: Group cases for weekend and weekday

   Cases 6 and 7 should print 'Weekend' with one console.log and break after.

2. Step 2: Group cases 1 to 5 for 'Weekday' with break

   Cases 1-5 print 'Weekday' and break to avoid fall-through.

3. Step 3: Check default for invalid days

   Default prints 'Invalid day' if no case matches.

4. Final Answer:

   switch(day) { case 6: case 7: console.log('Weekend'); break; case 1: case 2: case 3: case 4: case 5: console.log('Weekday'); break; default: console.log('Invalid day'); } -> Option A

5. Quick Check:

   Group cases, use break to stop fall-through [OK]

Hint: Group cases without code, break after last case [OK]

Common Mistakes:

• Missing break causing fall-through
• Repeating console.log in each case unnecessarily
• Omitting default case for invalid input