13. diel - Podmienky v JavaScripte druhýkrát

V minulej lekcii, Striktné operátormi a pretypovanie v JavaScripte , sme sa podrobnejšie venovali pretypovanie v JavaScripte, naučili sa skrátený zápis podmienok a vieme sa vyvarovať mnohých úskaliam pomocou striktných operátorov. V dnešnej lekcii podmienky dokončíme zhrnutím pretypovanie v podmienkach, predstavením konštrukcia switch s propadáváním a ternárního operátora.

Tabuľka pretypovanie

Téma pretypovanie z minulej ľahko zhrňme tabuľkou ako sa vyhodnotia rôzne hodnoty, pokiaľ ich použijeme v podmienke v JavaScripte, napr. Takto:

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

Z minula by sme mali vedieť, že hoci číslo 0 označuje nepravdu, my tu máme nulu zadanú ako neprázdny reťazec, ktorý je vždy true. Takúto nulu sme mohli načítať napr. Z nejakého elementu na stránke, z ktorých získame vždy text a na číslo ho musíme prípadne dodatočne naparsovat. Výsledkom teda je:

Uveďme si sľúbenú tabuľku.

Zadaná hodnota v podmienke	výsledná hodnota
1	true
0	false
-1	true
'True'	true
'False'	true
'1'	true
'0'	true
'-1'	true
''	false
null	false
undefined	false
Infinity	true
-Infinity	true
[]	true
{}	true
[[]]	true
[0]	true
[1]	true
NaN	false

Vidíme tu aj príklady, ktoré sme si už vyskúšali. Napr., Že prázdne pole [] je v podmienke vyhodnotené ako true. Týmto téma pretypovanie už kompletne opustíme.

Switch s propadáváním

S konštrukciou switch sme sa už stretli. Tu si ukážeme jej ďalšie použitie. Predpokladajme, že chceme podľa mesiaca v roku zistiť aké je štvrťrok. Pomocou if a else by príklad vyzeral nasledovne:

if (mesic >= 1 && mesic <= 3)
    document.write('Je prvý štvrťrok.');
else if (mesic >= 4 && mesic <= 6)
    document.write('Je druhý štvrťrok.');
else if (mesic >= 7 && mesic <= 9)
    document.write('Je tretí štvrťrok.');
else if (mesic >= 10 && mesic <= 12)
    document.write('Je štvrtý štvrťrok.');

Ako ale použiť switch pre takýto príklad? Možno by vás napadol nasledujúce zápis.

const mesic = 11;
switch (mesic) {
    case 1:
        document.write('Je prvý štvrťrok.');
        break;
    case 2:
        document.write('Je prvý štvrťrok.');
        break;
    case 3:
        document.write('Je prvý štvrťrok.');
        break;
    case 4:
        document.write('Je druhý štvrťrok.');
        break;
    case 5:
        document.write('Je druhý štvrťrok.');
        break;
    case 6:
        document.write('Je druhý štvrťrok.');
        break;
    case 7:
        document.write('Je tretí štvrťrok.');
        break;
    case 8:
        document.write('Je tretí štvrťrok.');
        break;
    case 9:
        document.write('Je tretí štvrťrok.');
        break;
    case 10:
        document.write('Je štvrtý štvrťrok.');
        break;
    case 11:
        document.write('Je štvrtý štvrťrok.');
        break;
    case 12:
        document.write('Je štvrtý štvrťrok.');
        break;
}

Prepadávaniu

Príklad funguje spoľahlivo, problém však je, že sme si týmto zápisom moc nepomohli. Podobnému repetitivnímu kódu by sme sa vždy mali vyhýbať. Skúsme to ešte raz a využime tzv. Prepadávaniu. Ak potrebujeme vo viacerých blokoch case vykonávať rovnaký kód, stačí tieto bloky vložiť pod seba a neukončiť každý blok pomocou break, ale celú skupinu bloku jedným break. Neukončené bloky tak prepadnú a vykoná sa kód spoločný pre viac blokov:

const mesic = 11;
switch (mesic) {
    case 1:
    case 2:
    case 3:
        document.write('Je prvý štvrťrok.');
        break;
    case 4:
    case 5:
    case 6:
        document.write('Je druhý štvrťrok.');
        break;
    case 7:
    case 8:
    case 9:
        document.write('Je tretí štvrťrok.');
        break;
    case 10:
    case 11:
    case 12:
        document.write('Je štvrtý štvrťrok.');
        break;
}

Tento zápis je už oveľa prehľadnejšie. Konštrukcia switch má pridanú hodnotu v prípade, kedy nemôžeme použiť väčší / menší a ide o výpočet hodnôt, tu je to skôr redundantný kód.

Ukážka aplikácie v prehliadači:

Prepadávaniu používajte vo switch len pokiaľ k nemu máte dobrý dôvod, avšak je dôležité, aby ste ho vedeli čítať, keď na neho niekde narazíte.

Ternárne operátor

Teraz si predstavme naopak niečo veľmi užitočného. Často sa nám stáva, že niekde potrebujeme rôzne hodnoty podľa toho, či platia nejaké podmienka. Predstavme si, že máme napr. Pohlavia užívateľa uložené ako Boolean (muž by bol true) a my by sme ho chceli previesť do textu. S doterajšími znalosťami by sme napísali asi taký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ískať hodnotu podľa platnosti logického výrazu môžeme s využitím tzv. Ternárního výrazu:

let muz = true; // nejaká premenná udávajúci pohlavia
let nazevPohlavi = (muz) ? 'muž' : 'žena';
document.write(nazevPohlavi);

Podmienku vložíme väčšinou do zátvorky, potom nasleduje otáznik a 2 hodnoty, ktoré sa majú vrátiť. Hodnoty sú oddelené dvojbodkou, prvá sa vráti keď podmienka platí a druhá keď neplatí. Namiesto typu Boolean by sme mohli do zátvorky samozrejme napísať akúkoľvek inú podmienku, napr. (vek >= 18) ? ' plnoletý ' : ' maloletý '.

V budúcej lekcii, Textové reťazce v JavaScripte druhýkrát - Práca so znakmi , sa budeme venovať práci s obrázkami.

V budúcej lekcii, Textové reťazce v JavaScripte druhýkrát - Práca so znakmi , sa naučíme pristupovať k jednotlivým znakom reťazca a používať ASCII hodnoty.