Objektumok ebben a kurzusban:

A(z) Objektumok fogalomról

Magyarázat

A primitív adattípusok, például a number és a string mellett van egy másik fontos adattípus is a JavaScriptben: az object. Az objektumok kulcs-érték párok gyűjteményei. Így ugyanarra használhatók, amit más nyelvekben gyakran mapnak vagy szótárnak neveznek.

Más nyelvekben egy map minden értékének gyakran ugyanolyan adattípusúnak kell lennie. A JavaScriptben csak a kulcs típusa kötött: annak stringnek kell lennie. Egy objektumon belül az értékek különböző típusúak lehetnek. Lehetnek primitív típusok, például számok, de tömbök, más objektumok vagy akár függvények is. Ez rendkívül sokoldalúvá teszi az objektumokat, ezért kulcsfontosságú elemei a JavaScript objektumorientált programozásának (OOP) is.

A továbbiakban az objektumokra gyűjteményként vagy mapként tekintünk. Az objektumok egyéb felhasználási eseteit más fogalmak tárgyalják, lásd például az Osztályokat.

Objektum létrehozása

Egy objektumliterált kapcsos zárójelekkel hozol létre. Közvetlenül is beleírhatsz néhány bejegyzést (kulcs-érték párt). Ehhez először a kulcsot add meg, utána egy kettőspont, majd az érték következik.

const emptyObject = {};

const obj = {
  favoriteNumber: 42,
  greeting: 'Hello World',
  useGreeting: true,
  address: {
    street: 'Trincomalee Highway',
    city: 'Batticaloa',
  },
  fruits: ['melon', 'papaya'],
  addNumbers: function (a, b) {
    return a + b;
  },
};

Az utolsó bejegyzés utáni záró vessző elhagyható a JavaScriptben. Hogy miért érdemes használni, arról itt olvashatsz.

Felmerülhet benned, hogy miért nincsenek a kulcsok idézőjelbe téve, pedig stringeknek kellene lenniük. Ez egy rövidített jelölésmód. Ha a kulcs megfelel a JavaScript azonosítóra vonatkozó elnevezési szabályainak, elhagyhatod az idézőjeleket. A névben speciális karaktereket tartalmazó kulcsoknál viszont a szokásos stringjelölést kell alkalmaznod.

const obj = {
  '1keyStartsWithNumber': '...',
  'key/with/slashes': '...',
  'key-with-dashes': '...',
  'key with spaces': '...',
  '#&()[]{}èä樹keyWithSpecialChars': '...',
};

Gyakran előfordul, hogy meglévő változókat szeretnél felvenni egy objektum deklarálásakor. Ez gyakran name: name formájú kulcs-érték párokhoz vezetne. A JavaScriptben van egy rövidített jelölésmód, amellyel egyszerűen csak name-et írhatsz helyette. Van rövidített jelölésmód függvények objektumban való definiálására is. Ilyenkor elhagyhatod a kettőspontot és a function kulcsszót.

const x = 1;
const y = 2;

const obj = {
  x: x,
  y: y,
  calcSum: function (a, b) {
    return a + b;
  },
};

// Can be shortened to ...
const obj = {
  x,
  y,
  calcSum(a, b) {
    return a + b;
  },
};

Ha olyan objektumliterált szeretnél létrehozni, amelynek a kulcsnevét egy változóban tárolod, vagy egy kifejezéssel állítod elő, akkor a változót vagy a kifejezést szögletes zárójelbe kell tenned.

const key = 'greeting';

const obj = {
  [key]: 'hello world',
};
console.log(obj);
// => { greeting: 'hello world' }

Érték kiolvasása

Egy adott kulcshoz tartozó értéket kétféleképpen kérdezheted le: pontjelöléssel és szögletes zárójeles jelöléssel.

const obj = { greeting: 'hello world' };

obj.greeting;
// => hello world

obj['greeting'];
// => hello world

// Bracket notation also works with variables.
const key = 'greeting';
obj[key];
// => hello world

A pontjelölés rövidítésként ugyanolyan megkötés alá esik, mint az idézőjelek elhagyása. Csak akkor működik, ha a kulcs megfelel az azonosítókra vonatkozó elnevezési szabályoknak.

Ha olyan kulcsot próbálsz kiolvasni, amely nem létezik az objektumban, a JavaScript undefined-et ad vissza. Erről bővebben a Null és undefined fogalomban olvashatsz.

