Object és Array alapok, prototype chain, class szintaxis és öröklődés JavaScriptben.

Objektumok, tömbök, prototípusok

Ez az oldal a teljes jegyzet 8–10. fejezetét foglalja össze: object + array, this, prototype és öröklődés.
Forrás: content/javascript/javascript-full.mdx.

1. Object – kulcs–érték párok

Egy object névvel ellátott értékek (property‑k) gyűjteménye.

const felhasznalo = {
  nev: "Adam",
  kor: 25,
  aktiv: true,
  cim: {
    varos: "Budapest",
    irsz: "1011"
  }
};

// Elérés
console.log(felhasznalo.nev);        // "Adam" – dot notation
console.log(felhasznalo["kor"]);     // 25    – bracket notation

// Módosítás
felhasznalo.kor = 26;

// Új property
felhasznalo.email = "adam@example.com";

// Törlés
delete felhasznalo.aktiv;

Bracket notation akkor jön jól, ha a kulcs dinamikus:

const kulcs = "nev";
console.log(felhasznalo[kulcs]); // "Adam"

2. Array – rendezett lista

Az Array rendezett értékek sorozata, 0‑tól indexelve.

const gyumolcsok = ["alma", "körte", "szilva"];

console.log(gyumolcsok[0]);     // "alma"
console.log(gyumolcsok.length); // 3

Legfontosabb tömbmetódusok

`.map()` – transzformáció

const szamok = [1, 2, 3, 4];
const ketszeres = szamok.map(szam => szam * 2);

console.log(ketszeres); // [2, 4, 6, 8]
// Eredeti tömb változatlan

`.filter()` – szűrés

const szamok = [1, 2, 3, 4, 5, 6];
const parosak = szamok.filter(szam => szam % 2 === 0);

console.log(parosak); // [2, 4, 6]

`.reduce()` – összesítés

const szamok = [1, 2, 3, 4, 5];

const osszeg = szamok.reduce((sum, aktualis) => {
  return sum + aktualis;
}, 0);

console.log(osszeg); // 15

Láncolás (map + filter + reduce):

const termekek = [
  { nev: "alma", ar: 300, aktiv: true },
  { nev: "körte", ar: 450, aktiv: false },
  { nev: "szilva", ar: 200, aktiv: true }
];

const aktivTermekekAra = termekek
  .filter(t => t.aktiv)
  .map(t => t.ar)
  .reduce((sum, ar) => sum + ar, 0);

console.log(aktivTermekekAra); // 500

Egyéb hasznos metódusok

const tomb = [1, 2, 3];

tomb.push(4);        // [1, 2, 3, 4]
tomb.pop();          // [1, 2, 3]
tomb.unshift(0);     // [0, 1, 2, 3]
tomb.shift();        // [1, 2, 3]

tomb.includes(2);    // true
tomb.indexOf(2);     // 1

tomb.slice(0, 2);    // [1, 2]     – nem módosít
tomb.splice(1, 1);   // [1, 3]     – módosítja az eredetit

tomb.find(x => x > 1);   // 3
tomb.some(x => x > 2);   // true
tomb.every(x => x > 0);  // true

tomb.join(", ");     // "1, 3"

3. Referenciamásolás (shallow vs deep copy)

const eredeti = { nev: "Adam", cim: { varos: "Budapest" } };

// Shallow copy – csak a felső szint másolódik mélyen
const masolat = { ...eredeti };
masolat.nev = "Peter";          // csak a másolat nevét módosítja
masolat.cim.varos = "Debrecen"; // mindkettőben változik a varos!

console.log(eredeti.nev);       // "Adam"
console.log(eredeti.cim.varos); // "Debrecen"

Deep copy egyszerű (de korlátozott) módon:

const melyMasolat = JSON.parse(JSON.stringify(eredeti));

Figyelem: ez a trükk nem kezeli jól a Date, undefined, function stb. típusokat – komolyabb esetekben használj structuredClone‑t vagy könyvtárat (lodash.cloneDeep).

4. A `this` kulcsszó – rövid áttekintés

Részletesebben külön oldalon van, itt csak a prototípus témához szükséges minimum.

`this` object metódusban

const user = {
  nev: "Adam",
  udvozlet() {
    console.log(this.nev);
  }
};

user.udvozlet(); // "Adam"

`this` normál függvényben vs arrow function

const obj = {
  nev: "Teszt",

  normalFugg() {
    console.log(this.nev); // "Teszt"
  },

  arrowFugg: () => {
    console.log(this.nev); // undefined – a globális this-t használja
  }
};

Szabály: object metódusnál normál function,
callbacknél (belső függvény) sokszor jobb az arrow, hogy a külső this‑t örökölje.

5. Prototype és öröklődés

Mi az a prototype?

JavaScriptben minden object rendelkezik egy rejtett [[Prototype]] referenciával egy másik objectre. Ez adja a prototype chain‑t:

ha egy property‑t nem talál az object saját kulcsai között,
a motort végigmegy a prototype láncon (feljebb nézi meg).

Egyszerű példa:

const allat = {
  mozog() {
    console.log("Mozgok!");
  }
};

const kutya = Object.create(allat); // allat lesz a prototípusa

kutya.ugat = function() {
  console.log("Vau!");
};

kutya.ugat();  // "Vau!"       – saját metódus
kutya.mozog(); // "Mozgok!"    – prototípusból

Class szintaxis (ES6) – cukor a prototype felett

A class kulcsszó csak szintaktikus cukor a prototype mechanizmusra.

class Allat {
  constructor(nev) {
    this.nev = nev;
  }

  hangot() {
    console.log(`${this.nev} hangot ad.`);
  }
}

class Kutya extends Allat {
  constructor(nev, fajta) {
    super(nev); // szülő constructor hívása
    this.fajta = fajta;
  }

  ugat() {
    console.log(`${this.nev} ugat!`);
  }
}

const rex = new Kutya("Rex", "Labrador");
rex.ugat();   // "Rex ugat!"
rex.hangot(); // "Rex hangot ad."

Prototype chain gyakorlatban

console.log(rex.__proto__ === Kutya.prototype);           // true
console.log(rex.__proto__.__proto__ === Allat.prototype); // true

Tulajdonságkeresés menete:

Nézi az objectet (rex) – van‑e saját property.
Ha nincs, megy a __proto__‑ra (Kutya.prototype).
Ha ott sincs, megy tovább (Allat.prototype).
Végül az Object.prototype‑ig jut el; ha sehol nincs, undefined.

Összefoglaló – objektumok és prototípusok

Object: kulcs–érték párok; dot + bracket notation.
Array: rendezett lista; map / filter / reduce a három legfontosabb metódus.
Másolás: spread ({ ...obj }) csak shallow copy; nested objectek továbbra is megosztottak.
Prototype: minden object egy prototype chain része, ahol a hiányzó property‑ket "feljebb" keresi.
Class: csak kényelmesebb szintaxis a prototype‑os modellre (extends, super).

Következő oldal:
ES6+ nyelvi eszközök és modulok →

Objektumok, tömbök, prototípusok

On this page