Modern JavaScript Funkciók 2024-ben

A JavaScript folyamatosan fejlődik, és 2024-ben is számos új funkciót kaptunk, amelyek jelentősen megkönnyítik a fejlesztők életét.

Array Grouping

Az egyik leghasználhatóbb új funkció az Array.prototype.group() és Array.prototype.groupToMap():

const products = [
  { name: 'Laptop', category: 'electronics', price: 1000 },
  { name: 'Phone', category: 'electronics', price: 500 },
  { name: 'Book', category: 'education', price: 20 },
  { name: 'Course', category: 'education', price: 100 }
];

// Csoportosítás kategória szerint
const grouped = products.group(product => product.category);
console.log(grouped);
// {
//   electronics: [{ name: 'Laptop', ... }, { name: 'Phone', ... }],
//   education: [{ name: 'Book', ... }, { name: 'Course', ... }]
// }

Temporal API

A dátum kezelés végre modern lesz a Temporal API-val:

// Jelenlegi dátum
const now = Temporal.Now.plainDateISO();
console.log(now.toString()); // 2024-01-15

// Dátum műveletek
const birthday = Temporal.PlainDate.from('1990-05-15');
const age = now.since(birthday).years;
console.log(`Életkor: ${age} év`);

// Időzóna kezelés
const meeting = Temporal.ZonedDateTime.from('2024-01-15T14:00[Europe/Budapest]');
const utcTime = meeting.withTimeZone('UTC');

Pattern Matching (Proposal)

Bár még proposal fázisban van, a pattern matching forradalmasíthatja a kód írást:

// Jelenlegi megoldás
function processValue(value) {
  if (typeof value === 'string') {
    return value.toUpperCase();
  } else if (typeof value === 'number') {
    return value * 2;
  } else if (Array.isArray(value)) {
    return value.length;
  } else {
    return 'unknown';
  }
}

// Pattern matching (jövőbeli szintaxis)
function processValue(value) {
  return match (value) {
    when (String) -> value.toUpperCase(),
    when (Number) -> value * 2,
    when (Array) -> value.length,
    when (_) -> 'unknown'
  };
}

Top-level await

Már nem kell async wrapper függvény:

// Régi módszer
(async () => {
  const data = await fetch('/api/data');
  const json = await data.json();
  console.log(json);
})();

// Modern megoldás (top-level await)
const data = await fetch('/api/data');
const json = await data.json();
console.log(json);

Private Fields és Methods

Valódi private tagok osztályokban:

class User {
  // Private fields
  #password;
  #id = Math.random();

  constructor(username, password) {
    this.username = username;
    this.#password = password;
  }

  // Private method
  #hashPassword(password) {
    return btoa(password); // Egyszerű példa
  }

  // Public method
  authenticate(inputPassword) {
    return this.#hashPassword(inputPassword) === this.#password;
  }

  // Getter for private field
  get id() {
    return this.#id;
  }
}

const user = new User('john', 'secret123');
console.log(user.username); // 'john'
console.log(user.id); // random number
// console.log(user.#password); // SyntaxError!

Nullish Coalescing és Optional Chaining

Ezek már nem újak, de továbbra is hasznosak:

// Nullish coalescing
const config = {
  theme: null,
  timeout: 0
};

const theme = config.theme ?? 'dark'; // 'dark'
const timeout = config.timeout ?? 5000; // 0 (nem 5000!)

// Optional chaining
const user = {
  profile: {
    social: {
      twitter: '@johndoe'
    }
  }
};

const twitter = user?.profile?.social?.twitter; // '@johndoe'
const instagram = user?.profile?.social?.instagram; // undefined

Praktikus Tippek

1. Használj destructuring-ot default értékekkel

function createUser({ name = 'Anonymous', age = 0, role = 'user' } = {}) {
  return { name, age, role };
}

2. Array methods kombinálása

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const result = numbers
  .filter(n => n % 2 === 0)  // páros számok
  .map(n => n * n)           // négyzetre emelés
  .reduce((sum, n) => sum + n, 0); // összegzés

console.log(result); // 220

3. Modern async/await patterns

// Párhuzamos végrehajtás
const [users, posts, comments] = await Promise.all([
  fetchUsers(),
  fetchPosts(),
  fetchComments()
]);

// Error handling
async function safeApiCall() {
  try {
    const data = await fetch('/api/data');
    return await data.json();
  } catch (error) {
    console.error('API hiba:', error);
    return null;
  }
}

A modern JavaScript funkciók használatával tisztább, olvashatóbb és hatékonyabb kódot írhatunk. Érdemes folyamatosan követni az újdonságokat és fokozatosan beépíteni őket a projektjeinkbe.