Lekce 17 - Vlastnosti objektů v JavaScriptu

V předešlém cvičení, Řešené úlohy k 16. 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 zmíněné činnosti, připomeneme si, 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ích objektů

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 jen poskytují příjemnější způsob, jak metody definovat.

Třídu Clovek bychom samozřejmě mohli deklarovat a poté z ní vytvořit instanci 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 pomocí []. 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žít například tehdy, pokud jméno vlastnosti předem neznáme a později ho budeme 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č';

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 můžeme použít také metodu 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á.

Vzhledem k tomu, že hasOwnProperty() lze přepsat na objektu, objevila se v novějších verzích JavaScriptu modernější alternativa Object.hasOwn(objekt, vlastnost).

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

Cyklus for..in funguje na podobném principu jako klasický cyklus for. 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. Cyklus proběhne tolikrát, kolik má objekt 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 proměnné index se v každé iteraci uložil název vlastnosti a ten se následně vypsal. 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ím objektu Object. Do kulatých závorek poté napíšeme objekt, který chceme proiterovat. Vrácené pole uložíme do proměnné a poté ho vypíšeme do konzole. Oproti cyklu for..in je rozdíl v tom, že vrací pouze vlastní vlastnosti objektu, nikoli zděděné. Navíc se názvy vlastností vrací 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ž neobsahuje:

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