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í.

Dnes si rozšíříme znalosti o vlastnostech objektů, naučíme se je přidávat, vypisovat a mazat. Ještě než se na to přímo vrhnene, pojďme si v rychlosti zopakovat, jak se vlastnosti u objektů dají vlastně tvořit.

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:

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

clovek.povolani = 'hasič';

Pro zjednodušení jsme nedefinovali třídu Clovek, jako doposud, ale rovnou přímo konkrétní instanci s konkrétními hodnotami. Potřebujeme totiž jen jednoho člověka do příkladu a více jich nikdy nebude. Třídu Clovek bychom samozřejmě mohli vytvořit a od ní poté takovouto instanci vytvořit standardním způsobem.

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ř vpíšeme název vlastnosti jako text. Tuto možnost můžeme používat např. 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í této metody:

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ř. 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ázev obdelnik, jeho vlastnosti jsou x, y a má metodu nakresli() (nevšímejme si nyní toho, že funkce pouze vypisuje text do konzole). Po iteraci by měl 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 vypsali se. 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ží první vlastnost, v našem případě je to "x" (ve formátu string)
• nyní se dostáváme do druhé části logu, kde se použije výpis vlastností přes hranaté závorky, do kterých se vepíše index, který je ve formátu 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 vlastnosti se vrátí jako pole:

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

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

a výsledek:

Na podobném principu funguje ještě metoda entries().

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 minulého příkladu:

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

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

Pokud x v našem objektu existuje, do konzole se vypíše hláška.

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á:

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