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 →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
- 2.1 If / else
- 2.2 Else if
- 2.3 Ternární operátor
- 2.4 Switch
- 2.5 For cyklus
- 2.6 While a do-while
- 2.7 For...of
- 2.8 For...in
- 2.9 Break a continue
- 2.10 Truthy a Falsy hodnoty
Struktura lekcí (souborový strom)
- 1.1 Úvod do JavaScriptu a TypeScriptu
- 1.2 Nastavení prostředí
- 1.3 První program
- 1.4 Proměnné: var, let, const
- 1.5 Datové typy - přehled
- 1.6 String (řetězce)
- 1.7 Number (čísla)
- 1.8 Boolean (pravda/nepravda)
- 1.9 Null a Undefined
- 1.10 Type Inference vs Annotations
- 1.11 Aritmetické operátory
- 1.12 Porovnávací operátory
- 1.13 Logické operátory
- 1.14 Komentáře
- 1.15 Console metody
- 03.01 Deklarace funkce
- 03.02 Function Expression
- 03.03 Arrow Functions
- 03.04 Parametry a argumenty
- 03.05 Return hodnoty
- 03.06 Výchozí parametry
- 03.07 Rest parametry
- 03.08 Co je Scope
- 03.09 Lexikální Scope
- 03.10 Řetězec Scope
- 03.11 Globální Scope
- 03.12 Životní Cyklus Proměnných
- 03.13 Omezení Scope
- 03.14 Použití Closures
- 03.15 Callback funkce
- 03.16 Higher-order Functions
- 03.17 IIFE
- 03.18 Void funkce
- 03.19 Rekurze
- v přípravě
- v přípravě
- v přípravě
- v přípravě
- 01 — Co je Next.js
- 02 — Vytvoření projektu
- 03 — Struktura projektu (app/)
- 04 — Page komponenty (page.js / page.tsx)
- 05 — Layout komponenty (layout.js / layout.tsx)
- 06 — File-based routing
- 07 — Dynamické routy ([id]/page.js)
- 08 — Link komponenta (navigace)
- 09 — Image komponenta (next/image)
- 10 — Metadata (title, description, Open Graph)
- 11 — Loading UI (loading.js / loading.tsx)
- 12 — Error handling (error.js / error.tsx)
- 13 — Not Found (not-found.js / not-found.tsx)
- v přípravě
- v přípravě
- v přípravě