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š.
Stiahnuť
Stiahnutím nasledujúceho súboru súhlasíš s licenčnými podmienkami
Stiahnuté 43x (1.32 kB)
Aplikácia je vrátane zdrojových kódov v jazyku JavaScript