Lekce 12 - Striktní operátory a přetypování v JavaScriptu

V minulé lekci, Dokončení editoru tabulek v JavaScriptu, jsme dokončili editor tabulek. V předešlé lekci o podmínkách, Podmínky v JavaScriptu jsme si slíbili, že se k nim v kurzu ještě jednou vrátíme. V dnešní lekci si proto ukážeme časté problémy s používáním podmínek.

Striktní operátory podruhé

Již jsme se setkali s operátory ==, ===, !=, !== a porovnáváním různých datových typů. Pro připomenutí si ukážeme příklad, který demonstruje rozdíl mezi porovnáváním hodnotou operátorem == a porovnáváním hodnotou a typem operátorem ===:

if (1 == '1')
    document.write('Rovnost hodnotou.');
if (1 === '1')
    document.write('Rovnost hodnotou a typem.');

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

První podmínka se vyhodnotí jako pravdivá, protože se porovnávají jen hodnoty. Přesněji zde nejprve dojde k přetypování textu '1' (string) na číslo 1 (number) a následné porovnání se vyhodnotí jako true.

U druhé podmínky kvůli striktnímu operátoru === k přetypování nedochází, proto se vyhodnotí jako false, protože číslo se takto nemůže rovnat textu.

Přetypování je v JavaScriptu poměrně komplikované téma a vydalo by na celý samostatný kurz. My mu věnujeme tuto samostatnou lekci. Ukážeme si, jak se vyhnout častým problémům s přetypováním a kde nám naopak přetypování pomůže psát přehlednější kód.

Volba operátoru

Jaký operátor pro porovnání tedy používat? Dobrým zvykem je používat striktní operátory === a !== a nedovolit tak žádnému přetypování při porovnávání.

Používání operátorů == a != při porovnávání různých datových typů může mít totiž nečekané výsledky, protože pravidla pro přetypování jsou mnohdy matoucí. Vzpomínáte si na úvodní lekci, kde jsme si řekli, že JavaScript byl navržený za 14 dní? Pro ukázku se podívejme na pár typických výsledků přetypování, které bychom asi nečekali:

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

Zkuste se zamyslet, proč byly podmínky takto vyhodnoceny. Nejste si jisti nebo nevíte? Nevadí, stačí požívat striktní operátor ===, který se bude chovat podle očekávání. Předchozí ukázka s operátorem === by se vždy vyhodnotila jako false.

Kompletní tabulku s přetypováním různých hodnot a datových typů při porovnávání operátorem == naleznete na: https://dorey.github.io/…ality-Table/

Zkrácení podmínek pomocí přetypování

Zatím jsme si ukázali jen problémy spojené s přetypováním a možnost jak se jim vyhnout pomocí striktních operátorů. Teď si ukážeme několik příkladů, kde naopak přetypování využijeme ve svůj prospěch.

Ověření neprázdného řetězce

Mějme následující příklad: Uživatel nám zadá své jméno a my chceme zkontrolovat, zda ho opravdu zadal. Budeme tedy kontrolovat, zda má zadané jméno větší délku než 0. Příklad by mohl vypadat následovně:

const jmeno = prompt('Vyplňte vaše jméno');
if (jmeno.length > 0)
    document.write('Jméno vyplněno.');
else
    document.write('Jméno nebylo vyplněno.');

Díky přetypování můžeme podmínku zkrátit pouze na:

const jmeno = prompt('Vyplňte vaše jméno');
if (jmeno.length)
    document.write('Jméno vyplněno.');
else
    document.write('Jméno nebylo vyplněno.');

Vlastnost length je typu number, který se při hodnotě 0 vyhodnotí jako false a při jakékoli jiné jako true.

Tu samou podmínku můžeme dokonce zapsat i jen takto:

const jmeno = prompt('Vyplňte vaše jméno');
if (jmeno)
    document.write('Jméno vyplněno.');
else
    document.write('Jméno nebylo vyplněno.');

Pokud by jméno nebylo vyplněno a místo něj byl uložený prázdný řetězec '', dojde k přetypování na false. V opačném případě na true. Tyto zkrácené zápisy budeme ve svých skriptech preferovat.

Ověření neprázdného pole

Podobným postupem můžeme ověřit, zda máme prázdné pole nebo zda pole něco obsahuje:

const pole = [1, 2, 3];
if (pole.length)
    document.write('Pole není prázdné.');
else
    document.write('Pole je prázdné.');

Zde pozor! Na rozdíl od řetězce, který se prázdný vyhodnotí jako false, se prázdné pole vyhodnotí jako true! Proto se u pole musíme ptát na jeho délku length. Výsledek v prohlížeči:

Podmínky s null

Praktický příklad použití null v podmínce nám umožní metoda getElementById(). Tato metoda vrací v případě úspěchu hledaný element a to jako datový typ object. V případě neúspěchu vrací null, čímž poznáme, že se daný element na stránce nenachází:

const htmlElement = document.getElementById('nejakyElement');
if (htmlElement !== null) {
    //nalezeno
    document.write('Element nalezen');
}
else {
    //nenalezeno
    document.write('Element nenalezen');
}

Jelikož se null přetypuje na false a object na true, můžeme podmínku zapsat i zkráceně:

const htmlElement = document.getElementById('nejakyElement');
if (htmlElement) {
    //nalezeno
    document.write('Element nalezen');
}
else {
    //nenalezeno
    document.write('Element nenalezen');
}

Výsledek:

Podmínky s undefined

Jistě si pamatujete, že datový typ undefined má proměnná, pokud ji deklarujeme a nepřiřadíme zatím žádnou hodnotu:

let promena;
document.write(typeof promena);

Výsledek:

Starší zápis výchozí hodnoty parametru

Praktický příklad může být použití funkce s nebo bez parametru, na který narazíte ve starších kódech. Tam se můžete setkat s následujícím zápisem:

function pozdrav(jazyk) {
    // výchozí hodnota
    if (jazyk === undefined)
        jazyk = 'en';

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

pozdrav();
pozdrav('cz');

Výsledek:

Funkce si nejprve otestuje, zda je zadaný parametr a pokud není, přiřadí mu výchozí hodnotu 'en'.

Protože se undefined přetypuje na false, tak by vás možná napadlo ve funkci napsat podmínku ve tvaru:

if (jazyk)
    jazyk = 'en';

To by v našem případě fungovalo, ale není to dobrý nápad. Zde je třeba myslet na to, že pokud předáváme string, tak prázdný string se opět vyhodnotí jako false. Stejný případ by mohl nastat v případě s číslem, kde by se předala 0. Zatímco prázdný jazyk nedává v případě parametru valný smysl, prázdný oddělovač hodnot nebo číslo 0 by již mohl být úmysl.

ES6 zápis výchozí hodnoty parametru

Vraťme se ještě k předchozímu příkladu. Díky ES6 jej lze zapsat ještě lépe, výchozí hodnotu můžeme přiřadit přímo k parametru a nemusíme tak ve funkci kontrolovat, zda byl parametr zadán:

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

pozdrav();
pozdrav('cz');

Výsledek:

To je k dnešní lekci o přetypování vše. Příště podmínky v JavaScriptu dokončíme lekcí Podmínky v JavaScriptu podruhé.