Lekce 15 - Vlastnosti objektů v JavaScriptu

V předešlém cvičení, Řešené úlohy k 14. lekci OOP v JavaScriptu, jsme si procvičili nabyté zkušenosti z předchozích lekcí.

V dnešním tutoriálu OOP v JavaScriptu si rozšíříme znalosti o vlastnostech objektů, naučíme se je přidávat, vypisovat a mazat.

Anonymní objekty

Předtím, než se zaměříme na jmenované činnosti, si připomeneme, jak lze v JavaScriptu vytvářet takzvané anonymní objekty. Již jsme se s nimi setkali v lekci Formát JSON.

U anonymních objektů nedefinujeme třídy, jako dosud, ale rovnou přímo konkrétní instanci s konkrétními hodnotami. Vytvořme si anonymní objekt člověka:

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

Vidíme, že zápis anonymního objektu je velice podobný formátu JSON. Do složených závorek jednoduše nadefinujeme vlastnosti objektu a přiřadíme jim hodnoty. Pokud je název vlastnosti validním názvem proměnné, nemusíme jej uvozovat do uvozovek.

Metody anonymního objektu

Metodu anonymnímu objektu definujeme tak, že vlastnosti přiřadíme funkci:

const clovek = {
    jmeno: 'Jan',
    vek: 45,
    pozdrav: function() {
        console.log('Zdravím!');
    }
};

Interně totiž metody objektů v JavaScriptu nejsou nic jiného, než pouhé funkce uložené do vlastností, a to i v případě instancí tříd. Třídy nám akorát poskytují příjemnější způsob, jak metody definovat.

Třídu Clovek bychom samozřejmě mohli deklarovat a od ní poté danou instanci vytvořit standardním způsobem. Do našeho příkladu potřebujeme však jen jednoho člověka a více jich nikdy nebude. V případech podobných tomuto je tedy mnohdy zbytečné třídu deklarovat.

Obšírněji se na anonymní objekty ještě jednou podíváme v lekci Anonymní objekty a prototypy v JavaScriptu.

Přidávání vlastností

Objekty jsou dynamické prvky JavaScriptu, tudíž jejich vlastnosti můžeme přidávat a mazat i po tom, co jsme je vytvořili. Nejobvyklejší zápis přidání vlastnosti je následující – napíšeme název objektu a operátorem tečky mu novou vlastnost přiřadíme. Přiřaďme našemu objektu člověka povolání:

const clovek = {
    jmeno: 'Jan',
    vek: 45,
    pozdrav: function() {
        console.log('Zdravím!');
    }
};

clovek.povolani = 'hasič';

Existuje ale ještě další způsob, jak vlastnost objektu přidat, a to je přes []. Za název objektu přidáme hranaté závorky a dovnitř vepíšeme název vlastnosti jako text. Tuto možnost můžeme používat například, pokud jméno vlastnosti předem neznáme a později ho budeme někde načítat z proměnné. Mějme objekt z předchozího příkladu a přidejme do něj stejnou vlastnost, akorát pomocí tohoto způsobu:

clovek['povolani'] = 'hasič';

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

Procházení vlastností

Někdy se nám stane, že budeme potřebovat vlastnosti našeho objektu například vypsat. Existuje více možností, jak to udělat. Pojďme si ukázat ty nejpoužívanější.

for..in cyklus

for..in cyklus funguje na téměř stejném principu jako klasický for cyklus. Místo deklarování nějaké proměnné a nastavování jejího opakování však deklarujeme pouze proměnnou, do které se v každé iteraci cyklu uloží vlastnost objektu. Iterací proběhne tolik, kolik je v objektu vlastností. Pojďme se podívat na pří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ázvem obdelnik, jeho vlastnosti jsou x a y. Objekt má také metodu nakresli() (nevšímejme si nyní toho, že funkce pouze vypisuje text do konzole). Po iteraci bude výpis v konzoli, kterou v prohlížeči otevřeme klávesou F12, vypadat takto:

