21. diel - Podmienky v JavaScripte tretíkrát

V minulej lekcii, Striktné operátory a pretypovanie v JavaScripte , sme sa podrobne venovali pretypovaniu v JavaScripte, naučili sa skrátený zápis podmienok a vieme sa vyvarovať mnohým úskaliam pomocou striktných operátorov.

V dnešnom tutoriále základov JavaScriptu si predstavíme ďalšie dve konštrukcie, ktoré súvisia s podmienkami. Jedná sa o ternárny operátor a konštrukciu switch s prepadávaním.

Ternárny operátor

Často sa nám stáva, že niekde potrebujeme nastaviť iba dve rôzne hodnoty podľa toho, či platí nejaká podmienka.

Výpis pohlavia pomocou podmienky

Predstavme si, že máme napríklad pohlavie použí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 man = true; // variable indicating a gender
let gender;
if (man)
    gender = 'man';
else
    gender = 'woman';
document.write(gender);

Výstup programu je samozrejme nasledujúci:

Kód je pomerne ukecaný na to, že len prepína medzi dvoma hodnotami. Preto programovacie jazyky často podporujú tzv. ternárny výraz.

Syntax ternárneho výrazu

Získať hodnotu podľa platnosti logického výrazu môžeme s využitím tzv. ternárneho výrazu. Jeho syntax je nasledovná:

(condition) ? true : false

Podmienku vložíme väčšinou do zátvorky (), potom nasleduje otáznik ? a dve hodnoty, ktoré sa majú vrátiť. Hodnoty sú oddelené dvojbodkou :. Prvá hodnota true sa vráti, keď podmienka platí. Druhá hodnota false, keď podmienka neplatí. Ako ľahké! Názov operátora je odvodený od toho, že má tri časti (podmienka, prvá hodnota a druhá hodnota), preto ternárne.

Výpis pohlavia pomocou ternárneho výrazu

Poďme si ternárny operátor vyskúšať na príklade s pohlavím:

let man = true; // variable indicating a gender
let gender = (man) ? 'man' : 'woman';
document.write(gender);

V prehliadači získame rovnaký výstup ako pri príklade vyššie:

Namiesto premennej typu boolean by sme mohli do zátvorky samozrejme napísať akúkoľvek inú podmienku, napríklad (age >= 18) ? ' of legal age ' : ' a minor '. V prípade jednoduchých výrazov môžeme zátvorku aj vynechať.

Vnorenie ternárnych operátorov

Ternárne operátory je možné teoreticky zanárať do seba a tým reagovať aj na tri a viac hodnôt. Avšak vo väčšine prípadov zanáranie skôr kód zneprehľadní, vznikajú totiž dlhé alebo podivne zalomené riadky a nie je na prvý pohľad vidieť, aká časť sa kedy spustí. Ukážme si, ako by sa pomocou vnorovania ternárnych výrazov vyriešil výpis troch smajlíkov:

let smiley = ":("; // variable indicating a smiley face
let mood = (smiley === ":)") ? "happy" : (smiley === ":(") ? "sad" : "unknown";
document.write(mood);

Výstup:

Prepínanie hodnoty boolean premennej

Ukážme si posledný príklad. V lekcii Podmienky druhýkrát: Konštrukcia switch v JavaScripte sme si ukazovali, ako skrátiť kód pre zmenu boolean hodnoty. Výsledkom bol zápis:

let isLightShining = false;
isLightShining = !isLightShining; // we switch the state of the light

if (isLightShining)
    document.write("The light was off, we turned it on.");
else
    document.write("The light was on, we turned it off.");

Ternárny operátor nám umožňuje existujúci kód ešte skrátiť:

let isLightShining = false;
isLightShining = !isLightShining;

document.write(isLightShining ? "The light was off, we turned it on." : "The light was on, we turned it off.");

Konštrukcia switch s prepadávaním

S konštrukciou switch sme sa už stretli. Tu si ukážeme jej ďalšie použitie. Na rozdiel od ternárneho operátora ide ale skôr o historickú funkčnosť, pre ktorú dnes nie je veľa rozumného využitia. Stále je ale súčasťou JavaScriptu a môžeme na ňu naraziť v cudzích zdrojových kódoch.

Výpis štvrťroku

