JavaScript ES6+ Özellikleri: Modern JavaScript Rehberi

Modern JavaScript denildiğinde kastedilen şey, 2015 yılında yayımlanan ES6 (ECMAScript 2015) ve sonrasındaki sürümlerle dile eklenen özelliklerdir. ES6, JavaScript tarihindeki en büyük güncellemeydi: blok kapsamlı değişkenler, arrow function'lar, modüller, Promise ve daha fazlası bu sürümle geldi. Bugün React, Vue veya Node.js ile yazılan hemen her kod bu özelliklere dayanır. Bu rehberde en çok kullanacağınız ES6+ özelliklerini gerçek kod örnekleriyle ele alıyoruz.

let ve const: Modern JavaScript Değişkenleri

Eski var anahtar kelimesinin iki büyük sorunu vardı: fonksiyon kapsamlı olması ve bildirimden önce erişilebilmesi (hoisting davranışı). ES6 ile gelen let ve const blok kapsamlıdır:

if (true) {
  let sayi = 5;
  const PI = 3.14159;
}
// console.log(sayi); // ReferenceError: sayi is not defined

Kural basittir: varsayılan olarak const kullanın, değeri değişecekse let tercih edin. const referansı sabitler ama nesne içeriğini dondurmaz:

const kullanici = { ad: "Ayşe" };
kullanici.ad = "Mehmet"; // geçerli
// kullanici = {};       // TypeError: Assignment to constant variable

Arrow Function'lar

Arrow function'lar daha kısa bir sözdizimi sunar ve kendi this bağlamlarını oluşturmaz; this değerini tanımlandıkları kapsamdan alırlar:

// Klasik fonksiyon
function topla(a, b) {
  return a + b;
}

// Arrow function
const topla2 = (a, b) => a + b;

// Dizi metotlarıyla birlikte çok kullanışlıdır
const sayilar = [1, 2, 3, 4, 5];
const kareler = sayilar.map(n => n * n);     // [1, 4, 9, 16, 25]
const ciftler = sayilar.filter(n => n % 2 === 0); // [2, 4]

Tek parametre varsa parantez, tek ifade varsa süslü parantez ve return yazmanız gerekmez. Ancak nesne metotlarında dikkatli olun: metodun this ile nesneye erişmesi gerekiyorsa klasik fonksiyon kullanmak daha doğrudur.

Template Literal'ler

Ters tırnak (backtick) ile yazılan template literal'ler, string birleştirme derdini bitirir ve çok satırlı metin destekler:

const ad = "Zeynep";
const yas = 28;

const mesaj = `Merhaba ${ad}, ${yas} yaşındasın.
Gelecek yıl ${yas + 1} olacaksın.`;

${} içine herhangi bir JavaScript ifadesi yazılabilir: değişken, fonksiyon çağrısı, aritmetik işlem.

Destructuring: Değerleri Ayrıştırma

Destructuring, dizi ve nesnelerden değerleri tek satırda değişkenlere çıkarmanızı sağlar:

// Nesne destructuring
const urun = { isim: "Klavye", fiyat: 750, stok: 12 };
const { isim, fiyat } = urun;

// Varsayılan değer ve yeniden adlandırma
const { stok: adet = 0 } = urun;

// Dizi destructuring
const [ilk, ikinci] = ["elma", "armut", "kiraz"];

// Fonksiyon parametrelerinde
function yazdir({ isim, fiyat }) {
  console.log(`${isim}: ${fiyat} TL`);
}
yazdir(urun);

Buna yakından ilişkili iki operatör daha vardır: spread (...) bir dizi veya nesneyi açar, rest ise kalan elemanları toplar:

const a = [1, 2];
const b = [...a, 3, 4];          // [1, 2, 3, 4]
const yeniUrun = { ...urun, fiyat: 800 }; // kopyala ve güncelle
const [bas, ...kalan] = [10, 20, 30];     // bas=10, kalan=[20, 30]

async/await ile Asenkron Kod

JavaScript'te ağ istekleri gibi uzun süren işlemler asenkrondur. ES2017 ile gelen async/await, Promise tabanlı kodu senkron kod gibi okunur hale getirir:

async function kullaniciGetir(id) {
  try {
    const yanit = await fetch(`https://api.example.com/users/${id}`);
    if (!yanit.ok) {
      throw new Error(`HTTP hatası: ${yanit.status}`);
    }
    const veri = await yanit.json();
    return veri;
  } catch (hata) {
    console.error("İstek başarısız:", hata.message);
  }
}

Bilmeniz gereken kurallar:

const [kullanici, siparisler] = await Promise.all([
  fetch("/api/user").then(r => r.json()),
  fetch("/api/orders").then(r => r.json()),
]);

ES Modules: import ve export

ES6 modülleri, kodu dosyalara bölüp paylaşmanın standart yoludur:

// matematik.js
export const PI = 3.14159;
export function topla(a, b) {
  return a + b;
}
export default function carp(a, b) {
  return a * b;
}

// app.js
import carp, { PI, topla } from "./matematik.js";
console.log(carp(2, PI));

Tarayıcıda kullanmak için script etiketine type="module" eklenir; Node.js tarafında ise package.json dosyasına "type": "module" yazılır veya .mjs uzantısı kullanılır. export default her dosyada bir tane olabilir, adlandırılmış export ise istediğiniz kadar.

ES6 Sonrası Gelen Diğer Yenilikler

ECMAScript 2015'ten bu yana dil her yıl güncellenmektedir ve bazı küçük ama çok kullanışlı eklemeler günlük kodunuzu sadeleştirir:

// Optional chaining (ES2020): iç içe alanlara güvenli erişim
const sehir = kullanici?.adres?.sehir; // alan yoksa undefined döner, hata fırlatmaz

// Nullish coalescing (ES2020): yalnızca null/undefined için varsayılan
const adet = girilenAdet ?? 1; // 0 girilirse 0 kalır, || operatöründen farkı budur

// Array.prototype.includes (ES2016)
const izinli = ["admin", "editor"].includes(rol);

Özellikle ?. ve ?? operatörleri, API'den gelen ve bazı alanları eksik olabilen verilerle çalışırken yazdığınız savunmacı kontrol kodunu büyük ölçüde azaltır.

Nereden Devam Etmeli?

Bu yazıda değindiğimiz özelliklerin tamamı bugün tüm güncel tarayıcılar ve Node.js tarafından desteklenmektedir. En güvenilir başvuru kaynağı MDN Web Docs adresidir; her özelliğin sözdizimini, örneklerini ve tarayıcı uyumluluk tablolarını orada bulabilirsiniz. Öğrendiklerinizi pekiştirmek için küçük bir proje önerisi: fetch ve async/await kullanarak halka açık bir API'den veri çeken, sonuçları map ve template literal ile listeleyen bir sayfa yazın. Modern JavaScript'i öğrenmenin en kalıcı yolu, bu özellikleri gerçek bir problemde art arda kullanmaktır.