Modern JavaScript (ES6+): Kapsamlı Başlangıç Rehberi

Modern JavaScript (ES6+): Kapsamlı Başlangıç Rehberi

JavaScript, ECMAScript 2015 (ES6) ile birlikte devrim niteliğinde bir dönüşüm geçirdi. Arrow fonksiyonlar, template literal'lar, let/const, destructuring ve spread operatörü gibi yenilikler, dilin yazım gücünü ve okunabilirliğini büyük ölçüde artırdı. Bu rehberde ES6+ ile gelen en önemli özellikleri detaylı örneklerle inceliyoruz.

1. let, const ve Block Scoping

ES6 öncesinde değişken tanımlamak için yalnızca var anahtar kelimesi kullanılıyordu. var fonksiyon kapsamlıyken, let ve const blok kapsamlıdır. Bu fark, özellikle döngüler ve koşul blokları içinde büyük önem taşır.

// var ile hoisting sorunu
console.log(x); // undefined (hoisting)
var x = 10;

// let ile hoisting koruması
// console.log(y); // ReferenceError: Cannot access 'y' before initialization
let y = 20;

// const ile sabit referans
const API_URL = "https://api.example.com";
// API_URL = "başka"; // TypeError: Assignment to constant variable

// Blok kapsam farkı
for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100); // 0, 1, 2
}

for (var j = 0; j < 3; j++) {
  setTimeout(() => console.log(j), 100); // 3, 3, 3
}

2. Arrow Fonksiyonlar

Arrow fonksiyonlar, daha kısa sözdizimi ve lexical this bağlamı sunar. Callback fonksiyonlarında ve fonksiyonel programlama pattern'lerinde oldukça kullanışlıdır.

// Geleneksel fonksiyon
function toplam(a, b) {
  return a + b;
}

// Arrow fonksiyon
const toplam = (a, b) => a + b;

// Tek parametre — parantez opsiyonel
const karesi = x => x * x;

// Obje döndürme — parantez içinde
const kullaniciOlustur = (ad, yas) => ({ ad, yas, olusturma: Date.now() });

// Lexical this bağlamı
class Sayac {
  constructor() {
    this.deger = 0;
  }
  basla() {
    // Arrow fonksiyon this'i dış kapsamdan alır
    setInterval(() => {
      this.deger++;
      console.log(this.deger);
    }, 1000);
  }
}

3. Template Literal ve Tagged Templates

