Az object adattípus

A JavaScript egyik beépített adattípusa az object (objektum). Ennek segítségével komplex entitásokat tudunk létrehozni, amelyekbe property-érték párokat helyezhetünk.

Object létrehozása

JavaScriptben objektumokat kétféleképpen hozhatunk létre:

• a new Object() konstruktor használatával
• a kapcsos zárójel ({}) operátorok segítségével.

Példa: Üres object-ek létrehozása

let ures1 = new Object();
let ures2 = {};

A továbbiakban a kapcsos zárójeles szintaxist fogjuk használni a jegyzetben. A kapcsos zárójel között, vesszővel elválasztva megadhatjuk az adott objektum property-érték párjait property: érték formában.

Példa: Egy személy object létrehozása

let szemely = {
    nev: "Béla",
    eletkor: 30,
    foglalkozas: "programozó",
    hazas: false
};

Object elemeinek elérése

Egy object adott property-jéhez tartozó értéke kétféleképpen is lekérdezhető:

• a . (pont) operátorral
• a [] (szögletes zárójel) operátorral.

Példa: A nev property-hez tartozó érték lekérése

let szemely = { nev: "Béla", eletkor: 30, foglalkozas: "programozó" };

console.log(szemely.nev);       // . operátor
console.log(szemely["nev"]);    // [] operátor

Kimenet

Béla Béla

A lényegi különbség a két operátor működésében, hogy amennyiben változót adunk át nekik, akkor a . operátor a változó nevét tekinti kulcsnak, míg a [] operátor a változó értékét fogja kulcsként venni.

Példa: A . és [] operátorok közötti működésbeli különbség

let szemely = { nev: "Béla", eletkor: 30, foglalkozas: "programozó" };
let valami = "eletkor";

console.log(szemely.valami);
console.log(szemely[valami]);

Kimenet

undefined 30

A példában az első esetben a . operátor egy valami nevű property-t keresett az objektumon belül, amit nem talált meg, így undefined értéket kaptunk. A második esetben a [] operátor, már a valami változóban szerepelő értéket, az eletkor property-t kereste, és mivel van ilyen property-nk az objektumunkban, ezért az ahhoz tartozó értéket kaptuk vissza.

Fontosabb object műveletek

Property előfordulásának ellenőrzése

Az előző példában láttuk, hogy amennyiben az object egy nem létező property-jének az értékét szeretnénk lekérni, undefined értéket kapunk. Ezt kihasználva könnyedén tudjuk ellenőrizni, hogy egy adott property szerepel-e az object-ben.

let szemely = { nev: "Béla", eletkor: 30, foglalkozas: "programozó" };

if (szemely.foglalkozas !== undefined) {
    console.log("Van foglalkozas nevű property-nk!");
    console.log("Értéke: " + szemely.foglalkozas);
}

Kimenet

Van foglalkozas nevű property-nk! Értéke: programozó

A fenti módszerrel viszont van egy probléma: mi van akkor, ha a foglalkozas property értékét undefined-ra állítjuk be? Ekkor az if-ben megadott feltétel nem fog teljesülni, és hibásan úgy vesszük, mintha nem szerepelne ilyen nevű property az object-ben. Emiatt célszerű inkább használni az in operátort.

let szemely = { nev: "Béla", eletkor: 30, foglalkozas: undefined };

if (szemely.foglalkozas !== undefined) {
    // ebbe az if-be nem lépünk bele...
    console.log("Van foglalkozas nevű property-nk!");
}

if ("foglalkozas" in szemely) {
    console.log("Van foglalkozas nevű property-nk!");
}

Kimenet

Van foglalkozas nevű property-nk!

Érték módosítása

Az object egy adott property-jéhez tartozó értékét módosíthatjuk is. Hivatkozunk a módosítani kívánt elemre (a fentebb tárgyalt . vagy [] operátorok valamelyikével), majd az = operátorral beállítjuk az új értéket.

let szemely = { nev: "Béla", eletkor: 30, foglalkozas: "programozó" };
szemely.foglalkozas = "asztronauta";  // szemely["foglalkozas"] = "asztronauta" is helyes

