10. diel - Vlastnosti objektov v JavaScripte

V minulej lekcii, Dedičnosť a polymorfizmus v JavaScripte , sme sa naučili používať OOP techniky dedičnosť a polymorfizmus. Dnes si rozšírime vedomosti o vlastnostiach objektov, naučíme sa ich pridávať, vypisovať a mazať. Ešte než sa na to priamo vrhnene, poďme si v rýchlosti zopakovať, ako sa vlastnosti u objektov dajú vlastne tvoriť.

Pridávanie vlastností

Objekty sú dynamické prvky JavaScriptu, teda ich vlastnosti môžeme pridávať a mazať aj po tom, čo sme ich vytvorili. Najobvyklejšie zápis pridanie vlastnosti je nasledovné: napíšeme názov objektu a operátorom bodky mu novú vlastnosť priradíme:

const clovek = {
    jmeno: 'Jan',
    vek: 45
}

clovek.povolani = 'hasič';

Pre zjednodušenie sme nedefinovali triedu Clovek, ako doteraz, ale rovno priamo konkrétnu inštanciu s konkrétnymi hodnotami. Potrebujeme totiž len jedného človeka do príkladu a viac ich nikdy nebude. Triedu Clovek by sme samozrejme mohli vytvoriť a od nej potom takúto inštanciu vytvoriť štandardným spôsobom.

Existuje ale ešte ďalší spôsob ako vlastnosť objektu pridať a to je cez []. Za názov objektu pridáme hranaté zátvorky a dovnútra Vpíšte názov vlastnosti ako text. Túto možnosť môžeme používať napr. Ak meno vlastnosti vopred nepoznáme a neskôr ho budeme niekde načítavať z premennej. Majme objekt z predchádzajúceho príkladu a pridajme do neho rovnakú vlastnosť, akurát pomocou tejto metódy:

clovek['povolani'] = 'hasič';
// nebo
const nazevVlastnosti = 'povolani';
clovek[nazevVlastnosti] = 'hasič';

Prechádzanie vlastností

Niekedy sa nám stane, že budeme potrebovať vlastnosti nášho objektu napr. Vypísať. Existuje viac možností, ako to urobiť, poďme si ukázať tie najpoužívanejšie.

For..in cyklus

for.. in cyklus funguje na takmer rovnakom princípe ako klasický for cyklus, miesto deklarovaní nejaké premenné a nastavovanie jej opakovania však deklarujeme iba premennú, do ktorej sa v každej iterácii cyklu uloží vlastnosť objektu. Iterácií prebehne toľko, koľko je v objekte vlastností. Poďme sa pozrieť na príklad:

const obdelnik = {
    x: 10,
    y: 20,
    nakresli: function() {
        console.log('nakresleno');
    }
}

for (let index in obdelnik) {
    console.log(index);
}

Máme objekt s názov obdelnik, jeho vlastnosti sú x, y a má metódu nakresli() (nevšímajme si teraz toho, že funkcia iba vypisuje text do konzoly). Po iterácii by mal výpis v konzole, ktorú v prehliadači otvoríme klávesom F12, vyzerať takto:

Do každého indexu sa nám vždy uložil názov vlastnosti a vypísali sa. Ak by sme chceli vypísať aj hodnoty vlastností, cyklus by vyzeral nasledovne:

for (let index in obdelnik) {
    console.log(index, obdelnik[index]);
}

Používame vyššie spomínaný prístup do vlastností cez hranaté zátvorky. Cyklus funguje nasledovne:

• do premennej index sa uloží prvý vlastnosť, v našom prípade je to "x" (vo formáte string)
• teraz sa dostávame do druhej časti logu, kde sa použije výpis vlastností cez hranaté zátvorky, do ktorých sa vpíše index, ktorý je vo formáte string, teda dostaneme hodnotu tejto vlastnosti objektu
• takto sa cyklus opakuje pre všetky vlastnosti

Metóda keys ()

K výpisu tiež môžeme použiť metódu keys(), ktorú zavoláme na globálne triede Object. Do okrúhlych zátvoriek potom napíšeme objekt, ktorý chceme proiterovat. To celé uložíme do premennej, ktorú potom vypíšeme do konzoly. Veľká zmena oproti for.. in cyklu je, že vlastnosti sa vráti ako pole:

const obdelnik = {
    x: 10,
    y: 20,
    nakresli: function() {
        console.log('nakresleno');
    }
}

const keys = Object.keys(obdelnik);
console.log(keys);

a výsledok:

Na podobnom princípe funguje ešte metóda entries().

Zistenie prítomnosti vlastnosti na objekte

Občas je vhodné sa uistiť, či sa daná vlastnosť nachádza v danom objekte. K tomuto účelu môžeme použiť štandardné podmienku a v nej operátor in. Ukážme si to na obdĺžnika z minulého príkladu:

const obdelnik = {
    x: 10,
    y: 20,
    nakresli: function() {
        console.log('nakresleno');
    }
}

if ('x' in obdelnik) {
    console.log('Vlastnost existuje!');
}

Ak x v našom objekte existuje, do konzoly sa vypíše hláška.

Mazanie vlastností

Vlastnosti môžeme objektu i zmazať. Je to veľmi jednoduché, používa sa k tomu kľúčové slovo delete a názov objektu s jeho vlastností, ktorú chceme zmazať:

const obdelnik = {
    x: 10,
    y: 20,
    nakresli: function() {
        console.log('nakresleno');
    }
}

delete obdelnik.x;

Ak teraz vypíšeme do konzoly obdelnik, uvidíme, že vlastnosť x už nemá:

V budúcej lekcii, Ajaxu v JavaScripte - Základné otázky , budeme s vlastnosťami objektov pokračovať a predstavíme si tzv. Deskriptory.

V budúcej lekcii, Ajaxu v JavaScripte - Základné otázky , na nás čaká populárnej technológie AJAX!