Backtick (`) ile tanımlanan template literal'lar, string interpolation ve çok satırlı string oluşturmayı kolaylaştırır. Tagged template'ler ise string işleme için güçlü bir mekanizma sunar.

// String interpolation
const ad = "Tarık";
const mesaj = `Merhaba ${ad}, bugün ${new Date().toLocaleDateString('tr-TR')} tarihindeyiz.`;

// Çok satırlı string
const html = `
  <div class="card">
    <h3>${ad}</h3>
    <p>Profil bilgileri</p>
  </div>
`;

// Tagged template
function vurgula(strings, ...values) {
  return strings.reduce((sonuc, str, i) => {
    const deger = values[i] ? `<strong>${values[i]}</strong>` : '';
    return sonuc + str + deger;
  }, '');
}

const urun = "JavaScript";
const fiyat = 0;
const sonuc = vurgula`${urun} öğrenmek ${fiyat} TL'dir!`;
// "<strong>JavaScript</strong> öğrenmek <strong>0</strong> TL'dir!"

4. Spread ve Rest Operatörleri

Üç nokta (...) operatörü, kullanıldığı bağlama göre spread (yayma) veya rest (toplama) işlevi görür. Array ve obje manipülasyonunda vazgeçilmez bir araçtır.

// Spread — array kopyalama ve birleştirme
const meyveler = ["elma", "armut"];
const sebzeler = ["domates", "biber"];
const hepsi = [...meyveler, ...sebzeler, "portakal"];

// Spread — obje kopyalama ve güncelleme
const varsayilan = { tema: "açık", dil: "tr", bildirim: true };
const kullanici = { ...varsayilan, tema: "koyu", ad: "Tarık" };
// { tema: "koyu", dil: "tr", bildirim: true, ad: "Tarık" }

// Rest — fonksiyon parametreleri
function log(seviye, ...mesajlar) {
  mesajlar.forEach(m => console.log(`[${seviye}] ${m}`));
}
log("INFO", "Sunucu başlatıldı", "Port: 3000");

// Rest — destructuring ile
const [ilk, ikinci, ...kalanlar] = [1, 2, 3, 4, 5];
console.log(kalanlar); // [3, 4, 5]

5. Enhanced Object Literals

ES6, obje tanımlamalarını daha kısa ve okunabilir hale getiren birçok kısayol sunar: property shorthand, computed property names ve method shorthand bunların başlıcalarıdır.

const ad = "Tarık";
const yas = 30;

// Property shorthand
const kisi = { ad, yas }; // { ad: "Tarık", yas: 30 }

// Method shorthand
const hesaplama = {
  toplam(a, b) { return a + b; },
  fark(a, b) { return a - b; }
};

// Computed property names
const alan = "email";
const form = {
  [alan]: "ornek@test.com",
  [`${alan}Dogrulandi`]: true
};
// { email: "ornek@test.com", emailDogrulandi: true }

6. Default Parametreler ve Optional Chaining

Fonksiyon parametrelerine varsayılan değer atama ve derin iç içe objelere güvenli erişim, ES6+ ile çok daha temiz bir şekilde yapılabilir.

// Default parametreler
function selamla(ad = "Misafir", dil = "tr") {
  const mesajlar = { tr: "Merhaba", en: "Hello" };
  return `${mesajlar[dil]} ${ad}!`;
}
selamla(); // "Merhaba Misafir!"

// Optional chaining (?.)
const kullanici = { profil: { adres: { sehir: "İstanbul" } } };
const sehir = kullanici?.profil?.adres?.sehir; // "İstanbul"
const ulke = kullanici?.profil?.adres?.ulke; // undefined (hata yok)

// Nullish coalescing (??)
const port = process.env.PORT ?? 3000;
const baslik = null ?? "Varsayılan Başlık"; // "Varsayılan Başlık"
const sifir = 0 ?? 42; // 0 (|| ile 42 olurdu)

7. for...of Döngüsü ve Symbol.iterator

ES6 ile gelen for...of döngüsü, iterable nesneler üzerinde temiz ve güvenli iterasyon sağlar. Array, String, Map, Set ve generator fonksiyonları varsayılan olarak iterable'dır.

// Array iterasyonu
const diller = ["JavaScript", "TypeScript", "Python"];
for (const dil of diller) {
  console.log(dil);
}

// String iterasyonu (Unicode desteği)
for (const karakter of "Merhaba 🌍") {
  console.log(karakter); // Emoji'yi doğru işler
}

// Map iterasyonu
const harita = new Map([["ad", "Tarık"], ["yas", 30]]);
for (const [anahtar, deger] of harita) {
  console.log(`${anahtar}: ${deger}`);
}

// Özel iterable
const aralik = {
  baslangic: 1,
  bitis: 5,
  [Symbol.iterator]() {
    let current = this.baslangic;
    const son = this.bitis;
    return {
      next() {
        return current <= son
          ? { value: current++, done: false }
          : { done: true };
      }
    };
  }
};

for (const sayi of aralik) {
  console.log(sayi); // 1, 2, 3, 4, 5
}

Sonuç

ES6+ özellikleri, JavaScript'i modern ve güçlü bir dil haline getirmiştir. let/const ile güvenli değişken tanımlama, arrow fonksiyonlar ile kısa sözdizimi, template literal'lar ile kolay string işleme, destructuring ile veri ayrıştırma ve spread/rest operatörleri ile esnek veri manipülasyonu günlük geliştirme sürecinizi büyük ölçüde iyileştirir. Bu özellikleri projelerinizde aktif olarak kullanarak daha okunabilir, bakımı kolay ve hata oranı düşük kod yazabilirsiniz.

Kaynaklar

• MDN Web Docs — JavaScript Guide
• Exploring ES6 — Dr. Axel Rauschmayer
• JavaScript.info — The Modern JavaScript Tutorial
• ECMAScript Language Specification