JavaScript Objektumok – programozás kezdőknek

A JavaScript programozás kezdőknek mini tanfolyamban a JavaScript alapjairól tanulhatsz. Az előző részben a tömbökkel foglalkoztunk. A mostani rész témája a JavaScript objektumok.

Az Object típus egy adatstruktúra, amelyben kulcsok és értékek szerepelnek. A kulcsok típusa String vagy Symbol lehet. Az értékek tetszőlegesek.

Most csak String kulcsokkal foglalkozunk. A Symbol kulcsok haladó témakörnek számítanak.

JavaScript objektumok létrehozása

A JavaScript objektum egy olyan gép, amely egy kulcsot vár, és egy értéket ad vissza. A JavaScript objektum másik neve asszociatív tömb (associative array). Az asszociatív tömb olyan, mint az emberi memória. Ahhoz, hogy egy emléket előhívjunk, egy asszociációra, egy fogasra van szükségünk. Ez a kulcs. Az asszociatív memória és az asszociatív tömb is tartalommal címezhető.

let author = {
  name: null,
  website: "zsoltnagy.eu",
  age: 35
}

console.table( author );

A fenti programot a Chrome developer tools konzoljában futtasd le. Láthatod, hogy a console.table táblázatos formában sorolja fel az author objektum kulcsait és értékeit.

Hasonlóan a console.log( author ) is logolja az author objektumot, de itt egy kattintással lehet azt kibontani és hozzáférni az értékekhez.

Hozzáférés egy objektum adattagjaihoz

Az author objektum adattagjaihoz egy pont segítségével férhetünk hozzá. Az author.name például a name adattag értékéhez ad hozzáférést mind olvasásra, mind írásra. Az olvasás itt az érték kinyerését szolgálja, pl. console.log( author.name ). Az írás az érték megváltoztatását, pl. author.name = "Zsolt":

author.name = "Zsolt";
console.log( author.name, author.website )
// Prints: Zsolt zsoltnagy.eu

Egy objektum adattagja törölhető a delete operátor segítségével:

delete author.name
console.log( "Author name: ", author.name )
// Prints: Author name: undefined

Az objektumban mezők, adattagok vannak. Kétféleképp hivatkozhatunk egy objektum adattagjára:

• a korábban ismertetett pontos jelölés: objektum_neve.kulcs
• szögletes zárójeles jelölés (innen jön az asszociatív tömb elnevezés): objektum_neve[ kulcs ]

A kulcs a mező nevével egyenlő az objektumon belül. Vizsgáljuk meg, hogyan tudjuk egy objektum egy adattagját kiválasztani akkor, ha az adattag kulcsa egy változóban van:

let key = 'website';

// Hogyan tudunk author.website értékére hivatkozni a fenti kulccsal?

A megoldás a szögletes zárójel jelölésben rejlik: author[ key ] adja vissza a keresett értéket:

author[ key ]
// Prints: zsoltnagy.eu

A kulcs típusa mindig string. Ha egy más típusú kulcsot adunk meg, akkor a kulcs automatikusan string-gé alakul:

const key = 1;
const street = {};

street[ key ] = 'house';

console.log( street );

A végeredmény { "1": "house" }.

JavaScript objektumok adattagjainak törlése

A delete operátor töröl egy mező kulcs-érték párt az objektumból.

Ha egy mező értékét töröltük az objektumból, vagy a mező értéke eleve nem létezett, a mező lekérdezésének eredménye undefined:

let o = {};

> o.name
undefined

let p = { a: 1 };
delete p.a;
> p.a
undefined

Objektumok építése

Egy objektum adattagja lehet egy másik objektum is:

let auto = { rendszam: 'ABC123' };

let garazs = {
    meret: 25,
    parkolohely: auto
};

Itt láthatjuk, hogy a garázsnak van egy mérete és a parkolóhelyen áll egy autó. Az autó egy ugyanolyan érték, mint a 25, csak a típusa szám helyett objektum.

Objektumokat lehet úgy is építeni, hogy korábban már létrehoztuk azt. Ilyenkor a hivatkozott kulcshoz tartozó érték megváltozik:

garazs.tulajdonos = { nev: 'Zsolt' };

A fenti példában garazs.tulajdonos értéke az alapértelmezett undefined-ról egy másik objektummá változott.

A fentiekben láttuk, hogy egy objektum adattagjaira kétféleképp hivatkozhatunk:

1. hivatkozás ponttal: garazs.meret értéke 25,
2. hivatkozás szögletes zárójellel: garazs[ "meret" ] értéke szintén 25.

A két hivatkozás között nincs különbség.

Fontos, hogy a második esetben a kulcs egy string típusú érték. A garazs[ meret ] kifejezés hibás, amennyiben meret nem egy korábban létrehozott változónév.

Objektumokról még sokat fogunk tanulni. 

A JavaScript programozás kezdőknek sorozat

A JavaScript programozás kezdőknek ingyenes minitréningben írott és videó formában áttekintjük a JavaScript alapjait. Ezáltal el tudsz kezdeni magadtól JavaScript programokat írni.

A megértést feladatok segítik, amelyeknek a megoldásait megtalálod a blogban. Ha egy rövid összefoglalóra van szükséged, akkor keresd fel a GitHub oldalam.

Ha el szeretnél mélyülni a programozás karriered építésében, jelentkezz tanfolyamainkra a Képzéseink fülön belül.