Gyakori JavaScript hibák (var, this, referencia vs érték, == vs ===, typeof null) és tiszta kód irányelvek összefoglalva.

Tipikus hibák és best practice-ek

Ez az oldal a teljes jegyzet 17–19. fejezetének kivonata: klasszikus JS csapdák és tiszta kód minták.
Forrás: content/javascript/javascript-full.mdx.

1. Klasszikus hibák

`var` ciklusban

// Probléma
for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100); // 3, 3, 3
}

// Megoldás – let
for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100); // 0, 1, 2
}

Ok: var function scope‑ú, a setTimeout callback mind ugyanazt az i‑t látja.
Tanulság: használj let/const‑ot, ne var‑t.

`this` félreértése

// Problémás minta
const user = {
  nev: "Adam",
  udvozol() {
    setTimeout(function() {
      console.log(this.nev); // undefined
    }, 100);
  }
};

// Megoldás – arrow function, ami a külső this-t örökli
const user2 = {
  nev: "Adam",
  udvozol() {
    setTimeout(() => {
      console.log(this.nev); // "Adam"
    }, 100);
  }
};

Szabály: object metódushoz normál function, belső callbackhez gyakran arrow function.

Kezeletlen Promise hibák

// Problémás – a hiba "elszáll"
async function leker() {
  return adatok; // ha itt hiba van, nem kezeled
}

leker(); // se .catch, se try/catch

Megoldás .catch‑sel:

leker().catch(hiba => console.error(hiba));

Vagy async/await + try/catch:

async function futo() {
  try {
    await leker();
  } catch (hiba) {
    console.error(hiba);
  }
}

Reference vs value félreértése

// Probléma
const eredeti = { nev: "Adam" };
const masolat = eredeti; // ugyanaz az object
masolat.nev = "Peter";

console.log(eredeti.nev); // "Peter"

Helyes shallow copy:

const helyesMasolat = { ...eredeti };
helyesMasolat.nev = "Peter";

console.log(eredeti.nev); // "Adam"

`==` vs `===`

// Meglepetés
0 == false;     // true
"" == false;    // true
null == undefined; // true

if (0 == false) {
  console.log("Egyenlő!"); // lefut
}

// Biztonságosabb
0 === false; // false

Irányelv: mindig === / !== összehasonlítókat használd.

`typeof null === "object"`

typeof null; // "object" – ismert, történelmi bug

// Helyes ellenőrzés:
ertek === null;      // csak null
ertek == null;       // null vagy undefined (la za, de szándékos)

2. Tiszta kód irányelvek

Érthető nevek

// Rossz
const x = 86400;
const fn = (a, b) => a + b;

// Jó
const MASODPERCEK_NAPBAN = 86400;
const osszead = (a, b) => a + b;

Használj döbbenet nélkül olvasható neveket – 6 hónap múlva is érthető legyen.

Kis, jól fókuszált függvények

// Rossz – túl sok felelősség
function felhasznaloKezel(id) {
  // letölt, validál, megjelenít, logol stb.
}

// Jobb – egy felelősség / függvény
async function felhasznaloLetolt(id) { /* ... */ }
function felhasznaloValidal(user) { /* ... */ }
function felhasznaloMegjelenit(user) { /* ... */ }

`const` alapból

// Ami nem változik, az legyen const
const MAX_UJRAPROBALAS = 3;
const felhasznalo = { nev: "Adam" };

// Ami tényleg változik, az let
let szamlalo = 0;

Ez segít véletlen módosítások elkerülésében, és explicit jelez, mi az "állandó".

Kerüld a "mágikus számokat"

// Rossz
if (kor > 17) {
  // ...
}

// Jó
const FELNOTT_KOR = 18;
if (kor >= FELNOTT_KOR) {
  // ...
}

Ha egy szám / string üzleti szabályt fejez ki, adj neki nevet.

Early return – lapos logika

// Rossz – mély beágyazás
function feldolgoz(user) {
  if (user) {
    if (user.aktiv) {
      if (user.email) {
        // logika
      }
    }
  }
}

// Jobb – korai kilépés
function feldolgoz(user) {
  if (!user) return;
  if (!user.aktiv) return;
  if (!user.email) return;

  // tényleges logika – lapos struktúra
}

3. Összefoglaló táblázatok

Kritikus fogalmak röviden

Fogalom	Rövid magyarázat	Mikor fontos?
Hoisting	Deklarációk a scope tetejére kerülnek	`var`, function declaration
Closure	Belső függvény megőrzi a külső scope‑ot	állapot, adatrejtés
Scope	Hol látható egy változó	minden változó deklarációnál
Prototype	JS öröklődési modell	class, OOP
Event Loop	Aszinkron kód ütemezése (stack, queue‑k)	async kód, teljesítmény
Promise	Aszinkron érték ígérete	hálózati kérések, async flow
async/await	Promise‑okra épülő szinkron‑szerű szintaxis	modern async kód

Primitive vs reference – gyors összevetés

	Primitive	Reference
Típusok	string, number, boolean, null, undefined, symbol, bigint	object, array, function
Tárolás	érték	referencia (memóriacím)
Másolás	új érték, független	új referencia ugyanarra az objektumra
Módosítás	immutable (új érték lesz)	mutable (belső állapot változhat)

Zárás

A legtöbb "furcsa" JS hiba 4 forrásra vezethető vissza:
1. var + scope / hoisting,
2. this félreértése,
3. referencia vs érték keverése,
4. aszinkron kód (Promise / event loop) félreértése.
Ha ezeket a mintákat tudatosan kerülöd, és a best practice‑eket követed, a JS kódod jóval kiszámíthatóbb és olvashatóbb lesz.

További részletekhez és teljes példákhoz:
content/javascript/javascript-full.mdx

Tipikus hibák és best practice-ek

On this page