JavaScript Switch Statements — JavaScript Tutorial

Multiple Choice Decisions

The switch statement is used when you have multiple possible values for a variable.

It's cleaner than multiple if-else statements when checking one value against many options.

Example

// Basic Switch
let day = 3;
let dayName;

switch (day) {
  case 1:
    dayName = 'Monday';
    break;
  case 2:
    dayName = 'Tuesday';
    break;
  case 3:
    dayName = 'Wednesday';
    break;
  case 4:
    dayName = 'Thursday';
    break;
  case 5:
    dayName = 'Friday';
    break;
  case 6:
  case 7:
    dayName = 'Weekend';
    break;
  default:
    dayName = 'Invalid day';
}

// Multiple Cases
let fruit = 'apple';

switch (fruit) {
  case 'apple':
  case 'pear':
    console.log('Fruit from tree');
    break;
  case 'banana':
  case 'grape':
    console.log('Tropical fruit');
    break;
  default:
    console.log('Unknown fruit');
}

switch - Evaluates expression once
case - Define possible values
break - Exit switch (important!)
default - Fallback option
Multiple cases can share code
Strict comparison (===) used

Try Switch Statement

HTML

<div class="switch-demo">
  <h3>Menu Selector</h3>
  <select id="menuChoice">
    <option value="">Choose a dish...</option>
    <option value="pizza">Pizza</option>
    <option value="burger">Burger</option>
    <option value="pasta">Pasta</option>
    <option value="salad">Salad</option>
    <option value="sushi">Sushi</option>
  </select>
  <button onclick="showDishInfo()">Get Info</button>
  <div id="dishInfo"></div>
  
  <hr style="margin: 20px 0;">
  
  <h3>Calculator</h3>
  <input type="number" id="calcNum1" value="10" style="width: 80px;">
  <select id="operation">
    <option value="+">+</option>
    <option value="-">-</option>
    <option value="*">×</option>
    <option value="/">÷</option>
  </select>
  <input type="number" id="calcNum2" value="5" style="width: 80px;">
  <button onclick="calculate()">Calculate</button>
  <div id="calcResult"></div>
</div>

CSS

.switch-demo { padding: 20px; background: #f0f0f0; border-radius: 8px; }
select, input { padding: 10px; margin: 5px; border: 1px solid #ddd; border-radius: 4px; }
button { padding: 10px 20px; background: #d1039e; color: white; border: none; border-radius: 5px; cursor: pointer; margin: 5px; }
#dishInfo, #calcResult { margin-top: 15px; padding: 15px; background: white; border-radius: 5px; min-height: 20px; }

JavaScript

function showDishInfo() {
  const choice = document.getElementById('menuChoice').value;
  const info = document.getElementById('dishInfo');
  
  switch (choice) {
    case 'pizza':
      info.innerHTML = '🍕 <strong>Pizza</strong><br>Price: $12<br>Calories: 800<br>Prep time: 15 mins';
      break;
    case 'burger':
      info.innerHTML = '🍔 <strong>Burger</strong><br>Price: $8<br>Calories: 600<br>Prep time: 10 mins';
      break;
    case 'pasta':
      info.innerHTML = '🍝 <strong>Pasta</strong><br>Price: $10<br>Calories: 700<br>Prep time: 20 mins';
      break;
    case 'salad':
      info.innerHTML = '🥗 <strong>Salad</strong><br>Price: $7<br>Calories: 300<br>Prep time: 5 mins';
      break;
    case 'sushi':
      info.innerHTML = '🍣 <strong>Sushi</strong><br>Price: $15<br>Calories: 400<br>Prep time: 25 mins';
      break;
    default:
      info.innerHTML = '⚠️ Please select a dish';
  }
}

function calculate() {
  const num1 = parseFloat(document.getElementById('calcNum1').value);
  const num2 = parseFloat(document.getElementById('calcNum2').value);
  const operation = document.getElementById('operation').value;
  const result = document.getElementById('calcResult');
  let answer;
  
  switch (operation) {
    case '+':
      answer = num1 + num2;
      break;
    case '-':
      answer = num1 - num2;
      break;
    case '*':
      answer = num1 * num2;
      break;
    case '/':
      answer = num2 !== 0 ? num1 / num2 : 'Cannot divide by zero';
      break;
    default:
      answer = 'Invalid operation';
  }
  
  result.innerHTML = `<strong>Result:</strong> ${num1} ${operation} ${num2} = ${answer}`;
}

Notes

Use switch for multiple fixed values. Use if/else for complex conditions or ranges.