Domů O mně Služby Portfolio Učím Blog Kontakt
← Zpět na učím

2.2 Else if

Výuka

Kdy nestačí jedno if/else?

V předchozí lekci jsme viděli dvě možnosti: podmínka platí nebo neplatí. Ale co když máme více než dvě možnosti?

Představ si známkování testu:

  • 90-100 bodů → A
  • 80-89 bodů → B
  • 70-79 bodů → C
  • 60-69 bodů → D
  • méně → F

To jsou 4 různé větve - jedna if/else nestačí.

Řetězení podmínek s else if

if (podmínka1) {
  // kód pro podmínku 1
} else if (podmínka2) {
  // kód pro podmínku 2
} else if (podmínka3) {
  // kód pro podmínku 3
} else {
  // kód, když nic z výše neplatí
}

Důležité: Podmínky se vyhodnocují shora dolů. Jakmile jedna platí, ostatní se přeskočí.

Pořadí podmínek je důležité!

const score = 95;

// ❌ ŠPATNĚ - první podmínka vždy vyhraje
if (score >= 60) {
  console.log("D");  // 95 >= 60 je true!
} else if (score >= 90) {
  console.log("A");  // Nikdy se neprovede
}

// ✅ SPRÁVNĚ - od nejpřísnější k nejmírnější
if (score >= 90) {
  console.log("A");  // ✅
} else if (score >= 60) {
  console.log("D");
}

JavaScript

// Známkování
const score = 85;

if (score >= 90) {
  console.log("A - Výborně!");
} else if (score >= 80) {
  console.log("B - Velmi dobře");
} else if (score >= 70) {
  console.log("C - Dobře");
} else if (score >= 60) {
  console.log("D - Dostatečně");
} else {
  console.log("F - Nedostatečně");
}
// Výstup: "B - Velmi dobře"

// Kategorizace věku
const age = 25;

if (age < 0) {
  console.log("Neplatný věk");
} else if (age < 13) {
  console.log("Dítě");
} else if (age < 20) {
  console.log("Teenager");
} else if (age < 65) {
  console.log("Dospělý");
} else {
  console.log("Senior");
}

// Denní doba
const hour = 14;

if (hour < 6) {
  console.log("Noc");
} else if (hour < 12) {
  console.log("Ráno");
} else if (hour < 18) {
  console.log("Odpoledne");
} else if (hour < 22) {
  console.log("Večer");
} else {
  console.log("Noc");
}

// Kombinace s logickými operátory
const temperature = 25;
const isRaining = false;

if (temperature > 30) {
  console.log("Horko - zůstaň v klimatizaci");
} else if (temperature > 20 && !isRaining) {
  console.log("Krásně - jdi ven!");
} else if (temperature > 20 && isRaining) {
  console.log("Teplo, ale prší - vezmi deštník");
} else if (temperature > 10) {
  console.log("Chladno - vezmi svetr");
} else {
  console.log("Zima - zůstaň doma");
}

TypeScript

// Základní else if s typy
const score: number = 85;
let grade: string;

if (score >= 90) {
  grade = "A";
} else if (score >= 80) {
  grade = "B";
} else if (score >= 70) {
  grade = "C";
} else {
  grade = "F";
}

console.log(grade);  // "B"

// Type Narrowing s else if
type Status = "loading" | "success" | "error";

function handleStatus(status: Status) {
  if (status === "loading") {
    console.log("Načítám...");
  } else if (status === "success") {
    console.log("Hotovo!");
  } else if (status === "error") {
    console.log("Chyba!");
  }
  // TypeScript ví, že všechny možnosti jsou pokryty
}

// Narrowing s union types
function processInput(input: string | number | boolean) {
  if (typeof input === "string") {
    // input: string
    console.log(input.toUpperCase());
  } else if (typeof input === "number") {
    // input: number
    console.log(input.toFixed(2));
  } else {
    // input: boolean (TS to odvodil!)
    console.log(input ? "ano" : "ne");
  }
}

