Lekce 12 - Striktní operátory a přetypování v JavaScriptu
V minulé lekci, Dokončení editoru tabulek v JavaScriptu, jsme se do editoru tabulek naučili vkládat sloupce a řádky před, za, nad, pod a taky je mazat.
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ě:
let 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:
let 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:
let 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:
let 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í:
let 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ě:
let 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.
V další lekci, Podmínky v JavaScriptu podruhé, si prohloubíme naše znalosti o datových typech a ukážeme si další konstrukce pro tvorbu podmínek.
Komentáře


Zobrazeno 9 zpráv z 9.