A kulcsokat láncolhatod is, ha egy egymásba ágyazott objektumból szeretnél értéket kiolvasni.

const obj = {
  address: {
    street: 'Trincomalee Highway',
    city: 'Batticaloa',
  },
};

obj.address.city;
// => 'Batticaloa'

obj['address']['city'];
// => 'Batticaloa'

// Notations can also be mixed.
obj.address['city'];
// => 'Batticaloa'

Érték hozzáadása vagy módosítása

Egy értéket az = értékadó operátorral adhatsz hozzá vagy módosíthatsz. Itt is a pontjelölés és a szögletes zárójeles jelölés áll rendelkezésre.

const obj = { greeting: 'hello world' };

obj.greeting = 'Hi there!';
obj['greeting'] = 'Welcome.';

obj.newKey1 = 'new value 1';
obj['new key 2'] = 'new value 2';

const key = 'new key 3';
obj[key] = 'new value 3';

Bejegyzés törlése

Egy kulcs-érték párt a delete kulcsszóval törölhetsz egy objektumból.

const obj = {
  key1: 'value1',
  key2: 'value2',
};

delete obj.key1;
delete obj['key2'];

Vedd figyelembe, hogy bár nem létező kulcsokra undefined-et ad vissza, egy kulcs undefined-re állítása nem törli a bejegyzést. Helyette mindig a delete-et használd.

Kulcs létezésének ellenőrzése

A hasOwnProperty metódussal ellenőrizheted, hogy létezik-e egy adott kulcs egy objektumban.

const obj = { greeting: 'hello world' };

obj.hasOwnProperty('greeting');
// => true

obj.hasOwnProperty('age');
// => false

A hasOwnProperty false-t ad vissza az örökölt kulcsokra. Ez általában a kívánt viselkedés. Ha az örökölt kulcsokat is bele szeretnéd venni a létezésvizsgálatba, használhatod helyette az in operátort.

Végigiterálás egy objektumon

Létezik egy speciális for...in ciklus, amellyel egy objektum összes kulcsán végigiterálhatsz.

const obj = {
  name: 'Ali',
  age: 65,
};

for (let key in obj) {
  console.log(key, obj[key]);
}
// name Ali
// age 65

Úgy tűnhet, hogy a for...in mindig abban a sorrendben járja be a kulcsokat, ahogyan azok megjelennek vagy hozzá lettek adva az objektumhoz (beszúrási sorrend). Ezzel azonban nem szabad számolnod, mert vannak speciális esetek, amikor a sorrend eltér a beszúrási sorrendtől. Mindig úgy írd meg a kódodat, mintha a sorrend tetszőleges lenne. Ha megbízható sorrendre van szükséged, használj egy Map objektumot vagy egy egymásba ágyazott [tömböt][concept-arrays] objektum helyett.

A for…in ciklusnak van egy buktatója, ha az objektumnak örökölt kulcsai vannak. Azokat a for…in ciklus szintén bejárja. Ezt általában el akarod kerülni, ezért ki kell hagynod őket, ahogy az alábbi példa mutatja.

for (let key in obj) {
  if (!obj.hasOwnProperty(key)) {
    continue;
  }
  // ...
}

A JavaScriptben van for...of ciklus is, például tömbök bejárására. Fontos megjegyezni, hogy a for...in és a for...of nem cserélhető fel egymással, a részletekről az MDN dokumentációjában olvashatsz.

Kulcsok, értékek és bejegyzések

A beépített Object objektum segédmetódusokat kínál, amelyekkel egy adott objektum összes kulcsát, értékét vagy bejegyzését tömbként kérdezheted le.

const obj = {
  name: 'Ali',
  age: 65,
};

Object.keys(obj);
// => [ 'name', 'age' ]

Object.values(obj);
// => [ 'Ali', 65 ]

Object.entries(obj);
// => [ [ 'name', 'Ali' ], [ 'age', 65 ] ]

Valóban üres objektum

Talán feltűnt, hogy egy üres objektum a JavaScriptben nem teljesen üres. Például tartalmazza a hasOwnProperty metódust és más metódusokat, például a toString-t. Ez általában nem okoz problémát, de ha mégis valóban üres objektumra lenne szükséged, használj null objektumot, amelyet Object.create(null) hívással hozhatsz létre.