// Exhaustive checking - kontrola, že jsi pokryl vše
type Color = "red" | "green" | "blue";

function getColorCode(color: Color): string {
  if (color === "red") {
    return "#FF0000";
  } else if (color === "green") {
    return "#00FF00";
  } else if (color === "blue") {
    return "#0000FF";
  } else {
    // Toto by se nikdy nemělo stát
    const _exhaustiveCheck: never = color;
    return _exhaustiveCheck;
  }
}

// Praktický příklad: validace formuláře
interface FormData {
  email: string;
  age: number;
}

function validateForm(data: FormData): string | null {
  if (!data.email.includes("@")) {
    return "Neplatný email";
  } else if (data.age < 0) {
    return "Věk nemůže být záporný";
  } else if (data.age < 18) {
    return "Musíte být plnoletí";
  } else {
    return null;  // Vše OK
  }
}

Rozdíl JS vs TS

JavaScript TypeScript
Podmínky jen za běhu TS kontroluje pokrytí všech případů
Žádná kontrola úplnosti Exhaustive checking s never
Volné typy v podmínkách Type narrowing po každé větvi

Exhaustive checking - TypeScript ti pomůže odhalit, když zapomeneš na nějaký případ:

type Animal = "dog" | "cat" | "bird";

function getSound(animal: Animal): string {
  if (animal === "dog") {
    return "haf";
  } else if (animal === "cat") {
    return "mňau";
  }
  // ❌ Error: "bird" není pokrytý!

  // Přidáme:
  else if (animal === "bird") {
    return "píp";
  }
  // ✅ Teď je vše OK
}

Tip

💡 Seřaď podmínky od nejčastější k nejméně časté:

// Pokud 90% uživatelů je "active":
if (status === "active") {
  // nejčastější případ - první
} else if (status === "pending") {
  // méně časté
} else if (status === "banned") {
  // vzácné
}

💡 Vyhni se příliš dlouhým řetězcům - použij switch nebo objekt:

// ❌ Příliš dlouhé
if (day === "monday") { /*...*/ }
else if (day === "tuesday") { /*...*/ }
else if (day === "wednesday") { /*...*/ }
// ... a tak dále

// ✅ Lepší - použij switch nebo lookup objekt
const dayNames = {
  monday: "Pondělí",
  tuesday: "Úterý",
  // ...
};
console.log(dayNames[day]);

💡 Nezapomeň na else jako "catch-all":

// ✅ Bezpečné - vždy máš fallback
if (role === "admin") {
  // ...
} else if (role === "user") {
  // ...
} else {
  console.log("Neznámá role:", role);
}

Kvíz

Které výroky jsou pravdivé?

- Jakmile jedna podmínka platí, ostatní se přeskočí

- Podmínky se vyhodnocují shora dolů, pořadí ovlivňuje výsledek

- else je volitelný, ale doporučený jako fallback

- TypeScript s exhaustive checking kontroluje pokrytí všech variant

🎯 Závěrečný projekt

Po dokončení všech 8 dílů vytvoříte jednoduchou Todо aplikaci v čistém JavaScriptu. Naučíte se, jak aplikovat vše, co jste se naučili, na reálný projekt.

Zobrazit podrobnosti projektu →

Připraveni začít?

Zaregistrujte se a získejte přístup ke všem dílům tohoto seriálu

Kontaktujte mě

Informace o seriálu

Obtížnost

Délka

Cca 480 minut

Počet videí

8 videí + projekty

Certifikát

Po dokončení obdržíte certifikát


Lekce v této sekci


Struktura lekcí (souborový strom)

06. Typescript specifika
  • v přípravě
08. Moduly tridy
  • v přípravě
09. React zaklady
  • v přípravě
10. React hooks
  • v přípravě
12. Nextjs server
  • v přípravě
13. Databaze auth
  • v přípravě
14. Nextjs pokrocile
  • v přípravě