2.1 If / else
Výuka
Proč potřebujeme podmínky?
Představ si, že programuješ automat na kávu. Zákazník vhodí mince a vybere nápoj. Ale co když:
- Vhodil málo peněz?
- Vybraný nápoj došel?
- Automat nemá drobné na vrácení?
Program musí reagovat na různé situace různě. K tomu slouží podmínky - příkazy, které provedou určitý kód pouze když platí nějaká podmínka.
Jak funguje if?
if (podmínka) {
// kód, který se provede, pokud je podmínka PRAVDIVÁ
}
Podmínka je výraz, který se vyhodnotí jako true nebo false (boolean). Pokud je true, kód v bloku {} se provede. Pokud je false, přeskočí se.
Co když podmínka neplatí? → else
if (podmínka) {
// kód pro TRUE
} else {
// kód pro FALSE
}
else je volitelný blok, který se provede pouze když podmínka neplatí.
Anatomie podmínky
if (age >= 18) {
// ^^^^^^^^^ podmínka (výraz vracející boolean)
console.log("Dospělý");
//^^^^^^^^^^^^^^^^^^^^^^^ tělo if bloku
} else {
console.log("Nezletilý");
//^^^^^^^^^^^^^^^^^^^^^^^^^ tělo else bloku
}
JavaScript
// Základní if
const age = 20;
if (age >= 18) {
console.log("Můžeš volit");
}
// If s else
const temperature = 5;
if (temperature > 20) {
console.log("Teplo - vezmi si tričko");
} else {
console.log("Chladno - vezmi si bundu");
}
// Podmínky s různými operátory
const password = "secret123";
if (password === "secret123") {
console.log("Přístup povolen");
} else {
console.log("Špatné heslo");
}
// Složená podmínka (AND, OR)
const hasTicket = true;
const isVIP = false;
if (hasTicket || isVIP) {
console.log("Vstup povolen");
} else {
console.log("Kupte si lístek");
}
// Vnořené podmínky
const user = { name: "Jan", role: "admin" };
if (user) {
if (user.role === "admin") {
console.log("Admin panel");
} else {
console.log("Uživatelský panel");
}
} else {
console.log("Přihlaste se");
}
// Bez složených závorek (jen jeden příkaz)
if (age >= 18) console.log("Dospělý");
// ⚠️ Nedoporučeno - hůře čitelné
TypeScript
// TypeScript přidává TYPE GUARDS - zúžení typu pomocí podmínek
// Základní if s typy
const age: number = 20;
if (age >= 18) {
console.log("Můžeš volit");
}
// Type Guard - kontrola typu
function processValue(value: string | number) {
if (typeof value === "string") {
// TypeScript VÍ, že zde je value: string
console.log(value.toUpperCase()); // ✅ OK
} else {
// TypeScript VÍ, že zde je value: number
console.log(value.toFixed(2)); // ✅ OK
}
}
// Type Guard s null/undefined
function greet(name: string | null) {
if (name !== null) {
// TypeScript VÍ, že name je string (ne null)
console.log(`Ahoj, ${name}!`);
} else {
console.log("Ahoj, cizinče!");
}
}
// Type Guard s objekty
interface Dog {
bark(): void;
}
interface Cat {
meow(): void;
}
function makeSound(animal: Dog | Cat) {
if ("bark" in animal) {
// TypeScript VÍ, že animal je Dog
animal.bark();
} else {
// TypeScript VÍ, že animal je Cat
animal.meow();
}
}
// Narrowing s truthiness
function printLength(value: string | null | undefined) {
if (value) {
// TypeScript VÍ, že value je string (ne null/undefined)
console.log(value.length);
}
}
Rozdíl JS vs TS
| JavaScript | TypeScript |
|---|---|
| Podmínky fungují za běhu | Podmínky fungují za běhu + TS analyzuje typy |
| Žádná kontrola typů v podmínkách | Type Guards - TS zužuje typy podle podmínek |
typeof jen pro runtime kontrolu |
typeof pomáhá TS pochopit typ v bloku |
| Chyby odhalíš až při spuštění | Chyby typu vidíš v editoru |
Type Narrowing je klíčová vlastnost TypeScriptu:
function example(value: string | number | null) {
// Zde: value je string | number | null
if (value === null) {
return; // early return
}
// Zde: value je string | number (TS vyloučil null)
if (typeof value === "string") {
// Zde: value je string
console.log(value.toUpperCase());
} else {
// Zde: value je number
console.log(value * 2);
}
}
Tip
💡 Používej "guard clauses" (brzké návraty):
// ❌ Vnořené podmínky - těžko čitelné
function processUser(user) {
if (user) {
if (user.isActive) {
if (user.hasPermission) {
// hlavní logika
}
}
}
}
// ✅ Guard clauses - přehledné
function processUser(user) {
if (!user) return;
if (!user.isActive) return;
if (!user.hasPermission) return;
// hlavní logika
}
💡 Vždy používej === místo ==:
// ❌ Nebezpečné
if (value == null) { } // true pro null I undefined
// ✅ Explicitní
if (value === null || value === undefined) { }
// nebo
if (value == null) { } // toto je jediná výjimka, kde == dává smysl
💡 Složené závorky vždy:
// ❌ Riziko chyb
if (isAdmin)
deleteEverything();
console.log("Done"); // Toto se provede VŽDY!
// ✅ Bezpečné
if (isAdmin) {
deleteEverything();
console.log("Done");
}
Kvíz
Které výroky jsou pravdivé?
❌ - else je volitelný, můžeš použít samotný if
✅ - TypeScript používá podmínky pro type narrowing - zužování typů
❌ - 0 je falsy hodnota, takže if (0) se vyhodnotí jako false
✅ - Podmínka musí být výraz, který se převede na true nebo false
🎯 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ě