Modern JavaScript Temelleri: let/const, async/await ve Modüller

JavaScript, web'in dili olmaktan çıkıp her yerin diline dönüştü: tarayıcıda arayüz, sunucuda API, hatta masaüstü ve mobil uygulamalar. Ancak dil öyle hızlı gelişti ki, eski öğreticilerle öğrenenler modern JavaScript'in getirdiği rahatlığı çoğu zaman kaçırıyor. Bu yazıda, günümüzde her ciddi projede kullanılan temel kavramları netleştireceğiz: değişken bildirimi, fonksiyonlar, eşzamansız (asenkron) kod ve modüller. Amaç, kavramları ezberletmek değil, neden bu şekilde tasarlandıklarını anlatmak.

Değişkenler: var'ı Unutun, let ve const Var

Eski JavaScript'te tek bir değişken bildirimi vardı: var. Sorun şuydu ki var, blok kapsamına (block scope) saygı duymuyor, fonksiyon kapsamında yaşıyor ve beklenmedik davranışlara yol açıyordu. Modern JavaScript bunu iki net araçla çözdü.

• const: Yeniden atanmayacak değerler için. Varsayılan tercihiniz bu olmalı.
• let: Değeri değişecek değişkenler için. Döngü sayaçları buna örnektir.

İkisi de blok kapsamlıdır; yani süslü parantezler arasında tanımladığınız değişken, dışarı sızmaz. Bu tek değişiklik bile, kaynağı zor bulunan pek çok hatayı ortadan kaldırır.

const kdvOrani = 0.20;      // sabit
let toplam = 0;             // değişecek
for (let i = 0; i < 5; i++) {
  toplam += i;
}

Kural basit: önce her şeyi const yapın, ancak yeniden atamanız gerektiğinde let'e geçin. Böylece kodunuzun neyi değiştirdiğini okurken hemen görürsünüz.

Fonksiyonlar ve Ok Fonksiyonları

Modern JavaScript, klasik function tanımının yanına ok fonksiyonlarını (arrow functions) ekledi. Bunlar daha kısa yazılır ve özellikle geri çağırma (callback) fonksiyonlarında kodu okunabilir kılar. Ayrıca ok fonksiyonları kendi this bağlamlarını oluşturmadıkları için, eski JavaScript'in en kafa karıştırıcı konularından birini büyük ölçüde çözerler.

const fiyatlar = [100, 250, 75];
const kdvli = fiyatlar.map(f => f * 1.20);
// [120, 300, 90]

map, filter, reduce gibi dizi metotlarıyla birlikte kullanıldığında, döngü yazmadan veri dönüştürmek son derece akıcı hâle gelir. Bu bildirimsel (declarative) yaklaşım, "ne yapılacağını" anlatır; "nasıl yapılacağının" ayrıntısıyla uğraşmazsınız.

Eşzamansız Kod: Callback Cehenneminden async/await'e

JavaScript tek iş parçacıklı (single-threaded) çalışır; bu yüzden ağ istekleri gibi zaman alan işlemleri beklerken tarayıcıyı kilitlememesi gerekir. Eskiden bu, iç içe geçmiş geri çağırma fonksiyonlarıyla yönetilirdi ve "callback cehennemi" denen okunamaz bir yapıya yol açardı. Promise'ler bunu düzeltti, async/await ise okunabilirliği zirveye taşıdı.

async function urunGetir(id) {
  try {
    const yanit = await fetch(`/api/urunler/${id}`);
    const urun = await yanit.json();
    return urun;
  } catch (hata) {
    console.error('Ürün alınamadı:', hata);
  }
}

await anahtar sözcüğü, eşzamansız bir işlemin sonucunu sanki senkronmuş gibi beklemenizi sağlar. Kod yukarıdan aşağıya okunur, ama arka planda tarayıcı hiç kilitlenmez. try/catch ile hata yönetimi de doğal biçimde entegre olur.

Neden Bu Kadar Önemli?

Bir e-ticaret arayüzünde sepet güncelleme, stok kontrolü ve fiyat hesaplama gibi işlemlerin çoğu sunucuyla konuşur. Bu isteklerin akıcı, hatasız ve kullanıcıyı bekletmeden yönetilmesi, doğrudan kullanıcı deneyimini etkiler. async/await, bu akışı hem yazması hem okuması kolay hâle getirir.

Modüller: Kodu Parçalara Ayırmak

Eskiden tüm JavaScript tek bir dev dosyada ya da global değişkenlerle birbirine bağlı parçalarda yaşardı. Modern JavaScript, ES modülleriyle (ES modules) kodu dosyalara ayırıp aralarında açıkça bağ kurmanızı sağlar.

// hesapla.js
export function kdvEkle(tutar) {
  return tutar * 1.20;
}

// sepet.js
import { kdvEkle } from './hesapla.js';
console.log(kdvEkle(100)); // 120

• export: Bir dosyanın dışarıya ne sunduğunu belirtir.
• import: Başka dosyalardan gerekli parçaları getirir.
• Global değişken kirliliği ortadan kalkar; her modül kendi kapsamında yaşar.

DOM ile Etkileşim

Tarayıcıda JavaScript'in asıl işi, sayfayı yani DOM'u (Document Object Model) yönetmektir. Modern API'ler bunu temiz bir şekilde yapar: querySelector ile eleman seçer, addEventListener ile olayları dinler, textContent ile içerik değiştirirsiniz.

const buton = document.querySelector('#sepeteEkle');
buton.addEventListener('click', () => {
  const sayac = document.querySelector('#sepetSayaci');
  sayac.textContent = Number(sayac.textContent) + 1;
});

Burada dikkat edilmesi gereken nokta, kullanıcı verisini DOM'a yerleştirirken güvenlik açığı yaratmamaktır. Ham HTML enjekte etmek yerine textContent kullanmak, XSS riskini büyük ölçüde azaltır.

Sonuç

Modern JavaScript, eski dilin dağınıklığından uzakta, net ve tutarlı kavramlar üzerine kurulu. const ve let ile öngörülebilir değişkenler, ok fonksiyonları ile temiz dönüşümler, async/await ile okunabilir eşzamansız kod ve modüllerle düzenli bir yapı; bunların hepsi bir araya geldiğinde bakımı kolay, hatası az uygulamalar ortaya çıkar. Bu temelleri sağlam kurmak, ister basit bir arayüz ister karmaşık bir e-ticaret paneli yazın, üzerine güvenle bina yükseltebileceğiniz bir zemin sağlar.