12. diel - Striktné operátormi a pretypovanie v JavaScripte

V minulej lekcii, Poľa v JavaScripte druhýkrát - Radenie prvkov a 2D poľa , sme sa naučili zoradiť prvky v poli a ukázali si prácu s dvojrozmerným poľom.

V minulej lekcii, Poľa v JavaScripte druhýkrát - Radenie prvkov a 2D poľa , sme dokončili editor tabuliek. V predošlej lekcii o podmienkach, Podmienky v JavaScripte sme si sľúbili, že sa k nim v kurze ešte raz vrátime. V dnešnej lekcii si preto ukážeme časté problémy s používaním podmienok.

Striktné operátormi druhýkrát

Už sme sa stretli s operátormi ==, ===, !=, !== a porovnávaním rôznych dátových typov. Pre pripomenutie si ukážeme príklad, ktorý demonštruje rozdiel medzi porovnávaním hodnotou operátorom == a porovnávaním hodnotou a typom operátorom ===:

if (1 == '1')
    document.write('Rovnosť hodnotou.');
if (1 === '1')
    document.write('Rovnosť hodnotou a typom.');

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

Prvá podmienka sa vyhodnotí ako pravdivá, pretože sa porovnávajú len hodnoty. Presnejšie tu najprv dôjde k pretypovanie texte '1' (string) na číslo 1 (number) a následné porovnanie sa vyhodnotí ako true.

U druhej podmienky kvôli striktnému operátoru === k pretypovanie nedochádza, preto sa vyhodnotí ako false, pretože číslo sa takto nemôže rovnať textu.

Pretypovanie je v JavaScripte pomerne komplikované tému a vydalo by na celý samostatný kurz. My mu venujeme túto samostatnú lekciu. Ukážeme si, ako sa vyhnúť častým problémom s přetypováním a kde nám naopak pretypovanie pomôže písať prehľadnejšie kód.

Voľba operátora

Aký operátor pre porovnanie teda používať? Dobrým zvykom je používať striktné operátormi === a !== a nedovoliť tak žiadnemu pretypovanie pri porovnávaní.

Používanie operátorov == a != Pri porovnávaní rôznych dátových typov môže mať totiž nečakané výsledky, pretože pravidlá pre pretypovania sú mnohokrát mätúce. Spomínate si na úvodnú lekciu, kde sme si povedali, že JavaScript bol navrhnutý za 14 dní? Pre ukážku sa pozrime na pár typických výsledkov pretypovanie, ktoré by sme asi nečakali:

if ('' == '0') // false
if (0 == '') // true
if (0 == '0') // true
if (false == 'false') // false
if (false == '0') // true
if (false == undefined) // false
if (false == null) // false
if (null == undefined) // true

Skúste sa zamyslieť, prečo boli podmienky takto vyhodnotené. Nie ste si istí alebo neviete? Nevadí, stačí požívať striktné operátor ===, ktorý sa bude správať podľa očakávania. Predchádzajúci ukážka s operátorom === by sa vždy vyhodnotila ako false.

Kompletné tabuľku s přetypováním rôznych hodnôt a dátových typov pri porovnávaní operátorom == nájdete na: https://dorey.github.io/...ality-Table/

Skrátenie podmienok pomocou pretypovania

Zatiaľ sme si ukázali len problémy spojené s přetypováním a možnosť ako sa im vyhnúť pomocou striktných operátorov. Teraz si ukážeme niekoľko príkladov, kde naopak pretypovanie využijeme vo svoj prospech.

Overenie neprázdneho reťazca

Majme nasledujúci príklad: Užívateľ nám zadá svoje meno a my chceme skontrolovať, či ho naozaj zadal. Budeme teda kontrolovať, či má zadané meno väčšiu dĺžku než 0. Príklad by mohol vyzerať nasledovne:

const jmeno = prompt('Vyplňte vaše meno');
if (jmeno.length > 0)
    document.write('Meno vyplnené.');
else
    document.write('Meno nebolo vyplnené.');

Vďaka pretypovanie môžeme podmienku skrátiť iba na:

const jmeno = prompt('Vyplňte vaše meno');
if (jmeno.length)
    document.write('Meno vyplnené.');
else
    document.write('Meno nebolo vyplnené.');

