2.4 Switch

Výuka

Kdy použít switch místo if/else?

Představ si, že máš proměnnou, která může mít několik konkrétních hodnot a pro každou chceš udělat něco jiného:

// if/else - opakující se vzor
if (day === "monday") { /*...*/ }
else if (day === "tuesday") { /*...*/ }
else if (day === "wednesday") { /*...*/ }
// ... 7x to samé

Switch je pro tento případ čitelnější:

switch (day) {
  case "monday": /*...*/ break;
  case "tuesday": /*...*/ break;
  // ...
}

Anatomie switch

switch (výraz) {
  case hodnota1:
    // kód pro hodnota1
    break;
  case hodnota2:
    // kód pro hodnota2
    break;
  default:
    // kód když nic nesedí
}

Klíčové části:

• switch (výraz) - výraz, jehož hodnota se porovnává
• case hodnota: - pokud výraz === hodnota, začne se zde
• break - ukončí switch (jinak "propadne" do dalšího case!)
• default - volitelný, provede se když nic nesedí

Pozor na break!

Bez break kód propadne do dalšího case:

const fruit = "apple";

switch (fruit) {
  case "apple":
    console.log("Jablko");
    // Chybí break!
  case "banana":
    console.log("Banán");
    break;
}
// Výstup: "Jablko" A "Banán" - oboje!

JavaScript

// Základní switch
const day = "wednesday";

switch (day) {
  case "monday":
    console.log("Pondělí - začátek týdne");
    break;
  case "tuesday":
    console.log("Úterý");
    break;
  case "wednesday":
    console.log("Středa - polovina týdne");
    break;
  case "thursday":
    console.log("Čtvrtek");
    break;
  case "friday":
    console.log("Pátek - hurá!");
    break;
  default:
    console.log("Víkend");
}

// Sdílení kódu mezi case (fall-through)
const month = 2;
let season;

switch (month) {
  case 12:
  case 1:
  case 2:
    season = "zima";
    break;
  case 3:
  case 4:
  case 5:
    season = "jaro";
    break;
  case 6:
  case 7:
  case 8:
    season = "léto";
    break;
  case 9:
  case 10:
  case 11:
    season = "podzim";
    break;
  default:
    season = "neplatný měsíc";
}

console.log(season);  // "zima"

// Switch s výrazem
const score = 85;

switch (true) {  // Trik: porovnávej s true
  case score >= 90:
    console.log("A");
    break;
  case score >= 80:
    console.log("B");
    break;
  case score >= 70:
    console.log("C");
    break;
  default:
    console.log("F");
}

// Switch používá === (striktní porovnání)
const value = "1";

switch (value) {
  case 1:
    console.log("číslo 1");
    break;
  case "1":
    console.log("string '1'");  // ✅ Toto se provede
    break;
}

// Switch s bloky (pro lokální proměnné)
switch (action) {
  case "create": {
    const newItem = createItem();
    save(newItem);
    break;
  }
  case "delete": {
    const id = getId();
    remove(id);
    break;
  }
}

TypeScript

// Základní switch s typy
type Day = "monday" | "tuesday" | "wednesday" | "thursday" | "friday" | "saturday" | "sunday";

function getDayMessage(day: Day): string {
  switch (day) {
    case "monday":
      return "Začátek týdne";
    case "friday":
      return "Konečně pátek!";
    case "saturday":
    case "sunday":
      return "Víkend!";
    default:
      return "Běžný den";
  }
}

// Exhaustive checking - TS kontroluje, že jsi pokryl vše
type Status = "pending" | "approved" | "rejected";

function handleStatus(status: Status): string {
  switch (status) {
    case "pending":
      return "Čeká na schválení";
    case "approved":
      return "Schváleno";
    case "rejected":
      return "Zamítnuto";
    default:
      // Toto by se nikdy nemělo stát
      const _exhaustiveCheck: never = status;
      return _exhaustiveCheck;
  }
}

// Pokud přidáš nový status a zapomeneš ho do switch:
// type Status = "pending" | "approved" | "rejected" | "cancelled";
// TypeScript ti vyhodí chybu u default větve!

// Discriminated unions - switch je ideální
interface Circle {
  kind: "circle";
  radius: number;
}

interface Rectangle {
  kind: "rectangle";
  width: number;
  height: number;
}

type Shape = Circle | Rectangle;

function getArea(shape: Shape): number {
  switch (shape.kind) {
    case "circle":
      // TypeScript ví, že shape je Circle
      return Math.PI * shape.radius ** 2;
    case "rectangle":
      // TypeScript ví, že shape je Rectangle
      return shape.width * shape.height;
  }
}

// Switch s enum
enum Color {
  Red = "RED",
  Green = "GREEN",
  Blue = "BLUE"
}

function getColorHex(color: Color): string {
  switch (color) {
    case Color.Red:
      return "#FF0000";
    case Color.Green:
      return "#00FF00";
    case Color.Blue:
      return "#0000FF";
  }
}

Rozdíl JS vs TS

Discriminated unions + switch je silná kombinace v TS:

type Action =
  | { type: "INCREMENT" }
  | { type: "DECREMENT" }
  | { type: "SET"; value: number };

function reducer(state: number, action: Action): number {
  switch (action.type) {
    case "INCREMENT":
      return state + 1;
    case "DECREMENT":
      return state - 1;
    case "SET":
      return action.value;  // TS ví, že action má value
  }
}

Tip

💡 Vždy používej break (pokud záměrně nechceš fall-through):

// ❌ Zapomenutý break
switch (x) {
  case 1:
    doSomething();
    // break; ← chybí!
  case 2:
    doSomethingElse();  // Provede se i pro x === 1!
}

// ✅ Explicitní fall-through s komentářem
switch (x) {
  case 1:
  case 2:
    // Oba případy dělají totéž
    doSomething();
    break;
}

💡 Pro jednoduché mapování hodnot použij objekt:

// ❌ Zbytečně dlouhý switch
switch (status) {
  case "pending": return "Čeká";
  case "approved": return "Schváleno";
  case "rejected": return "Zamítnuto";
}

// ✅ Lookup objekt - kratší a rychlejší
const statusLabels = {
  pending: "Čeká",
  approved: "Schváleno",
  rejected: "Zamítnuto"
};
return statusLabels[status] ?? "Neznámý";

💡 Používej bloky {} pro lokální proměnné:

switch (action) {
  case "create": {
    const item = new Item();  // Lokální pro tento case
    break;
  }
  case "delete": {
    const item = findItem();  // Jiná lokální proměnná
    break;
  }
}