Lekce 21 - Podmínky v JavaScriptu potřetí

V minulé lekci, Striktní operátory a přetypování v JavaScriptu, jsme se podrobně věnovali přetypování v JavaScriptu, naučili se zkrácený zápis podmínek a umíme se vyvarovat mnoha úskalím pomocí striktních operátorů.

V dnešním tutoriálu základů JavaScriptu si představíme další dvě konstrukce, které souvisejí s podmínkami. Jedná se o ternární operátor a konstrukci switch s propadáváním.

Ternární operátor

Často se nám stává, že někde potřebujeme nastavit pouze dvě různé hodnoty podle toho, zda platí nějaká podmínka.

Výpis pohlaví pomocí podmínky

Představme si, že máme například pohlaví uživatele uložené jako boolean (muž by byl true) a my bychom ho chtěli převést do textu. S dosavadními znalostmi bychom napsali asi takovýto kód:

let muz = true; // nějaká proměnná udávající pohlaví
let nazevPohlavi;
if (muz)
    nazevPohlavi = 'muž';
else
    nazevPohlavi = 'žena';
document.write(nazevPohlavi);

Výstup programu je samozřejmě následující:

Kód je poměrně upovídaný na to, že jen přepíná mezi dvěma hodnotami. Proto programovací jazyky často podporují tzv. ternární výraz.

Syntaxe ternárního výrazu

Získat hodnotu podle platnosti logického výrazu můžeme s využitím tzv. ternárního výrazu. Jeho syntaxe je následující:

(podminka) ? plati : neplati

Podmínku vložíme většinou do závorky (), poté následuje otazník ? a dvě hodnoty, které se mají vrátit. Hodnoty jsou oddělené dvojtečkou :. První hodnota plati se vrátí, když podmínka platí. Druhá hodnota neplati, když podmínka neplatí. Jak snadné! Název operátoru je odvozený od toho, že má tři části (podmínka, první hodnota a druhá hodnota), proto ternární.

Výpis pohlaví pomocí ternárního výrazu

Pojďme si ternární operátor vyzkoušet na příkladu s pohlavím:

let muz = true; // nějaká proměnná udávající pohlaví
let nazevPohlavi = (muz) ? 'muž' : 'žena';
document.write(nazevPohlavi);

V prohlížeči získáme stejný výstup jako u příkladu výše:

Místo proměnné typu boolean bychom mohli do závorky samozřejmě napsat jakoukoli jinou podmínku, například (vek >= 18) ? 'zletilý' : 'nezletilý'. V případě jednoduchých výrazů můžeme závorku i vynechat.

Vnořování ternárních operátorů

Ternární operátory lze teoreticky zanořovat do sebe a tím reagovat i na tři a více hodnot. Nicméně ve většině případů zanořování spíše kód znepřehlední, vznikají totiž dlouhé nebo podivně zalomené řádky a není na první pohled vidět, jaká část se kdy spustí. Ukažme si, jak by se pomocí vnořování ternárních výrazů vyřešil výpis tří smajlíků:

let smajlik = ":("; // nějaká proměnná udávající smajlíka
let nalada = (smajlik === ":)") ? "veselý" : (smajlik === ":(") ? "smutný" : "neznámý";
document.write(nalada);

Výstup:

Přepínání hodnoty boolean proměnné

Ukažme si poslední příklad. V lekci Podmínky podruhé: Konstrukce switch v JavaScriptu jsme si ukazovali, jak zkrátit kód pro změnu boolean hodnoty. Výsledkem byl zápis:

let svetloSviti = false;
svetloSviti = !svetloSviti; // přepínáme stav lampičky

if (svetloSviti)
    document.write("Světlo bylo zhasnuté, rozsvítili jsme.");
else
    document.write("Světlo bylo rozsvícené, zhasli jsme.");

Ternární operátor nám umožňuje stávající kód ještě zkrátit:

let svetloSviti = false;
svetloSviti = !svetloSviti;

document.write(svetloSviti ? "Světlo bylo zhasnuté, rozsvítili jsme." : "Světlo bylo rozsvícené, zhasli jsme.");

Konstrukce switch s propadáváním

S konstrukcí switch jsme se již setkali. Zde si ukážeme její další použití. Na rozdíl od ternárního operátoru jde ale spíše o historickou funkčnost, pro kterou dnes není moc rozumných využití. Stále je ale součástí JavaScriptu a můžeme na ni narazit v cizích zdrojových kódech.

