ECMAScript¶
Az ECMAScript egy szabvány, amely meghatározza a JavaScript nyelv alapjait és működését. Az ECMAScript specifikációi alapján fejlesztik és frissítik a JavaScriptet, évente új verziókat kiadva. Az ES6 (2015) volt az egyik legjelentősebb frissítés, amely számos modern fejlesztést hozott a nyelvbe, és azóta minden évben újabb funkciókat adtak hozzá.
ES6 (ECMAScript 2015)¶
Arrow Function (Nyíl függvények)¶
Az arrow function rövidebb szintaxist biztosít a függvények írásához, és nem köt saját this értéket, hanem az aktuális környezettől örökli azt.
Miért előnyös?
Rövidebb, tömörebb szintaxis. Nincs külön this-kötés, így egyszerűbb a használat például callback-ek esetén.
Let és Const¶
Korábban a var kulcsszót használtuk változók deklarálására, de az ES6 bevezette a let és const kulcsszavakat, amelyek több rugalmasságot és biztonságot nyújtanak.
- let: Blokkon belüli (block-scoped) változó, amely újraírható.
- const: Szintén blokkon belüli változó, de nem lehet újraértékelni, azaz állandóként viselkedik.
let name = "Alice";
name = "Bob"; // Újraírható
const age = 30;
age = 25; // Hibát dob, mert const-tal deklarált változó
Miért előnyös?
Blokkhatók által védett változók. const-tal biztosíthatjuk, hogy a változók értékei ne változzanak meg véletlenül.
Template Literals (Sablon stringek)¶
Az ES6 sablon stringeket biztosít a több soros stringek létrehozására, valamint változók beillesztésére stringbe szintaktikailag sokkal kényelmesebben.
Miért előnyös?
Több soros stringek létrehozása egyszerűen. Könnyű változók és kifejezések stringbe illesztése.
Destructuring Assignment (Bontásos hozzárendelés)¶
Az ES6 lehetővé teszi objektumok és tömbök elemeinek könnyedén történő kinyerését változókba.
// Objektum destructuring
const person = { name: "John", age: 30 };
const { name, age } = person;
console.log(name); // John
// Tömb destructuring
const numbers = [1, 2, 3];
const [first, second] = numbers;
console.log(first); // 1
Miért előnyös?
Egyszerűbb és olvashatóbb kód a változók kinyerésére objektumokból vagy tömbökből.
Default Parameters (Alapértelmezett paraméterek)¶
Az ES6-ban lehetőség van alapértelmezett értékeket adni a függvény paramétereinek.
function greet(name = "Guest") {
return `Hello, ${name}!`;
}
console.log(greet()); // Hello, Guest!
console.log(greet("Alice")); // Hello, Alice!
Miért előnyös?
Elkerülhetők a null vagy undefined paraméterek kezelése függvények hívásakor.
Spread Operator (...)¶
A spread operátor tömbök és objektumok elemeinek könnyű szétszórását és összefoglalását teszi lehetővé.
// Tömb szétszórása
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];
console.log(arr2); // [1, 2, 3, 4, 5]
// Objektum másolása és módosítása
const person = { name: "Alice", age: 25 };
const updatedPerson = { ...person, age: 26 };
console.log(updatedPerson); // { name: "Alice", age: 26 }
Miért előnyös?
Egyszerű tömb- vagy objektummásolás és egyesítés.
Rest Parameters (Rest paraméterek)¶
A rest operátor (...) lehetővé teszi, hogy a függvények változó számú paramétert vegyenek fel és kezeljenek tömbként.
function sum(...numbers) {
return numbers.reduce((total, num) => total + num, 0);
}
console.log(sum(1, 2, 3, 4)); // 10
Miért előnyös?
Könnyű kezelni változó számú függvény paramétert.
Classes (Osztályok)¶
Bár a JavaScript már ES6 előtt is támogatta az objektumorientált programozást, az ES6 bevezette a class szintaxist, ami tisztább és érthetőbb módon teszi lehetővé az objektumok kezelését.
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
greet() {
console.log(`Hello, my name is ${this.name}`);
}
}
const person = new Person("John", 30);
person.greet(); // Hello, my name is John
Miért előnyös?
Az osztályok szintaxisa egyszerűbbé és átláthatóbbá teszi az OOP programozást.
Modules (Modulok)¶
Az ES6 bevezette a natív modulok kezelését, így most már importálhatunk és exportálhatunk kódot különböző fájlok között.
// modul.js
export const add = (a, b) => a + b;
// main.js
import { add } from './modul.js';
console.log(add(2, 3)); // 5
Miért előnyös? Kód szervezettebbé tétele és újrafelhasználása fájlok között.
Promises¶
Az ES6 bevezette a Promise objektumot, amely lehetővé teszi az aszinkron műveletek egyszerűbb kezelését.
const fetchData = () => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve("Data fetched!");
}, 1000);
});
};
fetchData().then((data) => console.log(data)); // Data fetched!
Miért előnyös? Könnyű aszinkron műveletek kezelése, elkerülve a callback poklot.
Symbol¶
Az ES6 bevezette a Symbol típusú primitívet, amely egyediséget biztosít objektumok tulajdonságainak.
Miért előnyös?
Egyedi, nem ütköző tulajdonságok létrehozása objektumokban.
ES7 (ECMAScript 2016)¶
Exponenciációs operátor (**)¶
Az exponenciációs operátor a hatványozást egyszerűsíti.
Array.prototype.includes¶
Az includes metódus ellenőrzi, hogy egy tömb tartalmaz-e egy adott elemet.
ES8 (ECMAScript 2017)¶
String padding¶
A padStart() és padEnd() metódusok lehetővé teszik a stringek kitöltését egy adott hosszúságú stringgé.
Object.entries()¶
Az Object.entries() metódus visszaadja egy objektum kulcs-érték párokat tartalmazó tömbjét.
const person = { name: "Alice", age: 30 };
console.log(Object.entries(person)); // [["name", "Alice"], ["age", 30]]
Object.values()¶
Az Object.values() metódus visszaadja egy objektum értékeit egy tömbben.
ES9 (ECMAScript 2018)¶
Rest/Spread operátor objektumokra is¶
Most már objektumoknál is használható a spread (...) operátor másoláshoz vagy új objektumok létrehozásához.
const person = { name: "Alice", age: 25 };
const updatedPerson = { ...person, age: 26 };
console.log(updatedPerson); // { name: "Alice", age: 26 }
Aszinkron iterátorok¶
Az aszinkron iterátorok lehetővé teszik az adatok fokozatos feldolgozását aszinkron hívások során, például adatfolyamok (streams) olvasásakor.
ES10 (ECMAScript 2019)¶
Array.prototype.flat()¶
A flat() metódus laposítja a tömb beágyazott tömbjeit.
Array.prototype.flatMap()¶
A flatMap() metódus map és flat metódusok kombinációja.
Object.fromEntries()¶
Az Object.fromEntries() metódus visszaalakítja egy tömb kulcs-érték párokat tartalmazó objektumot egy objektummá.
const entries = [["name", "Alice"], ["age", 30]];
console.log(Object.fromEntries(entries)); // { name: "Alice", age: 30 }
ES11 (ECMAScript 2020)¶
Optional Chaining¶
Az opcionális láncolás (?.) lehetővé teszi a mélyen beágyazott objektumok tulajdonságainak biztonságos hozzáférését.
const person = { name: "Alice", address: { city: "New York" } };
console.log(person.address?.city); // "New York"
Nullish Coalescing¶
A nullish coalescing operátor (??) visszaadja a jobb oldali operandust, ha a bal oldali operandus null vagy undefined.
ES12 (ECMAScript 2021)¶
replaceAll¶
replaceAll() string metódus: A replaceAll() minden előfordulást lecserél a stringben.
WeakRefs és FinalizationRegistry¶
Ezek lehetővé teszik a gyenge hivatkozásokat objektumokra, ami a memória optimalizálását segíti, de ritkábban használt funkciók.
ES13 (ECMAScript 2022)¶
Array.prototype.at()¶
Az at() metódus segítségével negatív indexekkel is hivatkozhatunk a tömb elemeire.
Top-level await¶
Most már közvetlenül használhatunk await kulcsszót az ES modulok legfelső szintjén.