September discount week
Pouze tento týden sleva až 80 % na e-learning týkající se MS Office
50 % bodů zdarma na online výuku díky naší Slevové akci!

Lekce 13 - Podmínky v JavaScriptu podruhé

V minulé lekci, Striktní operátory a přetypování v JavaScriptu, jsme se podrobněn 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 shrneme přetypování v podmínkách, představíme si konstrukci switch s propadáváním a ternární operátor.

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:

Your page
localhost

Uveďme si slíbenou tabulku.

Zadaná hodnota v podmínce 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 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

Tento výukový obsah pomáhají rozvíjet následující firmy, které dost 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.

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

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ů:

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

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:

Podmínky
localhost

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ý'.

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 podruhé, se naučíme používat klíčová slova break, continue, návěstí a cyklus do-while.


 

Předchozí článek
Striktní operátory a přetypování v JavaScriptu
Všechny články v sekci
Základní konstrukce jazyka JavaScript
Článek pro vás napsal Roman
Avatar
Jak se ti líbí článek?
5 hlasů
Aktivity (6)

 

 

Komentáře

Avatar
Libor Řezníček:28.12.2019 20:30

Myslím si, že ak operátor nie je striktný, tak JS sa prioritne snaží výraz vyhodnotiť ako pravdivý. A ak sa mu to nepodarí, resp. by to bolo už absurdné, tak až potom dá false. Aspoň sa mi to tak vidí...

 
Odpovědět
28.12.2019 20:30
Avatar
Lubor Pešek
Člen
Avatar
Lubor Pešek:9. března 10:26

Technická - máte tam překlep v první větě:
"Téma přetypování z minulé lehce..."

Odpovědět
9. března 10:26
Existují dva způsoby, jak vyřešit problém. Za prvé vyhoďte počítač z okna. Za druhé vyhoďte okna z počítače.
Avatar
Lubor Pešek
Člen
Avatar
Lubor Pešek:9. března 10:33

Osobní názor (neberte to nikdo jako dogma, jen druhý pohled na věc)

Myslím, že by bylo jednodušší vysvětlit klíčové slov break, protože stejně jako ve switchi, tak je použitelný i v cyklu. Často se stává, že je potřeba cyklus za nějakých podmínek ukončit.
Klíčovým slovem break prostě vyskočíme ve ze smyčky (ať se jedná o for cyklus, while nebo switch).
No a tak bych vysvětlil i ten switch.
break znamená - vyskočení ze switche. Takže dokud na něj nenarazí, tak stále prochází podmínky (jednotlivé case).

Odpovědět
9. března 10:33
Existují dva způsoby, jak vyřešit problém. Za prvé vyhoďte počítač z okna. Za druhé vyhoďte okna z počítače.
Avatar
Jakub Podskalský:12. března 12:05

Maličkost, ale v poslední hodnotě ve switchi se break většinou nepíše, ne? Break přeci jen slouží k ukončení cyklu (tj. k ukončení dalšího porovnávání, v případě switche). Když dojde k poslední podmínce, tak už není potřeba to ukončovat klíčovým slovem break, když už nic dalšího nemůže ani pokračovat, protože je konec.

 
Odpovědět
12. března 12:05
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Odpovídá na Jakub Podskalský
Vladislav Ladicky:12. března 13:33

To je pravda, ale beztak je v princípe dobrým zvykom dávať break aj za posledný case. Ak budeš neskôr náhodou pridávať ďalší case, aspoň nezabudneš dať tomu predošlému break a vyhneš sa tak nepríjemnej chybe. Proste - nemusí tam byť, ale nie je úplne zlý nápad dávať ho tam beztak.

 
Odpovědět
12. března 13:33
Avatar
Lubor Pešek
Člen
Avatar
Odpovídá na Vladislav Ladicky
Lubor Pešek:12. března 13:41

A ty dáváš za default value další case?

Odpovědět
12. března 13:41
Existují dva způsoby, jak vyřešit problém. Za prvé vyhoďte počítač z okna. Za druhé vyhoďte okna z počítače.
Avatar
Odpovídá na Lubor Pešek
Vladislav Ladicky:12. března 14:00

Nedávam. Ty snáď dávaš? Alebo vidíš hore v príkladoch break aj pre default hodnotu? Lebo ja tam nevidím ani len to default...

Hezkej pokus, ale neprekrúcaj moje slová. Jasne som písal, že za posledný case sa zvykne dávať break, aj keď nie je nutný. O default vôbec nebola reč. Default nie je ani hore v príkladoch, aj ty sám si hovoril o poslednom case, nie o default.

 
Odpovědět
12. března 14:00
Avatar
Lubor Pešek
Člen
Avatar
Odpovídá na Vladislav Ladicky
Lubor Pešek:12. března 14:13

No ty kombinuješ totiž dvě věci dohromady.
Je zvykem dávat jako poslední case defaultní hodnotu, protože když už se používá enum, tak je to většinou jako číselník z databáze či variace na základě nějakého vstupu.
No a u rozsáhlých projektů musíš ošetřovat každou možnost, která by mohla nastat.

A i když máš výčtový typ se striktně danými hodnotami, které z největší pravděpodobností nebudeš rozšiřovat, tak v defaultní hodnotě bys měl vždycky ošetřit nežádoucí vstup.Už jen kvůli debugu či kvůli testování.

PS: opět jsi ukázal, že neumíš pořádně číst. Já jsem se nebavil o tomto konkrétním příkladě. Ty jsi napsal, že se obvykle dává za poslední case break, tak jsem se tě (a myslím si, že velmi slušně) zeptal, jestli dáváš za default value další case, protože je zvykem default value dávat jako poslední case.
Proto to není třeba, protože v případě rozšíření to dáváš mezi poslední možnost a výchozí hodnotu.

Odpovědět
12. března 14:13
Existují dva způsoby, jak vyřešit problém. Za prvé vyhoďte počítač z okna. Za druhé vyhoďte okna z počítače.
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 8 zpráv z 8.