Predpokladajme, že chceme podľa mesiaca v roku zistiť aký je štvrťrok. Pomocou if a else by príklad vyzeral nasledovne:

let month = 11;
if (month >= 1 && month <= 3)
    document.write('It is the first quarter.');
else if (month >= 4 && month <= 6)
    document.write('It is the second quarter.');
else if (month >= 7 && month <= 9)
    document.write('It is the third quarter.');
else if (month >= 10 && month <= 12)
    document. Write('It is the fourth quarter.');

Ako ale použiť switch pre tento príklad? Mohlo by nás napadnúť nasledujúce riešenie:

let month = 11;
switch (month) {
    case 1:
        document.write('It is the first quarter.');
        break;
    case 2:
        document.write('It is the first quarter.');
        break;
    case 3:
        document.write('It is the first quarter.');
        break;
    case 4:
        document.write('It is the second quarter.');
        break;
    case 5:
        document.write('It is the second quarter.');
        break;
    case 6:
        document.write('It is the second quarter.');
        break;
    case 7:
        document.write('It is the third quarter.');
        break;
    case 8:
        document.write('It is the third quarter.');
        break;
    case 9:
        document.write('It is the third quarter.');
        break;
    case 10:
        document.write('It is the fourth quarter.');
        break;
    case 11:
        document.write('It is the fourth quarter.');
        break;
    case 12:
        document.write('It is the fourth quarter.');
        break;
}

Príklad funguje spoľahlivo, problém však je, že sme si týmto zápisom veľmi nepomohli. Podobnému repetitívnemu kódu by sme sa vždy mali vyhýbať.

Prepadávanie

Skúsme to ešte raz a využime tzv. prepadávanie.

Pokiaľ potrebujeme vo viacerých blokoch case vykonávať rovnaký kód, stačí tieto bloky vložiť pod seba a neukončovať každý blok pomocou príkazu break, ale celú skupinu bloku jedným príkazom break. Neukončené bloky tak prepadnú a vykoná sa kód spoločný pre viac blokov:

let month = 11;
switch (month) {
    case 1:
    case 2:
    case 3:
        document.write('It is the first quarter.');
        break;
    case 4:
    case 5:
    case 6:
        document.write('It is the second quarter.');
        break;
    case 7:
    case 8:
    case 9:
        document.write('It is the third quarter.');
        break;
    case 10:
    case 11:
    case 12:
        document.write('It is the fourth quarter.');
        break;
}

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

Tento zápis je už oveľa prehľadnejší. Konštrukcia switch má však pridanú hodnotu skôr v prípade, keď nemôžeme hodnoty porovnať v podmienke pomocou operátora väčší alebo menší a ide o zoznam hodnôt. Tu je to skôr redundantný kód plný prázdnych case.

JavaScript podporuje prepadávanie ako prázdnych case, tak na rozdiel od iných jazykov aj case s ďalším kódom. To je častá príčina nechcených chýb (zabudnutých break), ktoré sa potom veľmi ťažko hľadajú.

Čo toto varovanie znamená si ukážeme na ďalšom príklade.

Ak sa vyhodnotí jedno case ako pravdivé, vykonajú sa inštrukcie pre tento case a potom sa pokračuje vykonávanie kódu aj ďalších case bez ohľadu na to, či sú splnené. Takto program pokračuje, kým nenarazí na príkaz break:

let grade = 1;
switch (grade) {
  case 1:
    document.write("Hurray, I got an A!");
    // it falls into the next case (because no break was used)
  case 2:
    document.write("B is alright.");
    break;
  case 3:
    document.write("C is still good.");
    break;
  // another case
}

Pretože v prvom case chýba príkaz break, v prehliadači sa nám vypíše aj text druhého case:

Prepadávanie používajte v konštrukcii switch len pokiaľ k nemu máte dobrý dôvod, ale je dôležité, aby ste ho vedeli čítať, keď naň niekde narazíte.

Rovnako ako k podmienkam je v JavaScripte aj ešte pár ďalších drobností k cyklom, o nich si povieme ale inokedy

V ďalšej lekcii, Cykly v JavaScripte tretíkrát , sa naučíme používať kľúčové slová break, continue, návestia a cyklus do - while.

 

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.