JavaScript Fundamentals

Switch Statements

Handle many options cleanly - like a menu with multiple choices

Find videos you like?

Save to resource drawer for future reference!

Switch: Multiple Choice Made Easy

A switch statement is like a multiple choice menu. Instead of many if-else statements, you check one value against many options and do different things for each match!

When to Use Switch

Use switch when checking ONE variable against many different values (3+ options). Cleaner than many if-else!

Switch vs If-Else

See the difference in clarity

With If-Else (Verbose)

const day = 'Monday';

if (day === 'Monday') {
  console.log('Start of week');
} else if (day === 'Tuesday') {
  console.log('Second day');
} else if (day === 'Wednesday') {
  console.log('Midweek');
} else if (day === 'Thursday') {
  console.log('Almost Friday');
} else if (day === 'Friday') {
  console.log('Last workday!');
} else {
  console.log('Weekend!');
}

With Switch (Clean!) ✨

const day = 'Monday';

switch (day) {
  case 'Monday':
    console.log('Start of week');
    break;
  case 'Tuesday':
    console.log('Second day');
    break;
  case 'Wednesday':
    console.log('Midweek');
    break;
  case 'Thursday':
    console.log('Almost Friday');
    break;
  case 'Friday':
    console.log('Last workday!');
    break;
  default:
    console.log('Weekend!');
}

How Switch Works

The anatomy of a switch statement

Switch Parts

switch (expression) {
  case value1:
    // Code for value1
    break;
  case value2:
    // Code for value2
    break;
  default:
    // Code if no match
}

switch (expression)

What to check

case value:

Each possible value

break;

Stop here (important!)

default:

If nothing matches

Don't Forget break!

Without break, code keeps running into the next case. Always add break unless you want that!

Basic Switch Example

Check a value against multiple options

javascript

code

DarkEditable

Console Output

Click "Run Code" to see output here...

Grouping Multiple Cases

Multiple values can run the same code

Stack Cases Together

Put multiple case statements together (no break between them) to run the same code for different values

const day = 'Saturday';

switch (day) {
  case 'Monday':
  case 'Tuesday':
  case 'Wednesday':
  case 'Thursday':
  case 'Friday':
    console.log('Workday');
    break;
  case 'Saturday':
  case 'Sunday':
    console.log('Weekend!');
    break;
}
// Output: Weekend!

Grouping Cases Example

Multiple cases sharing the same code

javascript

code

DarkEditable

Console Output

Click "Run Code" to see output here...

Real-World Example: Traffic Light

Handle different states with switch

javascript

code

DarkEditable

const trafficLight = 'yellow';

switch (trafficLight) {
  case 'red':
    console.log('STOP! Do not cross.');
    console.log('Wait for green light.');
    break;
  
  case 'yellow':
    console.log('SLOW DOWN!');
    console.log('Prepare to stop.');
    break;
  
  case 'green':
    console.log('GO! It\'s safe to cross.');
    break;
  
  default:
    console.log('Light malfunction - be careful!');
}

// Output: SLOW DOWN!
// Output: Prepare to stop.

// User role permissions
function checkAccess(role) {
  switch (role) {
    case 'admin':
      console.log('✓ Full access granted');
      console.log('✓ Can manage users');
      console.log('✓ Can edit settings');
      break;
    
    case 'editor':
      console.log('✓ Can create content');
      console.log('✓ Can edit content');
      break;
    
    case 'viewer':
      console.log('✓ Can view content only');
      break;
    
    default:
      console.log('✗ No access - please log in');
  }
}

checkAccess('editor');
// Output: ✓ Can create content
// Output: ✓ Can edit content

Console Output

Click "Run Code" to see output here...

Common Mistakes

Watch out for these errors

❌ Forgetting break

switch (num) {
  case 1:
    console.log('One');
    // Missing break!
  case 2:
    console.log('Two');
    break;
}

If num is 1, both "One" AND "Two" will print because there's no break!

⚠️ Forgetting default

Always include default to handle unexpected values. It's like the "else" of switch statements!

Key Takeaways

🎯

Switch = Multiple Choice

Check one value against many options

🛑

Always Use break

Stops execution, prevents fall-through

📚

Group Similar Cases

Stack cases to share the same code

🔄

Include default

Catch all unexpected values

Previous Topic

If...Else Statements

Making decisions in code with if, else if, else statements.

Next Topic

Loops

Repeating code with for, while, do-while loops, break, and continue.

Ask a Question

Have a question about Switch Statements? Ask our AI assistant.

🔐 Login to use AI Assistant

JavaScript Code Editor