Vlastnosť length je typu number, ktorý sa pri hodnote 0 vyhodnotí ako false a pri akejkoľvek inej ako true.

Tú istú podmienku môžeme dokonca zapísať aj len takto:

const jmeno = prompt('Vyplňte vaše meno');
if (jmeno)
    document.write('Meno vyplnené.');
else
    document.write('Meno nebolo vyplnené.');

Ak by meno nebolo vyplnené a namiesto neho bol uložený prázdny reťazec '', dôjde k pretypovanie na false. V opačnom prípade na true. Tieto skrátené zápisy budeme vo svojich skriptoch preferovať.

Overenie neprázdneho pole

Podobným postupom môžeme overiť, či máme prázdne pole alebo či pole niečo obsahuje:

const pole = [1, 2, 3];
if (pole.length)
    document.write('Pole nie je prázdne.');
else
    document.write('Pole je prázdne.');

Tu pozor! Na rozdiel od reťazca, ktorý sa prázdny vyhodnotí ako false, sa prázdne pole vyhodnotí ako true ! Preto sa u poľa musíme pýtať na jeho dĺžku length. Výsledok v prehliadači:

Podmienky s null

Praktický príklad použitia null v podmienke nám umožní metóda getElementById(). Táto metóda vracia v prípade úspechu hľadaný element a to ako dátový typ object. V prípade neúspechu vracia null, čím spoznáme, že sa daný element na stránke nenachádza:

const htmlElement = document.getElementById('nejakyElement');
if (htmlElement !== null) {
    //nalezeno
    document.write('Element nájdený');
}
else {
    //nenalezeno
    document.write('Element nenájdený');
}

Keďže sa null přetypuje na false a object na true, môžeme podmienku zapísať aj skrátene:

const htmlElement = document.getElementById('nejakyElement');
if (htmlElement) {
    //nalezeno
    document.write('Element nájdený');
}
else {
    //nenalezeno
    document.write('Element nenájdený');
}

výsledok:

Podmienky s undefined

Iste si pamätáte, že dátový typ undefined má premenná, pokiaľ ju deklarujeme a nepriradíte zatiaľ žiadnu hodnotu:

let promena;
document.write(typeof promena);

výsledok:

Staršie zápis predvolené hodnoty parametra

Praktický príklad môže byť použitie funkcie s alebo bez parametra, na ktorý narazíte v starších kódoch. Tam sa môžete stretnúť s nasledujúcim zápisom:

function pozdrav(jazyk) {
    // predvolená hodnota
    if (jazyk === undefined)
        jazyk = 'en';

    if (jazyk === 'en')
        document.write('Hello World!');
    else if (jazyk === 'cz')
        document.write('Ahoj svete!');
    //...
}

pozdrav();
pozdrav('cz');

výsledok:

Funkcia si najprv otestuje, či je zadaný parameter a ak nie je, priradí mu predvolenú hodnotu 'en'.

Pretože sa undefined přetypuje na false, tak by vás možno napadlo vo funkcii napísať podmienku v tvare:

if (jazyk)
    jazyk = 'en';

To by v našom prípade fungovalo, ale nie je to dobrý nápad. Tu je potrebné myslieť na to, že ak odovzdávame string, tak prázdny string sa opäť vyhodnotí ako false. Rovnaký prípad by mohol nastať v prípade s číslom, kde by sa odovzdala 0. Kým prázdny jazyk nedáva v prípade parametra veľký zmysel, prázdny oddeľovač hodnôt alebo číslo 0 by už mohol byť úmysel.

ES6 zápis predvolené hodnoty parametra

Vráťme sa ešte k predchádzajúcemu príkladu. Vďaka ES6 ho možno zapísať ešte lepšie, predvolenú hodnotu môžeme priradiť priamo k parametru a nemusíme tak vo funkcii kontrolovať, či bol parameter zadaný:

function pozdrav(jazyk = 'en') {
    if (jazyk === 'en')
        document.write('Hello World!');
    else if (jazyk === 'cz')
        document.write('Ahoj svete!');
    //...
}

pozdrav();
pozdrav('cz');

výsledok:

To je k dnešnej lekcii o pretypovanie všetko. Nabudúce podmienky v JavaScripte dokončíme lekcií Podmienky v JavaScripte druhýkrát .

 

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š.