JavaScript ES2024 Yenilikleri: Pratik Rehber

const makaleler = [
  { baslik: 'React Temelleri',    kategori: 'frontend', seviye: 'başlangıç' },
  { baslik: 'Node.js ile REST',   kategori: 'backend',  seviye: 'orta' },
  { baslik: 'TypeScript Genel.',  kategori: 'frontend', seviye: 'orta' },
  { baslik: 'PostgreSQL Opt.',    kategori: 'backend',  seviye: 'ileri' },
  { baslik: 'Docker Temelleri',   kategori: 'devops',   seviye: 'başlangıç' },
];
 
// ES2024 — Object.groupBy
const kategoriGruplari = Object.groupBy(makaleler, m => m.kategori);
// {
//   frontend: [{ baslik: 'React Temelleri', ... }, { baslik: 'TypeScript...', ... }],
//   backend:  [{ baslik: 'Node.js...', ... }, { baslik: 'PostgreSQL...', ... }],
//   devops:   [{ baslik: 'Docker...', ... }]
// }
 
// Map.groupBy — anahtar olarak nesne kullanmak gerektiğinde
const seviyeGruplari = Map.groupBy(makaleler, m => m.seviye);
seviyeGruplari.get('başlangıç'); // React + Docker makaleleri
 
// Eski yöntem (artık gerekmiyor!)
const eskiGruplama = makaleler.reduce((acc, m) => {
  (acc[m.kategori] ??= []).push(m);
  return acc;
}, {});

const sayilar = [3, 1, 4, 1, 5, 9, 2, 6];
 
// Eski yöntem — orijinali bozar
const sirali1 = [...sayilar].sort((a, b) => a - b);
 
// ES2023 — orijinal korunur
const sirali2   = sayilar.toSorted((a, b) => a - b);
const tersine    = sayilar.toReversed();
const degistirilmis = sayilar.with(2, 99); // index 2'yi 99 yap
const cikarilmis = sayilar.toSpliced(1, 2, 10, 20); // index 1'den 2 eleman sil, 10 ve 20 ekle
 
console.log(sayilar); // Değişmedi: [3, 1, 4, 1, 5, 9, 2, 6]
 
// findLast ve findLastIndex — ES2023
const sayilarDizi = [1, 3, 5, 7, 4, 2, 8];
const sonCift = sayilarDizi.findLast(n => n % 2 === 0);      // 8
const sonCiftIndex = sayilarDizi.findLastIndex(n => n % 2 === 0); // 6
 
// React state güncellemelerinde çok kullanışlı
const [items, setItems] = useState([1, 2, 3, 4, 5]);
 
// Eski yöntem
setItems(prev => {
  const kopi = [...prev];
  kopi[2] = 99;
  return kopi;
});
 
// Yeni yöntem
setItems(prev => prev.with(2, 99));

// Eski yöntem — resolve/reject'i dışarı çıkarmak zordu
let disaridan_coz, disaridan_reddet;
const vaad = new Promise((resolve, reject) => {
  disaridan_coz = resolve;
  disaridan_reddet = reject;
});
 
// ES2024 — Promise.withResolvers
const { promise, resolve, reject } = Promise.withResolvers();
 
// Kullanım örneği: EventEmitter ile Promise köprüsü
function olayBekle(emitter, olayAdi, zaman_asimi = 5000) {
  const { promise, resolve, reject } = Promise.withResolvers();
 
  const zamanlayici = setTimeout(() => {
    reject(new Error(`${olayAdi} olayı ${zaman_asimi}ms içinde gelmedi`));
  }, zaman_asimi);
 
  emitter.once(olayAdi, (veri) => {
    clearTimeout(zamanlayici);
    resolve(veri);
  });
 
  return promise;
}
 
// WebSocket ile kullanım
const { promise: baglantiVaadi, resolve: baglandi } = Promise.withResolvers();
ws.onopen = () => baglandi(ws);
await baglantiVaadi;

// Temporal — modern tarih/saat API'si (polyfill gerekiyor)
import { Temporal } from '@js-temporal/polyfill';
 
// Basit tarih oluşturma
const bugun = Temporal.Now.plainDateISO(); // 2025-09-15
const simdi  = Temporal.Now.instant();     // Tam zaman damgası
 
// Timezone-aware tarih
const istanbul = Temporal.Now.zonedDateTimeISO('Europe/Istanbul');
console.log(istanbul.toString()); // 2025-09-15T14:30:00+03:00[Europe/Istanbul]
 
// Aritmetik
const gelecekAy = bugun.add({ months: 1 });
const haftaOnce = bugun.subtract({ weeks: 1 });
 
// Karşılaştırma
const fark = Temporal.PlainDate.compare(
  Temporal.PlainDate.from('2025-01-01'),
  Temporal.PlainDate.from('2025-12-31')
); // -1 (ilk, ikinciden önce)
 
// Duration
const sure = Temporal.Duration.from({ hours: 2, minutes: 30 });
const bitis = istanbul.add(sure);

// Logical Assignment Operators (ES2021 ama hâlâ az bilinen)
let kullanici = { ad: 'Ali', ayarlar: null };
 
// ||= — sadece falsy ise ata
kullanici.ayarlar ||= { tema: 'karanlik', dil: 'tr' };
 
// ??= — sadece null/undefined ise ata (0 ve '' korunur)
kullanici.puan ??= 0;
 
// &&= — sadece truthy ise güncelle
kullanici.profil &&= { ...kullanici.profil, guncellendi: new Date() };
 
// using declaration (Stage 3 — Explicit Resource Management)
// try/finally yerine otomatik kaynak kapatma
class VeritabaniBaglantisi {
  [Symbol.dispose]() {
    console.log('Bağlantı kapatıldı');
    this.kapat();
  }
}
 
{
  using baglanti = new VeritabaniBaglantisi();
  await baglanti.sorgu('SELECT ...');
  // Blok bitince [Symbol.dispose] otomatik çağrılır
}

// WeakRef — bellek sızıntısı olmadan önbellek
class Onbellek {
  #depo = new Map();
  #kayit = new FinalizationRegistry(anahtar => {
    this.#depo.delete(anahtar);
    console.log(`${anahtar} önbellekten temizlendi`);
  });
 
  ayarla(anahtar, deger) {
    const ref = new WeakRef(deger);
    this.#depo.set(anahtar, ref);
    this.#kayit.register(deger, anahtar);
  }
 
  al(anahtar) {
    return this.#depo.get(anahtar)?.deref() ?? null;
  }
}
 
// Büyük nesneleri önbellekleyin — GC gerekirse otomatik temizler
const onbellek = new Onbellek();
onbellek.ayarla('buyuk-veri', { /* 10MB nesne */ });