Oktatás KódpanelekFrontend

Frontend kódpanelek

Huszonnégy bemásolható kódpanel. Minden panelnél ott áll, miről ismerhető fel, hogy épp az kell, mit írt ki tényleg a kód, mit kell benne kicserélni, és min szoktak elcsúszni.

Frontend programozás és tesztelés · 13. évfolyam · 24 panel · frissítve 2026. 09. 23.

Kereshető panelválasztó · ez az oldal egyben tartalmazza mind a(z) 24 panelt, nyomtatható.

Hogyan használd ezeket a paneleket?

Olvasd el a feladatot, és keresd meg, melyik panel kell hozzá. A „Mikor kell ez” sor pont azokat a fordulatokat sorolja, amelyek a feladatlapokon szerepelnek.
Másold be a kódot, és futtasd le azonnal, még mielőtt hozzányúlnál. Minden panel kódja lefutott – a „Kimenet” sorban az áll, amit tényleg kiírt.
Utána cseréld ki a saját neveidre. Az „Illesztési pontok” mondja meg, mit szabad átírni, és mi az, ami maradjon úgy, ahogy van.
Ha nálad más jön ki, mint a „Kimenet” sorban, akkor a kód nem az, amit hiszel. Ez a leggyorsabb hibakeresés, ami létezik.
Fűzd össze a paneleket. Egy tipikus feladat 3–4 panelből áll össze: HTML-váz → adatszerkezet → feldolgozás → kiírás.

A zöld dobozok azt az egy nyelvi elemet magyarázzák, amelyik az adott panelben először fordul elő. Ahol pedig valamit már tudsz csinálni másképp is, ott a klasszikus és az új alak egymás mellett áll – nem stílusversenyként, hanem azért, hogy lásd, mit nyersz vele.

A · Indulás és környezet

Ez a három panel arról szól, hogyan lesz egyáltalán futó kódod, és mit kezdj vele, ha nem működik.

P01A munkafájl: HTML-váz külső JS-fájllal

Új: defer

Mikor kell ez?

minden feladat első lépése. „Készíts egy weboldalt, amely…”, „a JavaScript külön fájlban legyen”. Két fájl: az index.html adja a felületet, a script.js a működést.

<!DOCTYPE html>
<html lang="hu">
<head>
  <meta charset="UTF-8">
  <title>«Feladat»</title>
</head>
<body>

  <h1>«Feladat»</h1>
  <div id="«kimenet»"></div>

  <script src="script.js"></script>
</body>
</html>

Új nyelvi elem · defer

A <script> azért van a <body> végén, mert mire lefut, a fölötte lévő elemeknek már létezniük kell. Ha a <head>-be tennéd, a document.getElementById("kimenet") még null-t adna.

Ugyanez elérhető a head-ből is: <script src="script.js" defer></script>. A defer annyit tesz: töltsd le most, de csak a teljes HTML beolvasása után futtasd. A kettő közül mindegy melyiket használod – de következetesen.

Illesztési pontok

«Feladat» – a lap címe; a <title> a böngészőfülön, a <h1> a lapon látszik.
«kimenet» – ennek az id-nek betűre pontosan egyeznie kell azzal, amit a JS keres.
Több kimeneti helyhez több <div> kell, mindegyiknek saját id-vel.

Tipikus hibák

Cannot set properties of null – a script hamarabb futott le, mint ahogy az elem létrejött, VAGY elgépelted az id-t.
A fájl megnyitása dupla kattintással. Használj Live Servert: a fetch és a modulok file:// alól nem működnek.
Hiányzó <meta charset="UTF-8"> – az ékezetek kérdőjelként jelennek meg.

P02Kiírás: a console-ra és a lapra

Kimenet

Mikor kell ez?

„írja ki”, „jelenjen meg a lapon” – és minden alkalommal, amikor tudni akarod, mi van egy változóban. Kétféle kiírás van, és nem cserélhetők fel: a console neked szól, a lap a felhasználónak.

// 1) A FEJLESZTŐNEK – F12 > Console
console.log("szöveg", 42, [1, 2, 3]);   // több érték is mehet egyszerre

// 2) A FELHASZNÁLÓNAK – a lap egy elemébe
const hova = document.getElementById("kimenet");
hova.textContent = "Ez látszik a lapon";

// hozzáfűzés, nem felülírás:
hova.innerHTML += "<p>Új bekezdés</p>";

Kimenet: szöveg 42 [1, 2, 3] a lapon: Ez látszik a lapon majd egy új bekezdés: Új bekezdés

Illesztési pontok

"kimenet" – az az id, amit a P01-ben megadtál.
Sok sor kiírásához ne írj sokszor: gyűjtsd egy tömbbe, és a végén egyszer add át.
A console.log vesszővel elválasztva akárhány értéket kaphat – nem kell összefűzni őket.

Tipikus hibák

textContent helyett innerHTML mindenre. A textContent szövegként ír ki, ezért biztonságos; innerHTML-t csak akkor használj, ha tényleg HTML-t szúrsz be.
document.write – soha. A lap betöltése után meghívva kitörli az egész kész oldalt.
A console.log bent marad a kész megoldásban. Hibakeresésre való, nem kiírásra.

P03Hibakeresés: mit mond a browser?

Kimenet
Új: debugger

Mikor kell ez?

amikor „nem működik”. A hibaüzenet nem büntetés, hanem információ – és három üzenetet érdemes fejből felismerni, mert ez a három adja a hibák túlnyomó részét.

Hibaüzenet	Mit jelent	Mit nézz meg
ReferenceError: x is not defined	Nincs ilyen nevű változó.	Elgépelted a nevet? Vagy a deklaráció alatt használod?
TypeError: Cannot read properties of null	A `getElementById` nem találta meg az elemet, így `null`-t adott.	Egyezik az id a HTML-ben és a JS-ben? A script a body végén van?
SyntaxError: Unexpected token	A böngésző nem tudja értelmezni a kódot.	Hiányzó vagy fölös zárójel, kapcsos zárójel, idézőjel – jellemzően a jelzett sor fölött.

// Ha nem tudod, hol tart a kód, tegyél le jelzőket:
console.log("1. idáig eljutott");
console.log("a valtozo erteke:", valami);

// Vagy állítsd meg a futást ezen a soron (F12 legyen nyitva):
debugger;

Kimenet: 1. idáig eljutott a valtozo erteke: 42

Új nyelvi elem · debugger

Ez egy utasítás, nem függvény – nincs zárójele. Ha a DevTools nyitva van, a futás megáll ezen a soron, és megnézheted minden változó pillanatnyi értékét. Ha a DevTools zárva van, nem csinál semmit, tehát nem tud kárt okozni.

Illesztési pontok

A jelzőszövegbe írj sorszámot vagy egyedi szót – így a konzolban látod, meddig jutott a kód.
A debugger sort a hiba elé tedd, ne mögé.
A konzolban a hibaüzenet mellett jobbra ott a fájlnév és a sorszám: kattintható.

Tipikus hibák

A DevTools be sincs kapcsolva, és a diák a képernyőt nézve találgat. F12, Console fül – ez az első lépés.
A hibaüzenet első sora elolvasatlan marad. Pedig a hiba típusa már megmondja, milyen fajta bajról van szó.
A debugger bent marad a kész megoldásban.

B · JS-alapok, amire építünk

Ismétlő anyag, panelekbe rendezve. Nem az a cél, hogy újat tanulj – hanem hogy ez a hat panel a vizsgán is menjen gondolkodás nélkül, mert minden későbbi téma ezekre épül.

