Lekce 13 - Podmínky v JavaScriptu podruhé

V minulé lekci, Striktní operátory a přetypování v JavaScriptu, jsme se podrobněji 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í lekci podmínky dokončíme shrnutím přetypování v podmínkách, představením konstrukce switch s propadáváním a ternárního operátoru.

Tabulka přetypování

Téma přetypování z minulé lehce shrňme tabulkou jak se vyhodnotí různé hodnoty, pokud je použijeme v podmínce v JavaScriptu, např. takto:

let promenna = '0';
if (promenna)
    document.write('Pravda');

Z minula bychom měli vědět, že ačkoli číslo 0 označuje nepravdu, my zde máme nulu zadanou jako neprázdný řetězec, který je vždy true. Takovou nulu jsme mohli načíst např. z nějakého elementu na stránce, ze kterých získáme vždy text a na číslo jej musíme případně dodatečně naparsovat. Výsledkem tedy je:

Uveďme si slíbenou tabulku.

Vidíme zde i příklady, které jsme si již vyzkoušeli. Např., že prázdné pole [] je v podmínce vyhodnoceno jako true. Tímto téma přetypování již kompletně opustíme.

switch s propadáváním

Naši partneři možná hledají právě tebe!

S konstrukcí switch jsme se již setkali. Zde si ukážeme její další použití. 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 takovýto příklad? Možná by vás napadl následující zápis.

const 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;
}

Propadávání

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. 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í break, ale celou skupinu bloku jedním break. Neukončené bloky tak propadnou a vykoná se kód společný pro více bloků:

const 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;
}

Tento zápis je již mnohem přehlednější. Konstrukce switch má přidanou hodnotu v případě, kdy nemůžeme použít větší/menší a jde o výčet hodnot, zde je to spíše redundantní kód.

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

Propadávání používejte ve 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.

Ternární operátor

Nyní si představme naopak něco velmi užitečného. Často se nám stává, že někde potřebujeme různé hodnoty podle toho, zda platí nějaká podmínka. Představme si, že máme např. 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);

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

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

Podmínku vložíme většinou do závorky, poté následuje otazník a 2 hodnoty, které se mají vrátit. Hodnoty jsou oddělené dvojtečkou, první se vrátí když podmínka platí a druhá když neplatí. Místo typu Boolean bychom mohli do závorky samozřejmě napsat jakoukoli jinou podmínku, např. (vek >= 18) ? 'zletilý' : 'nezletilý'.

V příští lekci, Obrázky a kreslení na canvas v JavaScriptu, se budeme věnovat práci s obrázky.