JavaScript objektumok fogalma, létrehozása, használata (Objektum tulajdonságok és metódusok szintaxisa + példa)

Ebben a cikkben a JavaScript-ben is használatos objektumokról lesz szó: először is megismerkedünk az objektumorientált programozás fogalmával, majd az objektumokkal. Ezekután bemutatjuk, hogy hogyan kell létrehozni egy objektumot a JavaScript-en belül, illetve azt, hogy hogyan hozhatunk létre tulajdonságokat és függvényeket, metódusokat az objektumunk számára.

OOP jelentése

Az objektumorientált programozás (angolul object-oriented programming, röviden OOP) egy az objektumokra alapozott programozási elmélet vagy szemlélet. Az objektumok egységbe foglalják az adatokat és a velük kapcsolatos műveleteket. Az adatokat tulajdonságoknak, míg a műveleteket függvényeknek, illetve metódusoknak szoktuk nevezni.

Az objektum az objektumorientált programozás egyik alapeleme.

Mi az az objektum?

A WikiPédia így definiálja az objektumokat: ,,Az objektum informatikai értelmezése a valóság mintájára tulajdonságokkal és viselkedésekkel felruházott egység, amit programozási szempontból tekinthetünk a hagyományos változó kibővített változatának – mintha összecsomagolva tartalmazná az érintett valóságban megjelenő tárgy számítógépes leírásához szükséges változók és alprogramok (viselkedések) összességét.”

Egészítsük ki a fenti fogalmat pár információval: először is a tulajdonság egy információt ad vissza az objektumról, a viselkedés alatt a függvényeket, metódusokat értjük, melyekről itt olvashattok bővebben.

Egyszerűbben így fogalmazhatnánk meg az objektumok jelentését: ,,Az objektum az objektumorientált programozás egyik alapeleme. Az objektumokat általában információt hordozó, és azokkal műveleteket vagy számításokat elvégezni képes egységként fogjuk fel.„

Életszerű példa az objektumra

Egy életszerű példán keresztül úgy tudnánk szemléltetni ezt az egészet, hogy nézzünk például egy focistát. (Valójában nézhetnénk egy autót, egy színészt vagy szinte bármit.) Szóval a focistának vannak tulajdonságai, amelyek információt adnak vissza róla.

Milyen tulajdonságai lehetnek egy focistának?

a neve
az életkora
a jelenlegi csapata
a posztja

Ezen felül lehetnek függvényei, metódusai, amelyek valamilyen műveletet hajtanak végre. Természetesen olyan műveletek, amelyeket a focisták szoktak végezni.

Milyen metódusai (műveletei) lehetnek egy focistának?

meccs közben
- sprintelés
- cselezés
- lövés
meccsen kívül
- edzés
- átigazolás

Valami hasonlót kell elérnünk a programozás során is.

JavaScript objektum (object) létrehozása

A változókról már tanultunk itt, valami hasonlóról lesz szó most is. Ugyebár, ha egy változót hoztunk létre, akkor egy változónévhez csak egyetlen egy értéket csatoltunk hozzá. A fenti példánál ez így nézne ki.

const nev = "Lionel Messi";
Code language: JavaScript (javascript)

De – a jelenlegi példánál maradva – nem csak egy adatot szeretnénk tárolni egy focistáról, hanem sokkal többet, ugyebár szóba jöhetne a tömb is. De egy tömbben csak egy típusú adatot tárolhatunk, azaz csak szöveget, vagy csak számokat, a kettőt nem vegyíthetjük. Itt jönnek képbe a JavaScript objektumok.

Az objektumok több értéket (például név, kor, csapat) társítanak egy „változónévhez”.
Még mindig az előző példánál maradva ez így néz ki:

const jatekos = {nev:"Lionel Messi", eletkor:34, csapat:"FC Barcelona", poszt:"csatár"};
Code language: JavaScript (javascript)

A fenti példában egy „jatekos” nevű objektumot hoztam létre, melynek van „nev”, „eletkor”, „csapat” és „poszt” tulajdonsága.