P04Változó és típusellenőrzés

Kimenet
Klasszikus → új

Mikor kell ez?

„tárolja el”, „a program számolja”, „legyen egy számláló”. Minden feladat első sorai. Két kulcsszó van, és az egyiket sokszorosan többször fogod használni.

const cim = "Mátrix";     // nem kap újra értéket
let db = 0;               // változni fog
db = db + 1;

console.log(typeof cim);            // "string"
console.log(typeof db);             // "number"
console.log(Array.isArray([1, 2])); // true

Kimenet: string number true

Klasszikus alak → új alak

Ahogy régen írták

var szamlalo = 0;
if (true) {
  var szamlalo = 5;    // ugyanaz a változó!
}
console.log(szamlalo);  // 5

Ahogy mostantól

let szamlalo = 0;
if (true) {
  let szamlalo = 5;    // MÁSIK változó
}
console.log(szamlalo);  // 0

Mit nyerünk vele? A var az egész függvényben látszik, ezért egy belső blokkban véletlenül felül lehet írni – és a hiba néma. A let és a const csak abban a kapcsos zárójel-párban él, ahol deklaráltad, így ez a hiba fel sem tud lépni. Ezért nem írunk többé var-t.

Illesztési pontok

Mindig const-tal kezdj. Csak akkor írd át let-re, ha a kód hibát dob, mert újra kell értékadni.
A const a nevet rögzíti, nem a tartalmat: const t = [1, 2]; t.push(3); működik.
Tömb vizsgálatához Array.isArray kell – a typeof tömbre is "object"-et ad.

Tipikus hibák

typeof null értéke "object". Ez a nyelv 1995 óta meglévő hibája; null-t ertek === null-lal vizsgálj.
Kulcsszó nélküli értékadás (db = 0 deklaráció nélkül) – csendben globális változót hoz létre.
const újraértékadása: TypeError: Assignment to constant variable.

P05Szám és szöveg között

Kimenet
Új: template literal
Klasszikus → új

Mikor kell ez?

„olvassa be a felhasználótól”, „az űrlap mezőjéből”, „számolja ki az összeget”. Az űrlapmezőből mindig szöveg jön – ez a leggyakoribb néma hiba az egész évben.

const beirt = "12";              // űrlapmezőből MINDIG szöveg jön

console.log(beirt + 3);          // "123"  - összefűzés, nem összeadás!
console.log(Number(beirt) + 3);  // 15     - ez a helyes

const ar = 1990;
console.log(`Az ár ${ar} Ft`);   // "Az ár 1990 Ft"

Kimenet: 123 15 Az ár 1990 Ft

Új nyelvi elem · template literal

