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.

// 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

<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>