Výpis čtvrtletí

Předpokládejme, že chceme podle měsíce v roce zjistit jaké je čtvrtletí. Pomocí if a else by příklad vypadal následovně:

if (mesic >= 1 && mesic <= 3)
    document.write('Je první čtvrtletí.');
else if (mesic >= 4 && mesic <= 6)
    document.write('Je druhé čtvrtletí.');
else if (mesic >= 7 && mesic <= 9)
    document.write('Je třetí čtvrtletí.');
else if (mesic >= 10 && mesic <= 12)
    document. Write('Je čtvrté čtvrtletí.');

Jak ale použít switch pro tento příklad? Mohlo by nás napadnout následující řešení:

let mesic = 11;
switch (mesic) {
    case 1:
        document.write('Je první čtvrtletí.');
        break;
    case 2:
        document.write('Je první čtvrtletí.');
        break;
    case 3:
        document.write('Je první čtvrtletí.');
        break;
    case 4:
        document.write('Je druhé čtvrtletí.');
        break;
    case 5:
        document.write('Je druhé čtvrtletí.');
        break;
    case 6:
        document.write('Je druhé čtvrtletí.');
        break;
    case 7:
        document.write('Je třetí čtvrtletí.');
        break;
    case 8:
        document.write('Je třetí čtvrtletí.');
        break;
    case 9:
        document.write('Je třetí čtvrtletí.');
        break;
    case 10:
        document.write('Je čtvrté čtvrtletí.');
        break;
    case 11:
        document.write('Je čtvrté čtvrtletí.');
        break;
    case 12:
        document.write('Je čtvrté čtvrtletí.');
        break;
}

Příklad funguje spolehlivě, problém však je, že jsme si tímto zápisem moc nepomohli. Podobnému repetitivnímu kódu bychom se vždy měli vyhýbat.

Propadávání

Zkusme to ještě jednou a využijme tzv. propadávání. Pokud potřebujeme ve více blocích case provádět stejný kód, stačí tyto bloky vložit pod sebe a neukončovat každý blok pomocí příkazu break, ale celou skupinu bloku jedním příkazem break. Neukončené bloky tak propadnou a vykoná se kód společný pro více bloků:

let mesic = 11;
switch (mesic) {
    case 1:
    case 2:
    case 3:
        document.write('Je první čtvrtletí.');
        break;
    case 4:
    case 5:
    case 6:
        document.write('Je druhé čtvrtletí.');
        break;
    case 7:
    case 8:
    case 9:
        document.write('Je třetí čtvrtletí.');
        break;
    case 10:
    case 11:
    case 12:
        document.write('Je čtvrté čtvrtletí.');
        break;
}

Ukázka aplikace v prohlížeči:

Tento zápis je již mnohem přehlednější. Konstrukce switch má ovšem přidanou hodnotu spíše v případě, kdy nemůžeme hodnoty porovnat v podmínce pomocí operátoru větší nebo menší a jde o výčet hodnot. Zde je to spíše redundantní kód plný prázdných case.

JavaScript podporuje propadávání jak prázdných case, tak na rozdíl od jiných jazyků i case s dalším kódem. To je častá příčina nechtěných chyb (zapomenutých break) a velmi těžko se hledají.

Co toto varování znamená si ukážeme na dalším příkladu. Pokud se vyhodnotí jedno case jako pravdivé, provedou se instrukce pro toto case a poté se pokračuje provádění kódu i dalších case bez ohledu na to, zda jsou splněny. Takto program pokračuje, dokud nenarazí na příkaz break:

let znamka = 1;
switch (znamka) {
  case 1:
    document.write("Hurá, dostal jsem jedničku!");
    // Propadne do dalšího case (není použito break)
  case 2:
    document.write("Dvojka ještě ujde.");
    break;
  case 3:
    document.write("Trojka je taky dobrá.");
    break;
  // další case
}

Protože v prvním case chybí příkaz break, v prohlížeči se nám vypíše i text druhého case:

Propadávání používejte v konstrukci switch jen pokud k němu máte dobrý důvod, nicméně je důležité, abyste jej uměli číst, když na něj někde narazíte.

Stejně jako k podmínkám je v JavaScriptu i ještě pár dalších drobností k cyklům, o nich si povíme ale jindy

V další lekci, Cykly v JavaScriptu potřetí, se naučíme používat klíčová slova break, continue, návěstí a cyklus do-while.

 

Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.