Do každého indexu se nám vždy uložil název vlastnosti a vypsal se. Všimněme si, že i metoda nakresli() je skutečně považována za vlastnost a vypsala se.

Hodnoty vlastností

Pokud bychom chtěli vypsat i hodnoty vlastností, cyklus by vypadal následovně:

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

Používáme výše zmíněný přístup do vlastností přes hranaté závorky. Cyklus funguje následovně:

• Do proměnné index se uloží název první vlastnosti, v našem případě je to x (typu string).
• Nyní se dostáváme do druhé části výpisu, kde se použije získání hodnoty vlastnosti přes hranaté závorky. Do nich se vepíše index, který je typu string, tudíž dostaneme hodnotu této vlastnosti objektu.
• Takto se cyklus opakuje pro všechny vlastnosti.

Výsledek:

Metoda keys()

K výpisu také můžeme použít metodu keys(), kterou zavoláme na globální třídě Object. Do kulatých závorek poté napíšeme objekt, který chceme proiterovat. To celé uložíme do proměnné, kterou poté vypíšeme do konzole. Velká změna oproti for..in cyklu je, že názvy vlastností se vrátí jako pole:

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

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

Výsledek:

Metoda keys() je takzvaná statická metoda. Statické metody nenáleží instancím tříd, ale přímo samotným třídám. Jak takové metody tvořit, si ukážeme v lekci Statika v JavaScriptu.

Metoda values()

Tato metoda funguje na podobném principu jako keys(). Ale místo toho, aby vracela názvy vlastností, vrací jejich hodnoty. Pro přístup ke všem hodnotám objektu tedy nemusíme nejprve získat všechny názvy vlastností a následně iterovat přes objekt. Ukažme si to na příkladu:

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

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

Výsledek:

Pro získání názvů všech vlastností i jejich hodnot při jednom volání můžeme využít metodu Object.entries(). která vrací pole dvojic [název, hodnota] z předaného objektu.

Mazání vlastností

Vlastnosti můžeme objektu i smazat. Je to velice jednoduché, používá se k tomu klíčové slovo delete a název objektu s jeho vlastností, kterou chceme smazat:

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

delete obdelnik.x;

Pokud nyní vypíšeme do konzole obdelnik, uvidíme, že vlastnost x již nemá:

Zjištění přítomnosti vlastnosti na objektu

Občas je vhodné se ujistit, jestli se daná vlastnost nachází v daném objektu. K tomuto účelu můžeme použít standardní podmínku a v ní operátor in. Ukažme si to na obdélníku z předchozího příkladu:

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

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

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

Do konzole se vypíše pouze první hláška:

Metoda hasOwnProperty()

Ke stejnému účelu se dá ještě použít i metoda hasOwnProperty(), kterou nalezneme na všech objektech. Oproti operátoru in se však v jedné věci zásadně liší. Zatímco operátor in zjišťuje, jestli vlastnost v objektu existuje, ať už je jeho vlastní, nebo ji má poděděnou od svého předka, metoda hasOwnProperty() je přísnější. Používá se k ověření, zda je vlastnost definována přímo na samotném objektu, a ne na jeho předcích.

Toto chování si můžeme ověřit na následujícím příkladu:

class Tvar {
    nakresli() {
        console.log('nakresleno');
    }
}

class Obdelnik extends Tvar {
    x = 10;
    y = 20;
}

const obdelnik = new Obdelnik();

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

if (obdelnik.hasOwnProperty('nakresli')) {
    console.log('Vlastnost "nakresli" existuje!');
}

Výsledek:

Do konzole se vypsala pouze první hláška, protože metoda nakresli() je poděděná.

V příští lekci, Vlastnosti objektů v JavaScriptu - Data deskriptory, si představíme tzv. deskriptory vlastností objektů.