20 Februari 2025·8 menit baca

JavaScript Modern: Fitur ES2024 yang Wajib Kamu Tahu

JavaScript terus berkembang pesat. Dari ES2020 hingga ES2024, banyak fitur baru yang menyederhanakan kode dan meningkatkan kemampuan bahasa secara signifikan.

1. Object.groupBy & Map.groupBy (ES2024)

Fitur yang paling banyak ditunggu! Akhirnya ada cara native untuk mengelompokkan array berdasarkan kriteria tertentu, tanpa perlu reduce yang verbose.

ts·Object.groupBy

const products = [
  { name: "Laptop", category: "electronics", price: 1500 },
  { name: "Phone", category: "electronics", price: 800 },
  { name: "Shirt", category: "clothing", price: 50 },
];

const byCategory = Object.groupBy(products, ({ category }) => category);
// { electronics: [...], clothing: [...] }

const byPriceRange = Object.groupBy(products, ({ price }) => {
  if (price < 100) return "budget";
  if (price < 500) return "mid-range";
  return "premium";
});

2. Array Methods Immutable (ES2023)

Array methods baru yang mengembalikan array baru tanpa mutasi — lebih aman untuk React state management.

ts·Immutable Array Methods

const fruits = ["apple", "banana", "cherry"];

// toSorted() — sort tanpa mutasi original
const sorted = fruits.toSorted();

// toReversed() — reverse tanpa mutasi
const reversed = fruits.toReversed();

// with() — ganti satu element tanpa mutasi
const updated = fruits.with(0, "avocado");
// ["avocado", "banana", "cherry"]

// Sangat berguna di React!
setItems(prev => prev.with(index, newValue));
setItems(prev => prev.toSorted((a, b) => a.name.localeCompare(b.name)));

3. Promise.withResolvers (ES2024)

ts·Promise.withResolvers

// ✅ ES2024 — Clean
const { promise, resolve, reject } = Promise.withResolvers();

function waitForButton(buttonId: string) {
  const { promise, resolve } = Promise.withResolvers<string>();

  document.getElementById(buttonId)?.addEventListener(
    "click",
    () => resolve("clicked!"),
    { once: true }
  );

  return promise;
}

4. structuredClone (ES2022)

Deep clone yang mudah tanpa library eksternal. Lebih baik dari JSON.parse(JSON.stringify()) karena mendukung Date, Map, Set, RegExp, dan circular references.

ts·structuredClone

const original = {
  name: "Data",
  date: new Date(),
  map: new Map([["key", "value"]]),
  nested: { arr: [1, 2, { deep: true }] }
};

const clone = structuredClone(original);

// Modifikasi clone tidak memengaruhi original
clone.nested.arr.push(4);
console.log(original.nested.arr); // [1, 2, {deep:true}] — tidak berubah!

🚀 Semua fitur di atas sudah didukung di semua browser modern dan Node.js terbaru. Mulai gunakan sekarang tanpa perlu polyfill!