Modern JavaScript nyelvi eszközök – destructuring, spread/rest, template literal, optional chaining, nullish coalescing és ES Modules.

ES6+ nyelvi eszközök és modulok

Ez az oldal a teljes jegyzet 11. és 16. fejezetét foglalja össze: modern nyelvi eszközök és modulrendszer.
Forrás: content/javascript/javascript-full.mdx.

1. Destructuring – értékek "kibontása"

Array destructuring

const [elso, masodik, harmadik] = [10, 20, 30];

console.log(elso);    // 10
console.log(masodik); // 20

// Elemek kihagyása:
const [a, , c] = [1, 2, 3];
console.log(c); // 3

Object destructuring

const user = { nev: "Adam", kor: 25, varos: "Budapest" };

const { nev, kor } = user;
console.log(nev); // "Adam"
console.log(kor); // 25

// Átnevezés
const { nev: felhasznaloNev } = user;
console.log(felhasznaloNev); // "Adam"

// Default érték
const { email = "nincs@email.com" } = user;
console.log(email); // "nincs@email.com"

Függvényparamétereknél különösen hasznos:

function felhasznaloMegjelenit({ nev, kor = 0 }) {
  console.log(`${nev}, ${kor} éves`);
}

2. Spread és Rest (`...`)

... jelölés – attól függően, hol használod:

spread: "szétszórja" az elemeket,
rest: "összegyűjti" a maradékot.

Spread – értékek szétosztása

// Tömbök összefűzése
const tomb1 = [1, 2, 3];
const tomb2 = [4, 5, 6];
const egyutt = [...tomb1, ...tomb2]; // [1, 2, 3, 4, 5, 6]

// Object másolás / bővítés
const alap = { nev: "Adam", kor: 25 };
const bovitett = { ...alap, varos: "Budapest" };
// { nev: "Adam", kor: 25, varos: "Budapest" }

// Függvényhívásnál argumentumok "szétszórása"
const szamok = [1, 2, 3];
console.log(Math.max(...szamok)); // 3

Rest – "maradék" összegyűjtése

// Függvényparaméterek
function osszead(elso, masodik, ...tobbi) {
  console.log(elso);    // 1
  console.log(masodik); // 2
  console.log(tobbi);   // [3, 4, 5]
}

osszead(1, 2, 3, 4, 5);

// Array destructuring
const [fej, ...farok] = [1, 2, 3, 4];
console.log(fej);   // 1
console.log(farok); // [2, 3, 4]

3. Template literals

Template literal = backtick () között írt string, $` beszúrással.

const nev = "Adam";
const kor = 25;

// Régi stílus
const regi = "Szia, " + nev + "! " + kor + " éves vagy.";

// Template literal
const uj = `Szia, ${nev}! ${kor} éves vagy.`;

// Több soros string
const tobb = `
  Első sor
  Második sor
  ${nev} – dinamikus érték
`;

// Kifejezéseket is tud
const eredmeny = `2 + 2 = ${2 + 2}`;

4. Optional chaining (`?.`)

Biztonságos hozzáférés mélyen egymásba ágyazott property‑khöz:

const user = {
  profil: {
    nev: "Adam"
  }
};

// Régi, "defenzív" minta
const varos = user &&
              user.profil &&
              user.profil.cim &&
              user.profil.cim.varos;

// Optional chaining – sokkal tisztább
const varos2 = user?.profil?.cim?.varos; // undefined, ha bármelyik lépés hiányzik
const nev2 = user?.profil?.nev;          // "Adam"

// Függvényhívásnál is
const result = user?.getAdatok?.(); // undefined, ha a metódus nem létezik

5. Nullish coalescing (`??`)

?? csak akkor vált alapértékre, ha az érték null vagy undefined.
Ez különbözik az || operátortól, ami minden falsy értéknél vált.

const ertek1 = null ?? "alapérték"; // "alapérték"
const ertek2 = undefined ?? 42;     // 42

const ertek3 = 0 ?? 100;            // 0   – 0 nem null/undefined
const ertek4 = 0 || 100;           // 100 – mert 0 falsy

Használd ??‑t, ha 0, "" vagy false legális érték, és csak null/undefined esetén akarsz alapértéket.

6. ES Modules – `import` / `export`

Named export

// utils.js
export function osszead(a, b) {
  return a + b;
}

export const PI = 3.14;

export const formatDatum = (datum) =>
  datum.toLocaleDateString("hu-HU");

Importálás:

// main.js
import { osszead, PI } from "./utils.js";

console.log(osszead(2, 3)); // 5
console.log(PI);            // 3.14

// Átnevezés importnál
import { osszead as add } from "./utils.js";

Default export

// UserCard.js – egyetlen "fő" dolog
export default function UserCard({ nev }) {
  return `<div>${nev}</div>`;
}

// Import – tetszőleges névvel
import UserCard from "./UserCard.js";
import BarmiIsLehet from "./UserCard.js";

Mindent importálni egy namespace‑be

import * as utils from "./utils.js";

utils.osszead(2, 3);
utils.PI;

7. Mikor named, mikor default export?

Named export:

ha egy fájlból több dolgot exportálsz (segédfüggvények, konstansok, hookok),
a név az API része, és szeretnéd, ha beszédes lenne (useAuth, formatDate).

Default export:

ha a fájl egy fő "dolgot" reprezentál:
- React komponens,
- fő osztály,
- top‑level függvény.

Összefoglaló – ES6+ és modulok

Destructuring: strukturált adatok kicsomagolása tömörebb szintaxissal.
Spread/Rest: tömbök/objectek másolása, merge‑ölése + "maradék" összegyűjtése.
Template literal: olvasható stringek ${} beszúrással, több sorral.
Optional chaining + nullish coalescing: biztonságos property‑elérés és alapértékadás.
ES Modules: export / import alapok; named vs default export szerepe.

Következő oldal:
Aszinkron JS és Event Loop →

ES6+ és modulok

On this page