Nem aposztróf és nem idézőjel, hanem backtick: ` – magyar billentyűzeten AltGr + 7. Belül a ${…} közé bármilyen kifejezés írható, és a sortörés is megmarad úgy, ahogy leírtad.

Klasszikus alak → új alak

Ahogy eddig írtad

const uzenet =
  "Az ár " + ar + " Ft";

Ahogy mostantól

const uzenet =
  `Az ár ${ar} Ft`;

Mit nyerünk vele? A régi alakban a szóközöket kézzel kell az idézőjelen belülre tenni – ezt a legnehezebb észrevenni: "Az ár" + ar eredménye "Az ár1990". Az új alakban a szöveg pontosan úgy néz ki, ahogy meg fog jelenni.

Illesztési pontok

Szövegből számot: Number(x). Egész szám kerekítés nélkül: parseInt(x, 10).
Számból szöveget ritkán kell külön kérni – a ${…} magától átalakítja.
Ellenőrzés: Number("alma") értéke NaN, amit Number.isNaN(x)-szel vizsgálsz.

Tipikus hibák

Két beolvasott szám összeadása átalakítás nélkül: "1" + "2" eredménye "12", nem 3.
A -, *, / viszont átalakít: "6" * "2" értéke 12. Ez a következetlenség épp azért veszélyes, mert néha jól sül el.
NaN === NaN értéke false – a NaN önmagával sem egyenlő.

P06Elágazás három alakban

Kimenet
Új: ternary operator

Mikor kell ez?

„ha … akkor”, „aszerint, hogy”, „minősítse”, „jelenjen meg más szöveg, ha…”. Ugyanaz a döntés háromféleképp – és nem stílus kérdése, melyiket választod.

// 1) klasszikus – ha több dolog is történik
let cimke;
if (pont >= 4) {
  cimke = "jó";
} else {
  cimke = "gyenge";
}

// 2) ternary operator – ha csak ÉRTÉKET választunk
const cimke2 = pont >= 4 ? "jó" : "gyenge";

// 3) switch – sok konkrét értékre
let szoveg;
switch (jegy) {
  case 5: szoveg = "jeles"; break;
  case 4: szoveg = "jó";    break;
  default: szoveg = "egyéb";
}

console.log(cimke, cimke2, szoveg);   // pont = 5, jegy = 4 esetén

Kimenet: jó jó jó

Új nyelvi elem · ternary operator

Alakja: feltétel ? haIgaz : haHamis. Attól különleges, hogy kifejezés, tehát értéke van – ezért állhat egy értékadás jobb oldalán, függvényhívás paramétereként, bárhol, ahol egy érték elfér. Az if ezzel szemben utasítás: nincs értéke, csak hatása.

Ez a különbség később fontos lesz: van olyan hely a kódban, ahová utasítást nem lehet írni, kifejezést viszont igen.

Illesztési pontok

Ha az ágakban egy értéket adsz meg, ternary; ha több utasítás fut le, if.
switch csak konkrét, felsorolható értékekre való – tartományra if / else if kell.
A default ág elhagyható, de akkor gondold végig, mi legyen a fel nem sorolt esetekben.

Tipikus hibák

Hiányzó break: a switch továbbfut a következő ágra is. Néha ez a cél (több case egymás alatt, törzs nélkül), de ha nem az, néma hibát okoz.
Egymásba ágyazott ternary. Két szint fölött olvashatatlan – ott már if kell.
= a === helyett a feltételben: nem összehasonlít, hanem értéket ad.

P07Ciklusok: melyiket mikor

Kimenet
Klasszikus → új

Mikor kell ez?

„minden elemre”, „járja be a listát”, „írja ki sorszámozva”, „számolja össze”. Két ciklusalak elég, és a választás egyetlen kérdésen múlik: kell-e az index.

const filmek = ["Mátrix", "Alien", "Duna"];

// klasszikus for – ha KELL az index
for (let i = 0; i < filmek.length; i++) {
  console.log(i, filmek[i]);
}

// for...of – ha csak az ÉRTÉK kell (ez a gyakoribb)
for (const film of filmek) {
  console.log(film);
}

Kimenet: 0 Mátrix 1 Alien 2 Duna Mátrix Alien Duna

Klasszikus alak → új alak

Ahogy eddig írtad

for (let i = 0;
     i < filmek.length;
     i++) {
  console.log(filmek[i]);
}

Ahogy mostantól

for (const film of filmek) {
  console.log(film);
}

Mit nyerünk vele? A jobb oldali alakban nincs i, tehát nem lehet elrontani a kezdőértéket, a feltételt vagy a léptetést, és túlindexelni sem lehet. Ha viszont tényleg kell a sorszám, a bal oldali a helyes választás – nem elavult, csak más a dolga.

Illesztési pontok

A ciklusváltozó const lehet a for...of-ban: minden körben újra létrejön.
Visszafelé: for (let i = t.length - 1; i >= 0; i--).
Ha bejárás közben törölnél elemet, ne a ciklusban tedd – előbb gyűjts, aztán törölj.

Tipikus hibák

for...in tömbre. A kulcsokon megy végig, tömbnél tehát az indexeken, ráadásul szövegként: összegzésnél 0 + "0" eredménye "00" lesz.
i <= filmek.length a < helyett – az utolsó kör undefined-ot ad.
Elfelejtett let a ciklusfejben: globális változó lesz belőle.

P08Tömb: a hat művelet, ami elég

Kimenet

Mikor kell ez?

„tároljon több …-et”, „adja hozzá a listához”, „hány elem van”, „az utolsó elem”, „szerepel-e a listában”. Ennyi kell ahhoz, hogy egy listát kezelni tudj.

const t = ["a", "b"];

t.push("c");                   // hozzáad a végére -> ["a","b","c"]
console.log(t.length);         // 3
console.log(t[0]);             // "a"
console.log(t[t.length - 1]);  // "c"   - az utolsó elem
console.log(t.includes("b"));  // true
console.log(t.join(", "));     // "a, b, c"

Kimenet: 3 a c true a, b, c

Illesztési pontok

A join elválasztója szabadon választható: join(" - "), join("").
Elejére szúrás: unshift; utolsó elem kivétele: pop.
Üres tömb létrehozása: const t = []; – const-tal is bővíthető.

Tipikus hibák

t[-1] nem az utolsó elem, hanem undefined. Az utolsó: t[t.length - 1].
Üres tömb ellenőrzése if (t)-vel: az mindig igaz, mert a tömb objektum. Helyesen: if (t.length > 0).
A push visszatérési értéke az új hossz, nem a tömb – const uj = t.push(x) nem azt adja, amit vársz.

P09Objektum és objektumtömb

Kimenet

Mikor kell ez?

„minden filmnek van címe és éve”, „a listában minden elem …”, „az adatok a következő mezőket tartalmazzák”. Ez az az adatszerkezet, amivel az egész évben dolgozni fogsz: lista, amelynek minden eleme egy objektum.

const film = { cim: "Mátrix", ev: 1999, mufaj: "sci-fi" };

console.log(film.cim);     // "Mátrix"    - pontos elérés
console.log(film["ev"]);   // 1999        - ugyanaz, szögletessel
film.ertekeles = 9;        // új mező felvétele

const filmek = [
  { cim: "Mátrix", ev: 1999 },
  { cim: "Alien",  ev: 1979 }
];

for (const f of filmek) {
  console.log(`${f.cim} (${f.ev})`);
}

Kimenet: Mátrix 1999 Mátrix (1999) Alien (1979)

Illesztési pontok

A mezőnevek a feladat szövegéből jönnek – érdemes ugyanazt a szót használni, amit a feladat.
film.cim ha fejből tudod a mező nevét; film[valtozo] ha a mező neve csak futás közben derül ki.
Objektum bejárása: for (const kulcs in film) – itt a for...in a helyes választás.

Tipikus hibák

Nem létező mező elérése nem hibázik, csak undefined-ot ad – az elgépelt mezőnév ezért néma hiba.
film.ev és film.Ev két különböző mező: a JavaScript különbséget tesz kis- és nagybetű között.
Objektum értékadása nem másolat: const y = x után az y módosítása az x-en is látszik.

C · Arrow function és callback

A legfontosabb blokk az egész készletben. Ami itt épül, az köszön vissza a map-nél, a filter-nél, az eseménykezelésnél és később a React-ben is.

P10Ugyanaz a függvény háromféleképp

Kimenet
Új: arrow function
Klasszikus → új

Mikor kell ez?

„készítsen függvényt, amely…”, „a számítást külön függvény végezze”. A harmadik alak az arrow function – nem új képesség, ugyanaz rövidebben, de van egy fontos következménye.

// 1) function declaration – a klasszikus
function osszead(a, b) {
  return a + b;
}

// 2) function expression – a függvény egy ÉRTÉK, változóba tesszük
const osszead2 = function (a, b) {
  return a + b;
};

// 3) arrow function – ugyanaz, rövidebben
const osszead3 = (a, b) => {
  return a + b;
};

console.log(osszead(2, 3), osszead2(2, 3), osszead3(2, 3));   // 5 5 5

Kimenet: 5 5 5

Új nyelvi elem · arrow function

A function szó elmarad, helyette a paraméterlista után => jön (egyenlőségjel és nagyobb jel). Ugyanazt a három dolgot tudja, mint a klasszikus alak: paramétert kap, a törzse lefut, return-nel értéket ad vissza.

Egy különbség, ami számít: a declaration hoistol, vagyis a fájl elején is meghívható, akkor is, ha lentebb definiáltad. A másik kettő const-tal készül, tehát csak a deklaráció után hívható – előtte ReferenceError: Cannot access … before initialization a jutalom. Ez nem hátrány: a hibát azonnal megmutatja, ahelyett hogy elrejtené.

Klasszikus alak → új alak

Ahogy eddig írtad

function nagyobb(a, b) {
  return a > b ? a : b;
}

Ahogy mostantól

const nagyobb = (a, b) =>
  a > b ? a : b;

Mit nyerünk vele? Rövidebb – de nem ezért használjuk. A jobb oldali alak egy érték, amit ugyanúgy át lehet adni egy másik függvénynek, mint egy számot. Ez teszi lehetővé a callback-eket, és ezen áll az egész következő témakör.

Illesztési pontok

A paraméterek nevei a te dolgod; a hívás helyén a sorrend számít, nem a név.
Nulla paraméter esetén is kell a zárójel: () => ….
Ha a függvény önállóan is megáll és fentről hívnád, maradhat a function alak.

Tipikus hibák

Hiányzó pontosvessző a function expression és az arrow function után. Itt értékadás zárul, tehát kell a ; a záró kapcsos zárójel után.
A függvény meghívása a deklaráció előtt – const-tal készült függvénynél ez hiba.
Ugyanaz a név kétszer const-tal: SyntaxError: Identifier has already been declared.

P11Az arrow function rövidítési szintjei

Kimenet
Új: implicit return

Mikor kell ez?

amikor rövid függvényt adsz át valaminek – ez lesz a leggyakoribb alak a map, a filter és az eseménykezelők mellett. Három lépcső van, és a másodikon szokás elrontani.

// teljes alak
const negyzet1 = (x) => { return x * x; };

// 1) egy paraméternél a zárójel elhagyható
const negyzet2 = x => { return x * x; };

// 2) ha a törzs EGYETLEN kifejezés: nincs kapcsos zárójel és nincs return
const negyzet3 = x => x * x;

console.log(negyzet1(4), negyzet2(4), negyzet3(4));   // 16 16 16

Kimenet: 16 16 16

Új nyelvi elem · implicit return

Ha az arrow function törzse köré nem teszel kapcsos zárójelet, akkor a törzs értéke automatikusan a visszatérési érték. Ezt hívjuk implicit return-nek.

Kapcsos zárójellel viszont a return kötelező. A kettő közti választás nem ízlés kérdése: a kapcsos zárójel akkor kell, ha a törzsben több utasítás van.

Illesztési pontok

Objektumot visszaadni: x => ({ cim: x }) – zárójelbe kell tenni, különben a { blokknak számít.
Két paraméternél a zárójel nem hagyható el: (a, b) => a + b.
Több soros kifejezésnél tördelj a => után – az implicit return megmarad.

Tipikus hibák

const rossz = x => { x * x; }; – kiszámolja, majd eldobja. A visszatérési érték undefined, és nincs hibaüzenet. Ha egy függvény „nem csinál semmit”, ezt keresd először.
x => { cim: x } objektum helyett blokként értelmeződik.
Fölösleges kapcsos zárójel egysoros függvénynél – működik, de zajos, és épp ez a hiba forrása.

P12A függvény mint érték

Kimenet

Mikor kell ez?

ez nem külön feladattípus, hanem az a fogalom, ami nélkül a következő két panel érthetetlen. A legfontosabb két karakter ebben a blokkban a zárójel: ha kiírod, meghívod; ha nem, átadod.

const koszon = () => console.log("szia");

console.log(typeof koszon);   // "function"  - maga a függvény, NEM hívtuk meg
koszon();                     // "szia"      - ezzel hívjuk meg

// értékként továbbadható:
const masikNev = koszon;
masikNev();                   // "szia"      - ugyanaz a függvény, másik néven

// tömbbe is tehető:
const muveletek = [x => x + 1, x => x * 2];
console.log(muveletek[1](5)); // 10          - a 2. függvény, meghívva 5-tel

Kimenet: function szia szia 10

Illesztési pontok

Olvasd így: koszon a recept – át tudod adni valakinek. koszon() maga a főzés – a végén ott az étel, vagyis a visszatérési érték.
A muveletek[1](5) két lépés egy sorban: kiveszed a függvényt, majd meghívod.
A függvény objektumba is tehető mezőként – erre épül majd minden komponens.

Tipikus hibák

Fölösleges zárójel átadáskor. A leggyakoribb hiba az egész témakörben, és a következő panel erről szól.
typeof egy meghívott függvényre: typeof koszon() már a visszatérési érték típusát adja.
A függvény nevének elgépelése nem szól addig, amíg meg nem hívod – akkor viszont is not a function.

P13Callback: függvény, amit átadunk

Kimenet
Új: callback

Mikor kell ez?

„minden elemre végezze el”, „a gombra kattintva”, „két másodperc múlva”. Ez a blokk célja: egy függvény paraméterként kap egy másik függvényt, és ő dönti el, mikor hívja meg.

// a függvény, ami FÜGGVÉNYT vár paraméterként
function ismetel(hanyszor, mitCsinaljon) {
  for (let i = 1; i <= hanyszor; i++) {
    mitCsinaljon(i);       // meghívjuk, amit kaptunk
  }
}

// átadunk neki egy arrow function-t – zárójel NÉLKÜL adjuk át
ismetel(3, (sorszam) => console.log("kör:", sorszam));

Kimenet: kör: 1 kör: 2 kör: 3

Új nyelvi elem · callback

Olyan függvény, amelyet paraméterként adunk át egy másik függvénynek, hogy az a megfelelő pillanatban meghívja. A nevét onnan kapta, hogy nem mi hívjuk meg: „visszahív” minket, amikor eljön az ideje.

A mitCsinaljon egy közönséges paraméter – csak épp függvény van benne, ezért lehet zárójellel meghívni.

Illesztési pontok

A callback paramétereit az hívó határozza meg: itt az ismetel adja át a sorszámot.
A callback nevét te adod – ha nem használod az értéket, a paraméter el is hagyható.
Előre megírt függvényt is átadhatsz: ismetel(3, kiir) – zárójel nélkül.

Tipikus hibák

ismetel(3, mitCsinaljon()) – a zárójel miatt a függvény azonnal lefut, és nem őt, hanem a visszatérési értékét (jellemzően undefined) adod át. Az ismetel ezután undefined is not a function hibával áll meg.
A callback több paramétert vár, mint amennyit a hívó ad – a többi undefined lesz.
A callback belsejéből return-nel próbálnak kilépni a külső ciklusból. Nem lehet: a return csak a callbackből lép ki.

P14Beépített callback-fogadók

Kimenet

Mikor kell ez?

„a gombra kattintva jelenjen meg”, „minden elemre írja ki”, „késleltetve”. A callback nem elméleti dolog – ez a három helyzet naponta elő fog kerülni, és mindhárom ugyanaz a minta.

const filmek = ["Mátrix", "Alien"];

// 1) tömb bejárása – a callback minden elemre lefut
filmek.forEach((film, index) => console.log(index, film));

// 2) időzítés – a callback később fut le
setTimeout(() => console.log("1 másodperc telt el"), 1000);

// 3) esemény – a callback akkor fut le, amikor a felhasználó cselekszik
gomb.addEventListener("click", () => console.log("kattintottak"));

Kimenet: 0 Mátrix 1 Alien kattintásra: kattintottak 1 másodperc múlva: 1 másodperc telt el

Illesztési pontok

Mindhárom sorban ugyanaz a három lépés: írsz egy függvényt, átadod – zárójel nélkül –, és a böngésző hívja meg, amikor eljön az ideje.
A forEach második paramétere az index; ha nem kell, hagyd el.
A setTimeout ideje ezredmásodpercben van: 1000 = 1 másodperc.
Az eseménynév a második dolog, amit cserélni fogsz: "click", "input", "submit".

Tipikus hibák

gomb.addEventListener("click", kezelo()) – a kezelő azonnal lefut a lap betöltésekor, utána a kattintás nem csinál semmit.
A gomb értéke null, mert a script a <head>-ben van. Lásd a P01 panelt.
A forEach-ből nem lehet break-kel kilépni. Ha ki kell lépni, for...of kell.

P15A visszatérési érték

Kimenet
Új: return

Mikor kell ez?

„a függvény adja vissza”, „számolja ki és térjen vissza vele”. Kiírni és visszaadni két különböző dolog – és ezen fog múlni a következő témakör (map, filter) minden feladata.

const duplaz = (x) => x * 2;             // ad vissza értéket
const kiir   = (x) => { console.log(x); };  // csak kiír, nem ad vissza

const a = duplaz(5);   // a értéke 10
const b = kiir(5);     // kiírja: 5 -- de b értéke undefined lesz

console.log(a, b);     // 10 undefined

Kimenet: 5 10 undefined

Új nyelvi elem · return

A return két dolgot csinál egyszerre: azonnal kilép a függvényből, és az utána írt értéket a hívás helyére teszi. Ami a return után van a függvényben, az már nem fut le.

A console.log ezzel szemben nem return: kiír a fejlesztői konzolra, de a függvény visszatérési értéke ettől még undefined marad. Ha a hívás helyén kell az érték, return kell.

Illesztési pontok

Kérdés, amivel eldöntöd: „kell-e valakinek az eredmény?” Ha igen, return. Ha csak megjelenítés a cél, elég a kiírás.
A return korai kilépésre is jó: if (!ertek) return; a függvény elején.
Több érték visszaadásához objektumot adj vissza: return { min, max };

Tipikus hibák

console.log a return helyett. A függvény működni látszik, de a hívás helyén undefined jön – ez a leggyakoribb „miért nem működik” ok.
Kód a return után: soha nem fut le, és a böngésző nem is szól érte.
Sortörés a return után: a JavaScript odaképzel egy pontosvesszőt, és a függvény undefined-ot ad vissza.

P16A négy hiba, amit mindenki elkövet

Kimenet

Mikor kell ez?

amikor ebben a témakörben valami nem működik. Az esetek nagy részében ez a négy közül az egyik – és három olyan, ami nem ad hibaüzenetet.

Amit írsz	Mi történik	Javítás
setTimeout(fut(), 1000)	A `fut` azonnal lefut, és az eredményét (`undefined`) adod át.	setTimeout(fut, 1000) – zárójel nélkül
x => { x * x; }	Kiszámolja, eldobja. A visszatérési érték `undefined`, hibaüzenet nincs.	x => x * x VAGY x => { return x * x; }
x => { cim: x }	A kapcsos zárójelet blokknak érti, nem objektumnak. `undefined` jön vissza.	x => ({ cim: x }) – zárójelbe téve
Hívás a deklaráció előtt	`ReferenceError: Cannot access … before initialization` – a `const`-tal készült függvény nem hoistol.	A definíciót tedd a hívás elé

// Mindegyik hiba egy helyen, kipróbálható alakban:

const fut = () => "kész";

console.log(typeof fut);      // "function"  - átadható
console.log(typeof fut());    // "string"    - már a visszatérési érték

const rossz = x => { x * x; };
console.log(rossz(4));        // undefined   - hiányzó return

const jo = x => ({ negyzet: x * x });
console.log(jo(4));           // { negyzet: 16 }

Kimenet: function string undefined { negyzet: 16 }

Illesztési pontok

Ez a panel nem másolásra való: futtasd le, és nézd meg mind a négy sort a konzolban.
A typeof a leggyorsabb ellenőrzés: ha "function" jön, még a receptet fogod; ha bármi más, már a főztjét.
Ha egy értékről nem tudod, mi van benne, írd ki console.log-gal, mielőtt tovább mennél.

Tipikus hibák

Négyből három nem ad hibaüzenetet, csak undefined-ot. Ha valahol váratlanul undefined-ot látsz, itt kezdd a keresést.
A hibát ott keresik, ahol a tünet jelentkezik – pedig az ok jellemzően néhány sorral feljebb van.
„Működnie kellene” alapon továbbmennek. Egy panel beillesztése után futtass, mielőtt továbbírod.

D · Tömbátalakítás

Itt derül ki, hogy a callback nem elméleti dolog: a tömbmetódusok pontosan azt csinálják, amit a P13 panelben te magad megírtál. A négy panel egy döntési kérdésre felel: ugyanannyi elem kell, kevesebb, vagy pontosan egy?

P17map: új tömb minden elemből

Kimenet
Új: map
Klasszikus → új

Mikor kell ez?

„készíts egy listát a címekből”, „alakítsd át minden elemet”, „számold ki mindegyikre a …-t”, „jelenítsd meg mindegyiket kártyaként”. Ha az eredmény ugyanannyi elemű, mint a kiindulás, map kell.

const filmek = [
  { cim: "Mátrix", ev: 1999 },
  { cim: "Alien",  ev: 1979 },
  { cim: "Duna",   ev: 2021 }
];

// 1) egy mező kiemelése
const cimek = filmek.map(film => film.cim);

// 2) szöveggé alakítás
const feliratok = filmek.map(film => `${film.cim} (${film.ev})`);

// 3) új objektum minden elemből – FIGYELEM: zárójel kell a { } köré
const jelolt = filmek.map(film => ({ cim: film.cim, regi: film.ev < 2000 }));

console.log(cimek);
console.log(feliratok);
console.log(jelolt);
console.log(filmek);        // az eredeti VÁLTOZATLAN

Kimenet: [ 'Mátrix', 'Alien', 'Duna' ] [ 'Mátrix (1999)', 'Alien (1979)', 'Duna (2021)' ] [ { cim: 'Mátrix', regi: true }, { cim: 'Alien', regi: true }, { cim: 'Duna', regi: false } ] [ { cim: 'Mátrix', ev: 1999 }, { cim: 'Alien', ev: 1979 }, { cim: 'Duna', ev: 2021 } ]

Új nyelvi elem · map

A map minden elemre meghívja a kapott callbacket, és a visszatérési értékekből új tömböt épít. Az eredeti tömböt nem változtatja meg, és az új tömbnek pontosan ugyanannyi eleme lesz, mint az eredetinek.

A callback ugyanaz, amit a P13 panelben megismertél – itt a map a „hívó”, ő adja át neked az elemet. Második paraméterként az indexet is megkapod, ha kéred: filmek.map((film, i) => …).

Klasszikus alak → új alak

Ahogy eddig írtad

const cimek = [];

for (const film of filmek) {
  cimek.push(film.cim);
}

console.log(cimek);

Ahogy mostantól

const cimek =
  filmek.map(film => film.cim);

console.log(cimek);

Mit nyerünk vele? A bal oldalon négy dolgot kell jól csinálni: létrehozni az üres tömböt, bejárni, push-olni, és a végén használni. A jobb oldalon egyet: megmondani, mit csinálunk egy elemmel. A bejárást és a gyűjtést a map végzi. Fontos viszont: a for...of nem elavult – ha mellékhatás a cél (kiírás, DOM-módosítás) és nem új tömb, akkor a for...of vagy a forEach a helyes választás.

Illesztési pontok

A callback paraméterének nevét te adod – szokás egyes számban nevezni azt, amiből a tömb áll (film, termek).
Objektumot visszaadni csak zárójelben lehet: film => ({ … }). Enélkül a { blokknak számít.
Az eredményt el kell tárolni: a map nem módosít, hanem visszaad.
Láncolható: filmek.map(…).join(", ") egyetlen szöveget ad.

Tipikus hibák

filmek.map(film => { film.cim; }) – kapcsos zárójel return nélkül. Az eredmény [ undefined, undefined, undefined ], és nincs hibaüzenet. Ez a P11 panel hibája, itt visszaköszönve.
A map használata kiírásra: filmek.map(f => console.log(f)) működik, de fölöslegesen épít egy undefined-okból álló tömböt. Kiírásra forEach való.
Az eredmény eldobása: filmek.map(…) önmagában, értékadás nélkül semmit nem változtat.
A map szűrésre nem jó — ugyanannyi elemet ad vissza. Szűréshez filter kell.

P18filter: kiválogatás feltétellel

Kimenet
Új: filter
Klasszikus → új

Mikor kell ez?

„csak azokat, amelyek…”, „válogasd ki a …-eket”, „hány darab olyan van, ami…”, „jelenjenek meg a … filmek”. Ha az eredmény kevesebb elemű lehet, mint a kiindulás, filter kell – nem map.

const filmek = [
  { cim: "Mátrix",       ev: 1999, perc: 136, mufaj: "sci-fi" },
  { cim: "Alien",        ev: 1979, perc: 117, mufaj: "horror" },
  { cim: "Duna",         ev: 2021, perc: 155, mufaj: "sci-fi" },
  { cim: "Hetedik",      ev: 1995, perc: 127, mufaj: "krimi"  },
  { cim: "Interstellar", ev: 2014, perc: 169, mufaj: "sci-fi" }
];

// 1) szűrés egy feltétellel
const regiek = filmek.filter(film => film.ev < 2000);

// 2) szöveges mező – mindig ===, sosem ==
const sciFi = filmek.filter(film => film.mufaj === "sci-fi");

// 3) DARABSZÁM: szűrés után .length
const db = filmek.filter(film => film.perc > 130).length;

// 4) ha nincs találat: ÜRES TÖMB, nem hiba
const nincs = filmek.filter(film => film.perc > 200);

console.log(regiek.map(f => f.cim));
console.log(sciFi.map(f => f.cim));
console.log(db);
console.log(nincs, nincs.length);
console.log(filmek.length);        // az eredeti VÁLTOZATLAN

Kimenet: [ 'Mátrix', 'Alien', 'Hetedik' ] [ 'Mátrix', 'Duna', 'Interstellar' ] 3 [] 0 5

Új nyelvi elem · filter

A filter minden elemre meghívja a kapott callbacket, és azokat az elemeket gyűjti új tömbbe, amelyeknél a callback igaz értéket adott vissza. Az elemeket nem alakítja át – ugyanazokat adja vissza, csak kevesebbet.

A különbség a map-hez képest a callback dolgában van: a map callbackje értéket számol, a filter callbackje eldönt. A film.ev < 2000 nem szám és nem szöveg, hanem true vagy false.

Klasszikus alak → új alak

Ahogy eddig írtad

const regiek = [];

for (const film of filmek) {
  if (film.ev < 2000) {
    regiek.push(film);
  }
}

Ahogy mostantól

const regiek =
  filmek.filter(f => f.ev < 2000);

Mit nyerünk vele? A bal oldalon az if és a push együtt hordozza a feltételt – ha elrontod valamelyiket, csendben rossz lesz az eredmény. A jobb oldalon egyetlen dolgot kell megfogalmazni: mikor kell egy elem. A gyűjtést a filter végzi.

Illesztési pontok

«film» – a callback paraméterének nevét te adod; szokás egyes számban nevezni azt, amiből a tömb áll.
«film.ev < 2000» – ide bármilyen igaz/hamis kifejezés jöhet, akár összetett is: f.ev < 2000 && f.mufaj === "sci-fi".
Darabszámhoz tedd a végére a .length-et – ez a „hány darab olyan van” típusú feladat kész megoldása.
Szöveges mező összehasonlítása mindig ===-szel, és pontosan ugyanúgy írva, ahogy az adatban áll (kis- és nagybetű számít).

Tipikus hibák

filmek.filter(f => f.cim) – itt nem feltétel áll, hanem érték. Minden nem üres szöveg igaznak számít, ezért minden elem átmegy. Ha az összes elemet visszakapod, ezt nézd meg.
filmek.filter(f => { f.ev < 2000; }) – kapcsos zárójel return nélkül. Minden elemre undefined jön vissza, az pedig hamis: az eredmény []. Ha egyetlen elemet sem kapsz vissza, ezt nézd meg.
A filter használata átalakításra. Nem alakít át, csak válogat – ha az elemeket is meg akarod változtatni, utána map kell (lásd P20).
Az eredmény eldobása: filmek.filter(…) értékadás nélkül semmit nem változtat.

P19find: az első találat

Kimenet
Új: find
Klasszikus → új

Mikor kell ez?

„keresd meg azt a filmet, amelyik…”, „add vissza a … azonosítójú elemet”, „melyik a …”. Ha pontosan egy elemre van szükséged – és nem egy egyelemű tömbre –, find kell.

// megvan: magát az elemet adja vissza, NEM tömböt
const horror = filmek.find(film => film.mufaj === "horror");
console.log(horror);

// nincs találat: undefined – nem üres tömb, nem hiba
const nincs = filmek.find(film => film.ev > 2030);
console.log(nincs);

// EZÉRT kell mindig ellenőrizni használat előtt
const talalat = filmek.find(film => film.cim === "Duna");

if (talalat) {
  console.log(`${talalat.cim} (${talalat.ev}), ${talalat.perc} perc`);
} else {
  console.log("Nincs ilyen film.");
}

// a helyét keresed, nem az elemet? findIndex – nincs találat: -1
console.log(filmek.findIndex(film => film.cim === "Duna"));
console.log(filmek.findIndex(film => film.cim === "Nincs ilyen"));

Kimenet: { cim: 'Alien', ev: 1979, perc: 117, mufaj: 'horror' } undefined Duna (2021), 155 perc 2 -1

Új nyelvi elem · find

A find ugyanolyan feltételt kap, mint a filter, de nem tömböt ad vissza, hanem az első olyan elemet, amelyikre a feltétel igaz. Ha egyetlen elem sem felel meg, undefined jön vissza – nem üres tömb, és nem hibaüzenet.

Amint megvan az első találat, abbahagyja a keresést. Ha több elem is megfelelne, csak az elsőt kapod meg – ha mindre szükséged van, filter kell.

filter → find

Ha filterrel keresel

const t = filmek.filter(
  f => f.mufaj === "horror"
);

console.log(t[0].cim);
// t egy TÖMB, ki kell venni

Ha finddal

const t = filmek.find(
  f => f.mufaj === "horror"
);

console.log(t.cim);
// t maga az OBJEKTUM

Mit nyerünk vele? Ugyanaz a feltétel, de nem kell a nulladik elemet kiszedni – és a szándék is látszik a kódon: itt egy dolgot keresünk. Vigyázz viszont: a bal oldalon üres találat esetén t[0] ad undefined-ot, a jobb oldalon maga a t. Mindkettőt ellenőrizni kell használat előtt.

Illesztési pontok

«film.mufaj === "horror"» – a feltétel ugyanaz, mint a filter-nél; azonosító szerinti kereséshez f.id === keresettId.
«Duna» – a keresett érték; ha a felhasználótól jön, kis-nagybetűtől függetlenné teheted: f.cim.toLowerCase() === cim.toLowerCase().
Az if (talalat) nem díszítés: enélkül a következő sor elszáll, ha nincs találat.
A helyre (indexre) van szükséged? findIndex – nincs találat esetén -1, nem undefined.

Tipikus hibák

Cannot read properties of undefined (reading 'cim') – nem volt találat, és a kapott undefined mezőjét kérted el. Ez a tantárgy leggyakoribb futásidejű hibája. Mindig if-fel védd.
find helyett filter – működik, de utána [0]-t kell írnod, és üres tömbnél ez is undefined. Egy elemhez find a tiszta megoldás.
if (talalat !== null) – a find nem null-t ad, hanem undefined-ot. Egyszerűen if (talalat) kell.
Több találatra számítani. A find az elsőnél megáll – ha az adatban két egyforma van, a másodikat sosem látod.

P20Láncolás: szűrj, aztán alakíts

Kimenet
Új: Miért lehet őket egymás után írni?
Klasszikus → új

Mikor kell ez?

„jelenítsd meg a … filmek címét”, „írd ki a 2000 előttiek listáját”, „készíts felsorolást azokból, amelyek…”. Amikor a feladat egyszerre szűr és alakít – vagyis a legtöbb listás feladatnál.

// filter → map → join: a három lépés egy láncban
const sorok = filmek
  .filter(f => f.mufaj === "sci-fi")
  .map(f => `${f.cim} (${f.perc} perc)`)
  .join(", ");

console.log(sorok);

// sorszámozva, egymás alá – a lapra kiírva
const lista = filmek
  .filter(f => f.ev < 2000)
  .map((f, i) => `${i + 1}. ${f.cim} (${f.ev})`)
  .join("\n");

console.log(lista);

// darabszám a lánc végén
console.log(filmek.filter(f => f.perc > 150).map(f => f.cim).length);

Kimenet: Mátrix (136 perc), Duna (155 perc), Interstellar (169 perc) 1. Mátrix (1999) 2. Alien (1979) 3. Hetedik (1995) 2

Miért lehet őket egymás után írni?

A filter tömböt ad vissza. A tömbnek pedig van map metódusa – tehát a filter eredményére azonnal meghívható, nem kell közben változóba tenni. A map is tömböt ad, ezért utána jöhet a join, ami már szöveget csinál belőle.

A lánc itt ér véget: a join után már szöveg van, annak nincs map metódusa. Ezért a join mindig utolsó.

A sorrend számít

Előbb szűrünk

filmek
  .filter(f => f.perc > 150)
  .map(f => f.cim);

// [ 'Duna', 'Interstellar' ]

Előbb alakítunk

filmek
  .map(f => f.cim)
  .filter(c => c.length > 5);

// [ 'Mátrix', 'Hetedik',
//   'Interstellar' ]

Mit nyerünk vele? Mindkettő működik, de mást csinál. A jobb oldalon a map után már csak szövegek vannak – a perc mező elveszett, arra már nem lehet szűrni. Az ökölszabály: szűrj azelőtt, hogy eldobnád az adatot, amire szűrni akarsz.

Illesztési pontok

A pontokat tedd új sorba és húzd be – így a lánc minden lépése külön sorban olvasható, és látod, melyiknél romlik el.
«, » – a join elválasztója: vessző a felsoroláshoz, "\n" az egymás alá, "" a HTML-darabok összefűzéséhez.
A map második paramétere (i) a szűrt tömbön belüli sorszám, nem az eredeti pozíció. Ezért kezdődik mindig 1-től.
Hibakereséshez szedd szét: tedd a filter eredményét külön változóba, és írasd ki. A lánc csak rövidítés.

Tipikus hibák

filter és map felcserélése. Nem hibaüzenet lesz belőle, hanem rossz eredmény – lásd a fenti két oszlopot.
join a lánc közepén: utána már szöveg van, szoveg.map is not a function jön.
A forEach beláncolása: filmek.filter(…).forEach(…).map(…) – a forEach undefined-ot ad, ezért Cannot read properties of undefined. A forEach mindig a lánc végén áll, ha egyáltalán.
Üres eredmény esetén a join üres szöveget ad – a lapon nem látszik semmi. Ha ez zavaró, if (sorok.length === 0) ágban írj ki „Nincs találat” üzenetet.

E · Destrukturálás és másolás

Két kérdésre felel: hogyan veszed ki kényelmesen, amire szükséged van egy objektumból vagy tömbből – és hogyan változtatsz rajta úgy, hogy az eredeti adat érintetlen maradjon.

P21Objektum-destrukturálás

Kimenet
Új: const { cim, ev } = film;
Klasszikus → új

Mikor kell ez?

amikor egy objektum több mezőjét is használod, és elegeded van a film.cim, film.ev, film.perc ismétlésével. Különösen a callbackekben: filmek.map(({ cim }) => …).

const film = { id: 1, cim: "Mátrix", ev: 1999, perc: 136, ertekeles: 5 };

// 1) mezők változóba – a NÉV számít, a sorrend nem
const { cim, ev } = film;

// 2) átnevezés (mező: újNév) és alapérték (mező = érték)
const { cim: filmCim } = film;
const { rendezo = "ismeretlen" } = film;

// 3) a paraméterlistában – a függvény továbbra is egy egész objektumot kap
const leiras = ({ cim, ev }) => `${cim} (${ev})`;

console.log(cim, ev);
console.log(filmCim, rendezo);
console.log(leiras(film));

Kimenet: Mátrix 1999 Mátrix ismeretlen Mátrix (1999)

Új nyelvi elem · const { cim, ev } = film;

A bal oldali kapcsos zárójel itt nem objektumot hoz létre, hanem mintát ad: „vedd ki a film-ből a cim és az ev nevű mezőt, és tedd őket azonos nevű változókba”. Ami nincs benne az objektumban, az undefined lesz – vagy az alapérték, ha adtál.

A fordítottja a shorthand property: ha objektumot építesz, és a mező neve ugyanaz, mint a változóé, elég egyszer leírni – { cim, ev } ugyanaz, mint { cim: cim, ev: ev }.

Klasszikus alak → új alak

Ahogy eddig írtad

const kartya = film =>
  `${film.cim} (${film.ev}) - ` +
  `${film.mufaj}, ${film.perc} perc`;

Ahogy mostantól

const kartya = ({ cim, ev, mufaj, perc }) =>
  `${cim} (${ev}) - ${mufaj}, ${perc} perc`;

Mit nyerünk vele? A függvény első sora megmondja, mely mezőkkel dolgozik – nem kell a törzsben keresgélni. A film. előtag eltűnik, így a sablon pontosan úgy néz ki, ahogy a kimenet. A hívás helyén semmi nem változik: továbbra is kartya(film).

Illesztési pontok

«cim», «ev» – a mezők neve betűre pontosan olyan, mint az objektumban. Csak azokat sorold fel, amelyeket használsz.
Átnevezés: { cim: filmCim } – bal oldalt a mező, jobb oldalt az új változó.
A map-ben az index a második paraméter: ({ cim }, i) => … – nem a kapcsos zárójelen belül.

Tipikus hibák

const { cim } = talalat;, amikor a find nem talált semmit: TypeError: Cannot destructure property 'cim' of 'talalat' as it is undefined. Előbb ellenőrizd, van-e találat.
Az alapérték csak undefined-nál lép életbe: { ertekeles = 3 } egy 0-s értékelésnél 0 marad, nem 3.
A destrukturáló függvényt két értékkel hívják: leiras("Mátrix", 1999) – nincs hibaüzenet, csak undefined (undefined).

P22Tömb-destrukturálás és rest

Kimenet
Új: const [a, ...tobbi] = tomb;
Klasszikus → új

Mikor kell ez?

„az első elem”, „a többi”, és amikor egy függvény két értéket ad vissza egy tömbben, amit két változóba akarsz tenni. Itt nem a név, hanem a pozíció számít.

const cimek = ["Mátrix", "Alien", "Duna", "Hetedik"];

// 1) pozíció szerint – itt a SORREND számít, a nevet te adod
const [elso, masodik] = cimek;

// 2) kihagyás vesszővel
const [, , harmadik] = cimek;

// 3) a maradék egy új tömbbe (rest) – csak utolsóként állhat
const [egyik, ...tobbi] = cimek;

// 4) függvény, amely két értéket ad vissza – spread: lásd P23
const minMax = t => [Math.min(...t), Math.max(...t)];
const [min, max] = minMax([136, 117, 155]);

console.log(elso, masodik, harmadik);
console.log(egyik, tobbi);
console.log(min, max);

Kimenet: Mátrix Alien Duna Mátrix [ 'Alien', 'Duna', 'Hetedik' ] 117 155

Új nyelvi elem · const [a, ...tobbi] = tomb;

Szögletes zárójellel ugyanaz a gondolat, mint a P21-ben – de az első változó az első elemet kapja, a második a másodikat, függetlenül attól, hogy minek nevezed őket. Ha több változót kérsz, mint ahány elem van, a fölöslegesek undefined-ot kapnak.

A ...tobbi a rest: az = bal oldalán a három pont összegyűjti, ami még maradt, egy új tömbbe.

Klasszikus alak → új alak

Ahogy eddig írtad

const eredmeny = minMax(percek);
const min = eredmeny[0];
const max = eredmeny[1];

Ahogy mostantól

const [min, max] = minMax(percek);

Mit nyerünk vele? Nincs szükség segédváltozóra, és nincs [0], [1], amit el lehet téveszteni. A két visszakapott értéknek te adsz nevet, azon a helyen, ahol használod.

Illesztési pontok

«elso», «masodik» – bármilyen név lehet; csak a sorrend köti őket az elemekhez.
Kihagyáshoz csak a vessző marad: [, masodik].
Kételemű eredményhez: a függvény [a, b]-t ad vissza, a hívó const [x, y] = …-nal veszi át.

Tipikus hibák

Kapcsos zárójel szögletes helyett: const { elso } = cimek; – a tömbnek nincs elso nevű mezője, az eredmény undefined.
A rest nem utolsó helyen: const [...eleje, utolso] = t; – SyntaxError.
A rest és a spread összekeverése: a ... a bal oldalon gyűjt, a jobb oldalon terít (P23).

P23Spread: másolás módosítás nélkül

Kimenet
Új: ...
Klasszikus → új

Mikor kell ez?

„adjon hozzá a listához”, „törölje”, „jelölje kedvencnek”, „módosítsa az értékelését” – úgy, hogy az eredeti adat ne változzon. Három művelet, és mindhárom új tömböt ad vissza.

const filmek = [
  { id: 1, cim: "Mátrix", kedvenc: true  },
  { id: 2, cim: "Alien",  kedvenc: false },
  { id: 3, cim: "Duna",   kedvenc: false }
];
const uj = { id: 4, cim: "Avatar", kedvenc: false };

// 1) HOZZÁADÁS – új tömb, a végén az új elem
const bovitett = [...filmek, uj];

// 2) TÖRLÉS – ami nem az, azt megtartjuk
const torolt = filmek.filter(f => f.id !== 2);

// 3) MÓDOSÍTÁS – az egyet lemásoljuk és felülírjuk, a többit átvesszük
const modositott = filmek.map(f =>
  f.id === 3 ? { ...f, kedvenc: true } : f
);

console.log(bovitett.length, torolt.length, modositott.length);
console.log(modositott.map(f => f.kedvenc));
console.log(filmek.length, filmek.map(f => f.kedvenc));   // az eredeti VÁLTOZATLAN

Kimenet: 4 2 3 [ true, false, true ] 3 [ true, false, false ]

Új nyelvi elem · ... (spread operator)

Az = jobb oldalán a három pont szétteríti a tömböt vagy az objektumot, mintha elemenként írtad volna le. [...filmek, uj] egy új tömb a régi elemekkel és az újjal; { ...f, kedvenc: true } egy új objektum a régi mezőkkel, egy felülírt mezővel.

Miért kell ez? Mert az = nem másol: const masolat = filmek; után ugyanarra a tömbre két név mutat, és amit az egyiken keresztül módosítasz, a másikon is látszik.

Módosító alak → másoló alak

Ami az eredetit is átírja

filmek.push(uj);

filmek.splice(1, 1);

filmek[2].kedvenc = true;

Ami új tömböt ad

[...filmek, uj]

filmek.filter(f => f.id !== 2)

filmek.map(f => f.id === 3
  ? { ...f, kedvenc: true } : f)

Mit nyerünk vele? A bal oldal rövidebb, de utána nincs meg, mi volt előtte – és ha valahol máshol is erre a tömbre hivatkozol, ott is váratlanul megváltozik. A jobb oldal mindig új tömböt ad, az eredeti érintetlen marad, és a régit meg az újat össze is tudod hasonlítani.

Illesztési pontok

«uj» – a hozzáadandó elem; az elejére tenni: [uj, ...filmek].
«2», «3» – az azonosító, amire szűrsz; általában függvényparaméter: (lista, id) => ….
«kedvenc: true» – a felülírt mező(k); az ellentétére váltás: kedvenc: !f.kedvenc.
Az eredményt el kell tárolni – egyik művelet sem módosít, mind visszaad.

Tipikus hibák

Rossz sorrend: { kedvenc: true, ...f } – a ...f később jön, és visszaírja az eredetit. A módosítás mindig a spread után áll.
push a „másolásnál”: az új hosszt adja vissza, nem a tömböt – a következő lépés lista.filter is not a function hibával áll meg.
A spread csak egy szintet másol: [...filmek] új tömb, de benne ugyanazok az objektumok. Ha egy elemet módosítasz, azt is másold: { ...f, … }.

P24Ternáris és && kifejezésként

Kimenet
Új: a && b
Klasszikus → új

Mikor kell ez?

„jelenjen meg a … mellett, ha kedvenc”, „csak akkor írja ki, ha…”, „ha nincs ilyen, ne legyen hiba”. Ott, ahová if nem írható – egy ${ } belsejébe, egy implicit return-ös callbackbe. (A ternáris alapjai: P06.)

const filmek = [
  { cim: "Mátrix",       ertekeles: 5, kedvenc: true  },
  { cim: "Interstellar", ertekeles: 0, kedvenc: false }
];

// 1) ternáris a template literalban – két érték közül választ
for (const { cim, kedvenc } of filmek) {
  console.log(`${cim}${kedvenc ? " (kedvenc)" : ""}`);
}

// 2) && – ha a bal oldal igaz, a jobb oldal értéke; ha nem, a bal oldalé
const i = filmek[1];
console.log(i.ertekeles && "ertekelt");       // 0 – a nullát adja vissza!
console.log(i.ertekeles > 0 && "ertekelt");   // false – valódi feltétel

// 3) short-circuit: ha nincs találat, a jobb oldal le sem fut
const talalat = filmek.find(f => f.cim === "Nincs ilyen");
console.log(talalat && talalat.cim);          // undefined – nem TypeError

Kimenet: Mátrix (kedvenc) Interstellar 0 false undefined

Új nyelvi elem · a && b (visszatérési érték)

A && nem feltétlenül true/false-t ad. Balról jobbra halad, az első hamisnak számító (falsy) értéknél megáll és azt adja vissza; ha nem talál ilyet, az utolsót. Falsy: false, 0, "", undefined, null, NaN – minden más truthy, a "0" és az üres tömb [] is.

Ha a bal oldal falsy, a jobb oldal ki sem értékelődik (short-circuit evaluation). Ezért véd a talalat && talalat.cim a TypeError ellen.

Klasszikus alak → új alak

Ahogy eddig írtad

let sor = film.cim;
if (film.kedvenc) {
  sor = sor + " (kedvenc)";
}
console.log(sor);

Ahogy mostantól

console.log(
  `${film.cim}${film.kedvenc
    ? " (kedvenc)" : ""}`
);

Mit nyerünk vele? A bal oldalon egy segédváltozó kell és három sor, mert az if utasítás – nincs értéke. A jobb oldalon a ternáris kifejezés, ezért beírható oda, ahol az értéket használod. Hosszabb feltételnél viszont nyugodtan maradj a bal oldali alaknál: két szint fölött a ternáris olvashatatlan.

Illesztési pontok

«kedvenc» – a feltétel; bármilyen igaz/hamis kifejezés.
«" (kedvenc)"» – amit igaz esetben kiír; hamis esetben "" (üres szöveg), ha semmi nem kell.
Szövegben a ternáris a biztos választás; a && hamis esetben false-t írna ki.

Tipikus hibák

A 0-csapda: film.ertekeles && … 0-s értékelésnél 0-t ad, nem false-t. A && elé valódi feltételt írj: ertekeles > 0.
&& template literalban: ${kedvenc && " *"} – a nem kedvenc filmeknél false jelenik meg a szövegben.
Egymásba ágyazott ternáris: két szint fölött olvashatatlan – ott if kell.

A készlet a tanmenettel együtt bővül: csak olyan panel kerül bele, amiről az órán már szó esett.

Minden panel kódja lefutott böngészőben; a „Kimenet” sorokban az áll, amit tényleg kiírt. A panelekhez tartozik egy futtatható HTML-változat is panelenként, ahol a kód a lap megnyitásakor le is fut, valamint egy kereshető katalógus másolás gombokkal.

Frontend programozás és tesztelés · 13. évfolyam · Váci SZC Petzelt József Technikum

Utolsó frissítés: 2026. 09. 23.

Vissza a kódpanelekhez · Oktatás