ES6 ile tanışma: let, const ve ok fonksiyonları

Haziran ayında ES6 (ECMAScript 2015) resmi olarak kesinleşti. JavaScript’in temel standardını belirleyen ECMAScript spesifikasyonu, 2009’daki ES5’ten bu yana ilk büyük sürümünü aldı. Altı yıl bekledik.

Tarayıcı desteği henüz tam değil; özellikle eski tarayıcılarda sorunlar var. Ama Babel (transpiler) kullanarak ES6 kodunu ES5’e çevirebiliyorsunuz ve bu sayede modern yazıyor, eski tarayıcıda çalıştırabiliyorsunuz. Bu yazıda en çok fark yaratan üç eklentiyi ele alacağım: let/const, ok fonksiyonları ve şablon dizeleri.

var’ın problemi ve let/const

JavaScript’te uzun süre yalnızca var ile değişken tanımlıyorduk. var’ın iki önemli özelliği var: fonksiyon kapsamlıdır (function-scoped) ve yukarı taşınır (hoisting). Bu özellikler bazen beklenmedik davranışlara yol açıyor:

for (var i = 0; i < 3; i++) {
    setTimeout(function() {
        console.log(i); // Her seferinde 3 yazdırır
    }, 100);
}

var i döngü bloğuna değil, etrafındaki fonksiyona ait olduğu için setTimeout çalıştığında i zaten 3 olmuş.

let blok kapsamlıdır (block-scoped): yalnızca tanımlandığı {} bloğu içinde yaşar.

for (let i = 0; i < 3; i++) {
    setTimeout(function() {
        console.log(i); // 0, 1, 2 — beklenen davranış
    }, 100);
}

const de blok kapsamlı ama bir farkla: atama yapıldıktan sonra yeniden atanamaz. Değişmeyecek değerler için kullanmak kodun niyetini açıkça gösterir.

const API_URL = 'https://api.ornek.com';
// API_URL = 'başka bir şey'; // TypeError verir

const kullanici = { isim: 'Ali' };
kullanici.soyisim = 'Veli'; // Bu geçerli — nesnenin içeriği değişebilir
// kullanici = {};           // Bu geçersiz — referansı değiştiremezsiniz

const’ın nesneyi dondurduğunu değil, referansı sabitlediğini anlamak önemli. Nesnenin özellikleri yine değişebilir; yalnızca kullanici değişkeninin başka bir şeye işaret etmesi engelleniyor.

Pratikte kullandığım bir kural şu: her şeyi önce const ile tanımlamak, gerçekten yeniden atama gerektiğinde let’e geçmek. var’a hiç dönmemek. Bu alışkanlık kodu okuyanın “bu değer sonradan değişiyor mu?” sorusunu hızlıca yanıtlamasını sağlıyor.

Ok fonksiyonları (Arrow Functions)

ES6’nın en kullanışlı eklemelerinden biri. Sözdizimi daha kısa ve this bağlamını (context) farklı yönetiyor.

Eski sözdizimi:

var kareler = [1, 2, 3, 4].map(function(sayi) {
    return sayi * sayi;
});

Ok fonksiyonu ile:

const kareler = [1, 2, 3, 4].map(sayi => sayi * sayi);

Kısa yazımda tek ifade varsa return ve süslü parantez atlanabiliyor. Birden fazla parametre parantez gerektiriyor:

const topla = (a, b) => a + b;
const selamla = isim => `Merhaba, ${isim}!`;

this bağlamı meselesine gelince — ok fonksiyonları this’i kendi içinde tanımlamıyor. Dışarıdaki kapsamdan alıyorlar. Bu, özellikle callback içinde nesne özelliğine erişirken sıkça yaşanan sorunu çözüyor:

function Zamanlayici() {
    this.saniye = 0;

    setInterval(() => {
        this.saniye++; // Doğru `this` — Zamanlayici nesnesi
        console.log(this.saniye);
    }, 1000);
}

Eski yöntemde var self = this; gibi geçici çözümler yazardınız. Ok fonksiyonuyla bu gerekmiyor.

Ancak ok fonksiyonlarının her yerde uygun olmadığını da eklemeliyim. Bir nesnenin metodu olarak tanımlandığında this beklendiği gibi davranmıyor; çünkü ok fonksiyonu this’i bağlamıyor, dışarıdan alıyor. Bu durumda klasik function ifadesi hâlâ doğru seçim.

Şablon dizeler (Template Literals)

String birleştirme (+) çoğunlukla okunaksız çıktı veriyordu:

var mesaj = 'Merhaba ' + isim + ', hesabınızda ' + bakiye + ' TL var.';

ES6 şablon dizeleri (template literals) ile ters tırnak (backtick) içinde doğrudan değişken yerleştiriyorsunuz:

const mesaj = `Merhaba ${isim}, hesabınızda ${bakiye} TL var.`;

Çok satırlı dizeler de artık doğal:

const html = `
  <div class="kart">
    <h2>${baslik}</h2>
    <p>${aciklama}</p>
  </div>
`;

Daha önce bunu \n ve + karmaşasıyla yapardınız.

${} ifadesi içine yalnızca değişken değil, herhangi bir JavaScript ifadesi yazılabiliyor: ${sayi * 2}, ${kullanici ? kullanici.isim : 'Misafir'} gibi. Bu esneklik özellikle dinamik içerik üretirken çok işe yarıyor.

Başlarken ne kullanmalı?

Babel olmadan ES6’yı bugün tam olarak kullanmak riskli çünkü tarayıcı desteği tutarsız. Ama Babel kurulumu ve bir derleme adımı (Gulp veya Webpack üzerinden) varsa ES6 yazmak mümkün. let/const ve ok fonksiyonlarını Babel ile bugün kullanmaya başladım ve alışmak birkaç gün aldı.

Eski JavaScript alışkanlıklarını bırakmak biraz zaman istiyor. var yerine const, sonra gerekirse let — bu kurala uymaya başladım ve kodu okurken çok daha az “bu değer değişiyor mu?” diye düşünüyorum.

ES6 bir seferde öğrenilecek bir şey değil. let/const ve ok fonksiyonlarıyla başlamak, ardından şablon dizeleri — bu üçü günlük kodu hemen etkiliyor. Destructuring, spread operatörü, modüller gibi geri kalan özellikler zamanla geliyor. Acele etmeye gerek yok; bu yazıdaki üç özellik bile kod okunabilirliğini belirgin biçimde artırıyor.