Hírek

Új funkciók a JavaScript ES2025-ben

Kristóf Kristóf
2025. január 18.
6 perc olvasás

A JavaScript fejlődése sosem áll meg. Az ES2025 (ECMAScript 2025) számos új funkciót hoz magával, amelyek megkönnyítik a fejlesztők munkáját és hatékonyabbá teszik a kódot. Nézzük meg a legfontosabb újításokat!

1. Temporal API - Végre jó dátumkezelés!

A Date objektum problémái régóta kínozzák a JavaScript fejlesztőket. A Temporal API modern, problémamentes dátum- és időkezelést hoz: 

// Régi módszer (Date)
const date = new Date();
console.log(date.getMonth()); // 0-11 (!!)

// Új módszer (Temporal)
const now = Temporal.Now.plainDateISO();
console.log(now.month); // 1-12 (logikus!)

// Időzónák kezelése egyszerűen
const meeting = Temporal.ZonedDateTime.from({
  timeZone: 'Europe/Budapest',
  year: 2025,
  month: 3,
  day: 15,
  hour: 14
});

// Dátum matematika
const nextWeek = now.add({ days: 7 });
const diff = nextWeek.since(now);

2. Records és Tuples - Immutable adatszerkezetek

A Records és Tuples immutable (megváltoztathatatlan) adatszerkezetek, amelyek értékük alapján hasonlíthatók össze: 

// Record (immutable objektum)
const user = #{
  name: 'Kristóf',
  age: 17,
  skills: #['JavaScript', 'React']
};

// Tuple (immutable tömb)
const coords = #[40.7128, 74.0060];

// Érték alapú összehasonlítás
const user1 = #{ name: 'Kristóf' };
const user2 = #{ name: 'Kristóf' };
console.log(user1 === user2); // true!

// Megváltoztathatatlanság
user.name = 'Kovács'; // TypeError!

3. Pipeline Operator - Olvashatóbb kód

A pipeline operátor (|>) lehetővé teszi a függvények láncolását olvashatóbb módon: 

// Régi módszer
const result = parseFloat(
  cleanSpaces(
    toUpperCase(
      getUserInput()
    )
  )
);

// Új módszer pipeline-nal
const result = getUserInput()
  |> toUpperCase
  |> cleanSpaces
  |> parseFloat;

// Összetettebb példa
const discountedPrice = price
  |> (p => p * 0.8)
  |> Math.round
  |> (p => `${p} Ft`);

4. Pattern Matching - Hatékony ágválasztás

A pattern matching egy sokkal kifejezőbb alternatívája a switch-case-nek: 

// Régi módszer (switch)
let message;
switch(status) {
  case 'loading':
    message = 'Töltés...';
    break;
  case 'success':
    message = 'Sikeres!';
    break;
  default:
    message = 'Hiba';
}

// Új módszer (pattern matching)
const message = match(status) {
  when 'loading': 'Töltés...',
  when 'success': 'Sikeres!',
  when 'error': 'Hiba történt',
  default: 'Ismeretlen állapot'
};

// Összetett mintaillesztés
const processData = match(data) {
  when { type: 'user', role: 'admin' }: handleAdmin(data),
  when { type: 'user', role: 'guest' }: handleGuest(data),
  when { type: 'post' }: handlePost(data),
  default: handleUnknown(data)
};

5. Decorators - Metaprogramozás egyszerűen

A decoratorok lehetővé teszik osztályok és metódusok viselkedésének módosítását: 

// Egyszerű logger decorator
function log(target, context) {
  return function(...args) {
    console.log(`Calling ${context.name} with`, args);
    return target.apply(this, args);
  };
}

class Calculator {
  @log
  add(a, b) {
    return a + b;
  }
}

const calc = new Calculator();
calc.add(5, 3); // Log: "Calling add with [5, 3]"

// Deprecation decorator
function deprecated(message) {
  return function(target, context) {
    return function(...args) {
      console.warn(`${context.name} is deprecated: ${message}`);
      return target.apply(this, args);
    };
  };
}

class OldAPI {
  @deprecated('Use newMethod() instead')
  oldMethod() {
    return 'old';
  }
}

6. Array Grouping - Tömbök csoportosítása

Végre natív támogatás a tömbök csoportosításához kulcs alapján: 

const users = [
  { name: 'Anna', role: 'admin' },
  { name: 'Béla', role: 'user' },
  { name: 'Cili', role: 'admin' },
  { name: 'Dani', role: 'user' }
];

// Csoportosítás szerepkör szerint
const byRole = users.group(user => user.role);
// {
//   admin: [{ name: 'Anna', ...}, { name: 'Cili', ...}],
//   user: [{ name: 'Béla', ...}, { name: 'Dani', ...}]
// }

// Vagy Map-ként
const byRoleMap = users.groupToMap(user => user.role);

7. Import Assertions - Biztonságosabb modulok

Az import assertionök lehetővé teszik annak meghatározását, hogy milyen típusú modult várunk: 

// JSON import
import config from './config.json' assert { type: 'json' };

// CSS import
import styles from './styles.css' assert { type: 'css' };

// WASM import
import wasmModule from './module.wasm' assert { type: 'webassembly' };

8. Top-level await - Await bárhol

Most már használhatunk await-et async függvényen kívül is modulok tetején: 

// config.js
const response = await fetch('/api/config');
const config = await response.json();

export default config;

// main.js
import config from './config.js';
console.log(config); // Működik!

9. Error Cause - Jobb hibakezelés

A hibák most már tárolhatják az okozó hibát is: 

async function fetchUserData(userId) {
  try {
    const response = await fetch(`/api/users/${userId}`);
    return await response.json();
  } catch (error) {
    throw new Error('Failed to fetch user data', { 
      cause: error 
    });
  }
}

try {
  await fetchUserData(123);
} catch (error) {
  console.log(error.message); // "Failed to fetch user data"
  console.log(error.cause); // Eredeti fetch hiba
}

10. Private Fields javítások

A privát mezők szintaxisa egyszerűbbé és erősebbé vált: 

class BankAccount {
  #balance = 0; // Privát mező
  
  deposit(amount) {
    this.#balance += amount;
  }
  
  getBalance() {
    return this.#balance;
  }
  
  // Privát metódus
  #validateAmount(amount) {
    return amount > 0;
  }
}

const account = new BankAccount();
account.deposit(100);
console.log(account.#balance); // SyntaxError!

Browser támogatás

Fontos megjegyezni, hogy ezek a funkciók fokozatosan érkeznek a böngészőkbe:

  • Temporal API: Chrome 114+, Firefox 121+ (részleges)
  • Records & Tuples: Még stage 2 proposal
  • Pipeline Operator: Még stage 2 proposal
  • Pattern Matching: Stage 1 proposal
  • Decorators: Stage 3, hamarosan érkezik
  • Array Grouping: Chrome 117+, Firefox 119+

Hogyan használd most?

Még ha a böngészők nem is támogatják teljesen, már most használhatod ezeket:

  • Babel: Transzpilálja a modern kódot régebbi verziókra
  • TypeScript: Támogatja a legtöbb új funkciót
  • Polyfills: Temporal API-hoz és más funkciókhoz

Összegzés

A JavaScript ES2025 izgalmas újításokat hoz, amelyek modernebbé, olvashatóbbá és hatékonyabbá teszik a kódunkat. Bár nem minden funkció elérhető még teljesen, érdemes már most megismerkedni velük és felkészülni a használatukra.

A nyelv folyamatosan fejlődik, és ezek az újítások segítenek abban, hogy a JavaScript lépést tartson a modern webfejlesztés igényeivel. Kezdd el kísérletezni velük már ma!