Podmínky a cykly

Podmínka if / else

Podmínka if spustí blok kódu jen tehdy, když je výraz v závorce pravdivý (true). Volitelně lze přidat else pro případ, kdy podmínka splněna není:

let hodina = new Date().getHours();

if (hodina < 12) {
  console.log('Dobré ráno!');
} else if (hodina < 18) {
  console.log('Dobré odpoledne!');
} else {
  console.log('Dobrý večer!');
}

Klíčové slovo else if přidá další větev – testuje se jen tehdy, když předchozí podmínka nebyla splněna. Podmínek else if může být libovolný počet.

Porovnávací a logické operátory v podmínkách

Podmínky pracují s výsledkem porovnání. Nejčastěji používané operátory:

x === y   // rovná se (hodnota i typ) – preferuj vždy tuto variantu
x !== y   // nerovná se
x > y    // větší než
x < y    // menší než
x >= y   // větší nebo rovno
x <= y   // menší nebo rovno

Logické operátory kombinují více podmínek najednou:

if (vek >= 18 && maRidicskyPrukaz) {
  // obě podmínky musí platit – logické A (AND)
}

if (jePratel || jeRodina) {
  // stačí jedna podmínka – logické NEBO (OR)
}

if (!jePrihlaseny) {
  // negace – platí, když podmínka NENÍ splněna
}

Příkaz switch

Pokud testuješ jednu proměnnou na více různých hodnot, je switch přehlednější než řada else if:

let den = 'pondeli';

switch (den) {
  case 'pondeli':
    console.log('Začátek pracovního týdne.');
    break;
  case 'patek':
    console.log('Pátek – konec je blízko!');
    break;
  case 'sobota':
  case 'nedele':
    console.log('Víkend!');
    break;
  default:
    console.log('Všední den.');
}

Klíčové slovo break ukončí příslušnou větev. Bez něj by JavaScript pokračoval do další větve (tzv. fall-through). Větev default se spustí, když žádný case neodpovídá.

Cyklus for

Cyklus opakuje blok kódu. Klasický for cyklus se skládá ze tří částí: inicializace počítadla, podmínka pokračování a krok po každém průchodu:

for (let i = 0; i < 5; i++) {
  console.log('Průchod číslo ' + i);
}
// Vypíše: Průchod číslo 0, 1, 2, 3, 4

Nejčastější použití – procházení pole:

let barvy = ['červená', 'zelená', 'modrá'];

for (let i = 0; i < barvy.length; i++) {
  console.log(barvy[i]);
}

Modernější průchod polem – forEach a for…of

Pro procházení polí existují elegantnější zápisy:

let barvy = ['červená', 'zelená', 'modrá'];

// forEach – spustí funkci pro každý prvek
barvy.forEach(function (barva) {
  console.log(barva);
});

// for…of – přehledný a čitelný zápis
for (let barva of barvy) {
  console.log(barva);
}

Oba způsoby jsou modernější a čitelnější než klasický for s indexem. Použij je vždy, když nepotřebuješ číslo indexu.

Cyklus while

Cyklus while opakuje blok, dokud je podmínka splněna. Hodí se tehdy, kdy předem nevíš, kolikrát se má cyklus opakovat:

let pocet = 0;

while (pocet < 3) {
  console.log('Opakování č. ' + pocet);
  pocet++;
}
// Vypíše: 0, 1, 2

Pozor: pokud podmínka nikdy nepřestane být splněná, cyklus poběží donekonečna a prohlížeč zamrzne. Vždy se ujisti, že podmínka se po určitém počtu průchodů změní na false.

Praktický příklad – podmínka a cyklus dohromady

Ukázka: funkce přidá CSS třídu všem tlačítkům na stránce, ale jen těm, která mají atribut aria-label:

let tlacitka = document.querySelectorAll('button');

for (let tlacitko of tlacitka) {
  if (tlacitko.hasAttribute('aria-label')) {
    tlacitko.classList.add('pristupne');
  } else {
    console.warn('Tlačítko bez aria-label:', tlacitko);
  }
}

Tip od Zdeňka

Zdeněk radí: Podmínky a cykly jsou místo, kde se začátečníci nejčastěji ztratí – kód se zdá správný, ale nedělá, co má. Nejlepší lék je console.log() na každém důležitém místě. Vypiš hodnotu proměnné před podmínkou, vypiš, co se děje uvnitř cyklu. Záhy uvidíš, kde se kód vydal jiným směrem než jsi čekal. A vždy používej trojitý rovník (===) – dvojitý (==) způsobuje záludné chyby, které je těžké najít.