A fenti példát szebben, átláthatóbban tagolva akár így is megadhattam volna:

const jatekos = {
   nev: "Lionel Messi",
   eletkor: 34,
   csapat: "FC Barcelona",
   poszt: "csatár"
};
Code language: JavaScript (javascript)

Szintaxis

const/var/let OBJEKTUM.NÉV = {TULAJDONSÁG1:ÉRTÉK1, TULAJDONSÁG2:ÉRTÉK2, ... };
Code language: JavaScript (javascript)

Használhatjuk a const, a var vagy a let kulcsszót, ezekről itt értekeztünk bővebben. Majd csakúgy, mint egy változó esetében, meg kell adnunk a nevet, majd az egyenlőségjel után következik egy kapcsos zárójel, amely közé szépen lassan elkezdjük felvenni a tulajdonságokat, majd a hozzájuk tartozó értékeket.

A szintaxis szebben tagolva így fest:

const/var/let OBJEKTUM.NÉV = {
   TULAJDONSÁG1:ÉRTÉK1,
   TULAJDONSÁG2:ÉRTÉK2,
   ...
};
Code language: JavaScript (javascript)

Természetesen mind a két felírás teljesmértékben egyenértékű.

Fontos, hogy az objektumokban a tulajdonságokat és az értékeket nem egyenlőségjel (=), hanem kettőspont (:) választja el.

Példa

JavaScript + HTML kód

<p id="szoveg"></p>
<button onclick="kiir()">Adatok kiíratása</button>

<script>
	const jatekos = {
   		nev: "Lionel Messi",
   		eletkor: 34,
   		csapat: "FC Barcelona",
   		poszt: "csatár"
	};

	function kiir() {
		document.getElementById("szoveg").innerHTML = "Név: " + jatekos.nev + ", életkor: " + jatekos.eletkor + ", csapat: " + jatekos.csapat + ", poszt: " + jatekos.poszt;
	}
</script>
Code language: HTML, XML (xml)

Eredmény

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

Objektum tulajdonságainak elérése, lekérdezése

Most hogy már tudjuk, hogy hogyan hozhatunk létre egy objektumot JavaScript nyelven – és azt hogy hogyan hozhatunk létre tulajdonságokat azon belül -, ideje megtanulnunk azt is, hogy hogyan érhetjük el, azaz kérdezhetjük le a JS objektumunk adatait. Valójában már az előző példán keresztül láthattátok is, de most bemutatjuk szintaktikailag is.

Szintaxis

Két különböző lehetőségünk van a szintaxisra vonatkozólag. Nézzük az elsőt.

OBJEKTUMNÉV.TULAJDONSÁGNÉV
Code language: CSS (css)

Ez a fent is (a példában) látható módszer. Nézzük a másikat, ami egy pár karakterrel hosszabb.

OBJEKTUMNÉV["TULAJDONSÁGNÉV"]
Code language: CSS (css)

Természetesen mind a két módszer, leírás mód ugyanazt az eredményt adja vissza. Mindenkinek azt érdemes használni, amelyik számára szimpatikusabb, vagy jobban rááll a keze.

Példa

JavaScript + HTML kód

<p id="szoveg"></p>
<button onclick="kiir()">Adatok kiíratása</button>

<script>
	const jatekos = {
   		nev: "Lionel Messi",
   		eletkor: 34,
   		csapat: "FC Barcelona",
   		poszt: "csatár"
	};

	function kiir() {
		document.getElementById("szoveg").innerHTML = "Név: " + jatekos.nev + ", életkor: " + jatekos["eletkor"] + ", csapat: " + jatekos["csapat"] + ", poszt: " + jatekos.poszt;
	}
</script>
Code language: HTML, XML (xml)

Eredmény

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

Függvények létrehozása JavaScript objektumokon belül

A JavaScript objektumok természetesen tartalmazhatnak metódusokat, vagy ha úgy tetszik függvényeket is. A metódusok olyan „cselekvések”, műveletek, amelyeket objektumokon lehet végrehajtani.

Tulajdonképpen a metódusok függvénydefinícióként vannak tárolva a tulajdonságokban.