console.log(szemely.nev + " munkát váltott, mától " + szemely.foglalkozas + "!");

Kimenet

Béla munkát váltott, mától asztronauta!

Új property-érték pár beszúrása

Az objektumainkba bármikor beszúrhatunk új property-érték párokat. A beszúrás szintaxisa nagyon egyszerű: megadjuk az object beszúrni kívánt property-jének a nevét, majd = operátorral értéket adunk neki.

let szemely = { nev: "Béla", eletkor: 30, foglalkozas: "programozó" };
szemely.kedvencSzin = "átlátszó";

console.log(szemely);

Kimenet

{ nev: 'Béla', eletkor: 30, foglalkozas: 'programozó', kedvencSzin: 'átlátszó' }

Property-érték pár törlése

A delete kulcsszóval lehetőségünk van egy adott property-t és a hozzá tartozó értéket törölni az object-ből.

let szemely = { nev: "Béla", eletkor: 30, foglalkozas: "programozó" };
delete szemely.foglalkozas;

console.log(szemely);

Kimenet

{ nev: 'Béla', eletkor: 30 }

Object-ek bejárása

Az object-ek property-érték párjának bejárása legegyszerűbben egy for-ciklussal tehető meg. Az alábbi három módszer mindegyike ezt valósítja meg (amelyik a 3 közül a legszimpatikusabb a számunkra, azt használjuk).

• for-in szerkezet:

let szemely = { nev: "Béla", eletkor: 30, foglalkozas: "programozó" };

for (let kulcs in szemely) {
    console.log(kulcs + " értéke: " + szemely[kulcs]);
}

• for-of szerkezet, az Object.keys() használatával:

let szemely = { nev: "Béla", eletkor: 30, foglalkozas: "programozó" };

for (let kulcs of Object.keys(szemely)) {
    console.log(kulcs + " értéke: " + szemely[kulcs]);
}

• for-of szerkezet, az Object.entries() használatával:

let szemely = { nev: "Béla", eletkor: 30, foglalkozas: "programozó" };

for (let [kulcs, ertek] of Object.entries(szemely)) {
    console.log(kulcs + " értéke: " + ertek);
}

Figyelem

Ha böngészős környezetben lennénk, akkor érdemes tudnunk, hogy a harmadik, Object.entries() használatával történő megvalósítást az Internet Explorer nem támogatja natív módon.

Úton az objektumorientált paradigma felé

Az object egy hasznos, viszonylag gyakran használt adatszerkezet JavaScriptben. Ennek ellenére van némi probléma vele, amit érdemes megjegyezni.

Ha az objektumunkban van egy függvény, és az objektum bejárása során azt meg szeretnénk hívni, akkor ez egy kissé körülményes.

let szemely = {
    nev: "Béla",
    eletkor: 30,
    bemutatkozik: function() {
        // az objektumon belül a property-ket a this kulcsszóval érhetjük el
        console.log("Szia! " + this.nev + " vagyok, " + this.eletkor + " éves.");
    }
};

for (let [kulcs, ertek] of Object.entries(szemely)) {
    if (typeof ertek === "function") {  // ha a property-hez tartozó érték függvény, hívjuk meg
        // ertek();             // nem jó! (az adattagok értéke undefined lesz)
        ertek.apply(szemely);   // így már jó lesz
    }
}

Kimenet

Szia! Béla vagyok, 30 éves.

Emellett, ha nem 1 személyünk lenne, hanem mondjuk 100, akkor 100 különböző személy object-et kellene kézzel létrehoznunk, amelyekben külön-külön megadnánk a property-érték párokat.

Ezt persze nem szeretnénk manuálisan elvégezni, így felmerül az igény arra, hogy hozzunk létre egy "blueprint"-et, ami megmondja, hogy hogyan fognak kinézni az objektumaink. Ez a "blueprint" lesz a más nyelvekből ismerős osztály. Ha van egy Szemely osztályunk, abból már egyszerűen tudunk személy objektumokat készíteni a példányosítás során.

Az osztályokról, illetve az objektumorientáltság JavaScriptben való megvalósításáról a következő gyakorlaton fogunk tanulni.

---

Utolsó frissítés: 2023-11-03 13:38:17