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

> JavaScript'in yeni standardı ES6 ile gelen let, const, ok fonksiyonu ve şablon dizelerini örneklerle anlattım.

- Yayın: 2015-07-05
- Kategori: Diller
- Etiketler: JavaScript
- Okuma süresi: 3 dk okuma
- Kaynak: https://www.muhammetsafak.com.tr/blog/es6-ile-tanisma-let-const-ve-ok-fonksiyonlari/
- Dil: tr-TR
- Yazar: Muhammet Şafak

---
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:

```javascript
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.

```javascript
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.

```javascript
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:

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

Ok fonksiyonu ile:

```javascript
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:

```javascript
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:

```javascript
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:

```javascript
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:

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

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

```javascript
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.