Szintaxis

OBJEKTUMNÉV : function() { //FÜGGVÉNY UTASÍTÁSOK }
Code language: JavaScript (javascript)

Vagy pedig stilizálva:

OBJEKTUMNÉV : function() {
   //FÜGGVÉNY UTASÍTÁSOK
}
Code language: JavaScript (javascript)

Fontos, hogy a megszokott függvény formátumhoz képest itt nem kell a függvénynév után () zárójeleket elhelyeznünk.

Példa

JavaScript + HTML kód

<p id="szoveg"></p>
<button onclick="kiir()">Adatok kiíratása</button>

<script>
	const jatekos = {
   		nev: "Lionel Messi",
   		eletkor: 34,
   		csapat: "FC Barcelona",
   		poszt: "csatár",
        osszesAdat: function() {
            return "Név: " + jatekos.nev  + ", életkor: " + jatekos["eletkor"] + ", csapat: " + jatekos["csapat"] + ", poszt: " + jatekos.poszt;
        }
	};

	function kiir() {
		document.getElementById("szoveg").innerHTML = jatekos.osszesAdat();
	}
</script>
Code language: HTML, XML (xml)

Eredmény

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

Függvények elérése, meghívása JavaScript objektumokon belül

Csakúgy, mint az előző esetben: most is elspoilereztük a meghívást az előző példán keresztül.

Szintaxis

OBJEKTUMNÉV.OBJEKTUMFÜGGVÉNY();
Code language: CSS (css)

Példa

JavaScript + HTML kód

<p id="szoveg"></p>
<button onclick="kiir()">Adatok kiíratása</button>

<script>
	const jatekos = {
   		nev: "Lionel Messi",
   		eletkor: 34,
   		csapat: "FC Barcelona",
   		poszt: "csatár",
        osszesAdat: function() {
            return "Név: " + jatekos.nev  + ", életkor: " + jatekos["eletkor"] + ", csapat: " + jatekos["csapat"] + ", poszt: " + jatekos.poszt;
        }
	};

	function kiir() {
		document.getElementById("szoveg").innerHTML = jatekos.osszesAdat();
	}
</script>
Code language: HTML, XML (xml)

Eredmény

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

A fenti példában a „jatekos” objektumunk kapott egy metódust, függvényt, amely visszaadja az összes adatát, majd később a „kiir()” függvényben az objektumunknak ezt a metódusát hívjuk meg.

this kulcsszó

Végezetül pedig ismerkedjünk meg a „this” kulcsszóval. A JavaScript objektumokban szereplő függvényeknél szokás használni. Használatával azt fejezzük ki, hogy a jelenlegi objektumról van szó, azaz fölösleges kiírni a függvényünket tartalmazó objektum nevét, elegendő helyette szimplán a „this” kulcsszót használni.

Ez nem csak azért nagyon praktikus, mert így valószínűleg kevesebbet kell gépelnünk, hanem azért is, mert ha utólagosan módosítjuk az objektumunk nevét, akkor nem kell átírni a függvényeinkben erre vonatkozó részeket.

Szintaxis

this.TULAJDONSÁG
Code language: JavaScript (javascript)

Szóval az előző példában ezek helyett…

jatekos.nev
jatekos["eletkor"]
jatekos["csapat"]
jatekos.poszt
Code language: CSS (css)

… elegendő lett volna, csak ennyit írni:

this.nev
this["eletkor"]
this["csapat"]
this.poszt
Code language: JavaScript (javascript)

Azaz minden esetben, ahol „jatekos”-t írtam, oda fölösleges volt egy ilyen „hosszú” szót leírnom, mert simán írhattam volna „this”-t is helyette.

További leckék

#Függvények #JavaScript #JavaScript alapok #JavaScript alapok kezdőknek #JavaScript ismeretek #JavaScript programozás #JavaScript tananyag #JavaScript webfejlesztés #JavaScript webprogramozás #JS #JS alapok #JS programozás #Metódusok #Webfejlesztés #Webprogramozás alapjai #Webprogramozás alapok