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

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 →

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ě