JavaScript Call Stack: Kodunuzun Sahne Arkası

JavaScript kodunuz çalışırken, her şey bir sihir gibi görünebilir. Bir fonksiyon çağırıyorsunuz, o başka bir fonksiyonu çağırıyor, değerler dönüyor ve sonuç ekrana yazılıyor. Peki ama JavaScript tüm bu karmaşıklığı nasıl yönetiyor? İşte burada Call Stack (Çağrı Yığını) devreye giriyor.

Call Stack Nedir?

Call Stack, JavaScript motorunun fonksiyon çağrılarını takip etmek için kullandığı bir mekanizmadır. Tıpkı bir kitapta sayfa işareti kullanmak gibi - JavaScript hangi fonksiyonun içinde olduğunu, nereden geldiğini ve nereye döneceğini bu yapı sayesinde bilir.

Stack (Yığın) Kavramı

"Stack" kelimesi, üst üste dizilmiş nesneler anlamına gelir. Gerçek hayatta bir tabak yığını düşünün:

• Yeni bir tabak eklerken en üste koyarsınız
• Bir tabak alırken de en üstten alırsınız
• En alttaki tabağa ulaşmak için önce üsttekileri almanız gerekir

Bu yapıya LIFO (Last In, First Out - Son Giren, İlk Çıkar) denir.

Basit Bir Örnek

function selamVer(isim) {
    const mesaj = mesajOlustur(isim);
    console.log(mesaj);
}

function mesajOlustur(isim) {
    return "Merhaba, " + isim.toUpperCase() + "!";
}

selamVer("Ahmet");

Bu kod çalıştığında Call Stack şu şekilde değişir:

Adım 1: selamVer("Ahmet") çağrılır

┌─────────────────┐
│ selamVer("Ahmet")│
└─────────────────┘

Adım 2: selamVer içinden mesajOlustur(isim) çağrılır

┌───────────────────────┐
│ mesajOlustur("Ahmet") │  ← En üstte (şu an çalışan)
├───────────────────────┤
│ selamVer("Ahmet")     │  ← Bekliyor
└───────────────────────┘

Adım 3: mesajOlustur sonuç döndürür ve stack'ten çıkar

┌─────────────────┐
│ selamVer("Ahmet")│  ← Devam ediyor
└─────────────────┘

Adım 4: selamVer tamamlanır ve stack boşalır

(boş)

Gerçek Hayat Örneği: İç İçe Hesaplama

function fiyatHesapla(miktar, birimFiyat) {
    const toplamFiyat = carpim(miktar, birimFiyat);
    const kdvliFiyat = kdvEkle(toplamFiyat);
    return kdvliFiyat;
}

function carpim(a, b) {
    return a * b;
}

function kdvEkle(fiyat) {
    const kdvOrani = kdvOraniGetir();
    return fiyat + (fiyat * kdvOrani);
}

function kdvOraniGetir() {
    return 0.20; // %20 KDV
}

const sonFiyat = fiyatHesapla(5, 100);
console.log("Son fiyat:", sonFiyat); // 600

Call Stack Akışı

1. fiyatHesapla(5, 100)     → Stack'e eklendi
2. carpim(5, 100)            → Stack'e eklendi
   carpim 500 döndürdü       → Stack'ten çıktı
3. kdvEkle(500)              → Stack'e eklendi
4. kdvOraniGetir()           → Stack'e eklendi
   kdvOraniGetir 0.20 döndürdü → Stack'ten çıktı
   kdvEkle 600 döndürdü      → Stack'ten çıktı
5. fiyatHesapla 600 döndürdü → Stack'ten çıktı

Stack Overflow (Yığın Taşması)

Call Stack'in bir sınırı vardır. Eğer çok fazla fonksiyon iç içe çağrılırsa veya sonsuz döngü oluşursa "Stack Overflow" hatası alınır.

// ⚠️ DİKKAT: Bu kod Stack Overflow hatası verir!
function sonsuzDongu() {
    return sonsuzDongu(); // Kendini çağırıyor
}

sonsuzDongu(); // Maximum call stack size exceeded

Doğru Recursive (Özyinelemeli) Kullanım

function faktoriyel(n) {
    // Dur koşulu - bu olmadan sonsuz döngüye girer!
    if (n <= 1) {
        return 1;
    }
    return n * faktoriyel(n - 1);
}

console.log(faktoriyel(5)); // 120

Call Stack görünümü (faktoriyel(5) için):

faktoriyel(5)
  → faktoriyel(4)
    → faktoriyel(3)
      → faktoriyel(2)
        → faktoriyel(1) → 1 döndür
      → 2 * 1 = 2 döndür
    → 3 * 2 = 6 döndür
  → 4 * 6 = 24 döndür
→ 5 * 24 = 120 döndür

Chrome DevTools ile Call Stack'i Görme

Tarayıcınızda Call Stack'i gerçek zamanlı görebilirsiniz:

1. Chrome'da F12 tuşuna basın (DevTools açılır)
2. Sources sekmesine gidin
3. JavaScript dosyanızı bulun
4. Satır numarasına tıklayarak breakpoint ekleyin
5. Sayfayı yenileyin
6. Sağ tarafta Call Stack panelini görün

Neden Önemli?

Call Stack'i anlamak şu durumlarda yardımcı olur:

✅ Hata ayıklama: Hata mesajlarındaki "stack trace" artık anlam kazanır
✅ Performans: Çok derin fonksiyon zincirleri performansı etkiler
✅ Asenkron kod: Bir sonraki konumuz - JavaScript'in tek iş parçacıklı yapısı
✅ Recursive fonksiyonlar: Ne zaman duracağını planlamak için

Hata Mesajlarını Okuma

Bir hata aldığınızda, stack trace size tam olarak hatanın nerede oluştuğunu gösterir:

Uncaught TypeError: Cannot read property 'length' of undefined
    at dogrulaMetin (app.js:15)
    at formKontrol (app.js:8)
    at HTMLButtonElement.onclick (index.html:12)

Bu size şunu söylüyor:

1. onclick tetiklendi (kullanıcı butona tıkladı)
2. formKontrol fonksiyonu çağrıldı
3. dogrulaMetin fonksiyonu çağrıldı
4. Hata burada oluştu - bir şey undefined ve onun length özelliğine erişmeye çalışıyoruz

Özet

Bu makalede öğrendiklerimiz:

✅ Call Stack, JavaScript'in fonksiyon çağrılarını takip etme mekanizmasıdır
✅ LIFO prensibiyle çalışır - son giren ilk çıkar
✅ Her fonksiyon çağrısı stack'e eklenir, tamamlanınca çıkarılır
✅ Stack Overflow, çok fazla iç içe çağrıda oluşur
✅ Chrome DevTools ile Call Stack görselleştirilebilir

Bir sonraki makalede JavaScript'in Single-Threaded Yapısı ve Web API'ler konusunu inceleyeceğiz.