Write and experiment with JavaScript code.

Output

Click "Run Code" to see the output.

JavaScript Fundamentals

Switch Statements

Handle many options cleanly - like a menu with multiple choices

Find videos you like?

Save to resource drawer for future reference!

Switch: Multiple Choice Made Easy

A switch statement is like a multiple choice menu. Instead of many if-else statements, you check one value against many options and do different things for each match!

When to Use Switch

Use switch when checking ONE variable against many different values (3+ options). Cleaner than many if-else!

Switch vs If-Else

See the difference in clarity

With If-Else (Verbose)

const day = 'Monday';

if (day === 'Monday') {
  console.log('Start of week');
} else if (day === 'Tuesday') {
  console.log('Second day');
} else if (day === 'Wednesday') {
  console.log('Midweek');
} else if (day === 'Thursday') {
  console.log('Almost Friday');
} else if (day === 'Friday') {
  console.log('Last workday!');
} else {
  console.log('Weekend!');
}

With Switch (Clean!) ✨

const day = 'Monday';

switch (day) {
  case 'Monday':
    console.log('Start of week');
    break;
  case 'Tuesday':
    console.log('Second day');
    break;
  case 'Wednesday':
    console.log('Midweek');
    break;
  case 'Thursday':
    console.log('Almost Friday');
    break;
  case 'Friday':
    console.log('Last workday!');
    break;
  default:
    console.log('Weekend!');
}

How Switch Works

The anatomy of a switch statement

Switch Parts

switch (expression) {
  case value1:
    // Code for value1
    break;
  case value2:
    // Code for value2
    break;
  default:
    // Code if no match
}

switch (expression)

What to check

case value:

Each possible value

break;

Stop here (important!)

default:

If nothing matches

Don't Forget break!

Without break, code keeps running into the next case. Always add break unless you want that!

Basic Switch Example

Check a value against multiple options

javascript

code

DarkEditable

Console Output

Click "Run Code" to see output here...

Grouping Multiple Cases

Multiple values can run the same code

Stack Cases Together

Put multiple case statements together (no break between them) to run the same code for different values

const day = 'Saturday';

switch (day) {
  case 'Monday':
  case 'Tuesday':
  case 'Wednesday':
  case 'Thursday':
  case 'Friday':
    console.log('Workday');
    break;
  case 'Saturday':
  case 'Sunday':
    console.log('Weekend!');
    break;
}
// Output: Weekend!

Grouping Cases Example

Multiple cases sharing the same code

javascript

code

DarkEditable

Console Output

Click "Run Code" to see output here...

Real-World Example: Traffic Light

Handle different states with switch

javascript

code

DarkEditable

const trafficLight = 'yellow';

// Output: SLOW DOWN!
// Output: Prepare to stop.

checkAccess('editor');
// Output: ✓ Can create content
// Output: ✓ Can edit content

Console Output

Click "Run Code" to see output here...

Common Mistakes

Watch out for these errors

❌ Forgetting break

switch (num) {
  case 1:
    console.log('One');
    // Missing break!
  case 2:
    console.log('Two');
    break;
}

If num is 1, both "One" AND "Two" will print because there's no break!

⚠️ Forgetting default

Always include default to handle unexpected values. It's like the "else" of switch statements!

Key Takeaways

🎯

Switch = Multiple Choice

Check one value against many options

🛑

Always Use break

Stops execution, prevents fall-through

📚

Group Similar Cases

Stack cases to share the same code

🔄

Include default

Catch all unexpected values

Coder Pod - Learn Programming Online | AI Coding Tutor & Interview Practice

If...Else Statements

Loops

JavaScript Code Editor

Building Your Learning Module...

Switch Statements

Switch: Multiple Choice Made Easy

When to Use Switch

With If-Else (Verbose)

With Switch (Clean!) ✨

Switch Parts

Don't Forget break!

Basic Switch Example

Stack Cases Together

Grouping Cases Example

Real-World Example: Traffic Light

❌ Forgetting break

⚠️ Forgetting default

Key Takeaways

Switch = Multiple Choice

Always Use break

Group Similar Cases

Include default

If...Else Statements

Loops

JavaScript Code Editor

Switch Statements

Switch: Multiple Choice Made Easy

When to Use Switch

With If-Else (Verbose)

With Switch (Clean!) ✨

Switch Parts

Don't Forget break!

Basic Switch Example

Stack Cases Together

Grouping Cases Example

Real-World Example: Traffic Light

❌ Forgetting break

⚠️ Forgetting default

Key Takeaways

Switch = Multiple Choice

Always Use break

Group Similar Cases

Include default