“Uygulama çalışıyor ama niye gittikçe ağırlaşıyor?”
“Kodda hata yok ama performans yerlerde…”
“Chrome sekmesi resmen nefes nefese” 🥵

Tebrikler.
Bir memory leak ile tanışmış olabilirsin.

Bugün:

• Memory leak’i gerçekten anlayacağız
• Nereden çıktığını tek tek göreceğiz
• Ve en önemlisi: nasıl önleneceğini öğreneceğiz

---

🧠 Memory Leak Nedir? (Çok Net Tanım)

Memory leak, JavaScript’in artık ihtiyacı olmayan verileri RAM’de tutmaya devam etmesidir.

Normal akış:

1. Veri oluşturulur
2. Kullanılır
3. İş bitince silinir 🧹

Memory leak’te ise:

“Belki lazım olur…”
JavaScript bırakmaz 😬

Sonuç:

• RAM şişer
• Uygulama yavaşlar
• Tarayıcı isyan eder

---

🧹 Garbage Collector (Çöpçü Ama Hassas)

JavaScript’te Garbage Collector vardır.

Görevi:

Erişilemeyen verileri silmek

Basit mantık:

let user = { name: "Ali" };
user = null;

Burada:

• { name: "Ali" } artık erişilemez
• Garbage Collector gelir
• “Tamam bunu silebiliriz” der

💡 Ama sorun şu:
Sen farkında olmadan veriyi erişilebilir bırakıyorsun

Ve Garbage Collector:

“Bu hâlâ yaşıyor…” 😐

---

🚨 Memory Leak Belirtileri (Uygulama Yardım İstiyor)

Şunları görüyorsan şüphelen:

• 🐌 Zamanla yavaşlayan uygulama
• 📈 RAM kullanımı sürekli artıyor
• 🔄 Sayfayı yenileyince düzeliyor
• 💻 Laptop fanı uçak modunda ✈️

---

😈 JavaScript’te En Yaygın Memory Leak Sebepleri

Şimdi asıl mevzuya giriyoruz.
Burada herkesin düştüğü tuzaklar var 👇

---

1️⃣ Global Değişkenler – “Ben Buradayım ve Gitmiyorum”

❌ Tehlikeli Kod

leakedValue = "Oops";

Bu ne yaptı?

• let, const, var yok
• Otomatik global oldu
• Sayfa kapanana kadar RAM’de 🎯

Daha sinsi örnek

function createData() {
  data = new Array(1000000);
}
createData();

Bu data:

• Fonksiyon bitse bile
• Bellekten asla silinmez

✅ Doğru Kullanım

function createData() {
  const data = new Array(1000000);
}

🧠 Kural:

Global değişken = potansiyel memory leak

---

2️⃣ Event Listener’lar – “Ekledin Ama Unuttun”

Klasik Hata

button.addEventListener("click", () => {
  console.log("Tıklandı");
});

Sorun ne?

• Button DOM’dan silinse bile
• Listener hâlâ bellekte
• Çünkü JS “bir gün tıklanır” diye düşünüyor 😅

❌ SPA’lerde Felaket

Sayfa değişir, component gider ama listener kalır.

✅ Doğru Kullanım

function handleClick() {
  console.log("Tıklandı");
}

button.addEventListener("click", handleClick);

// Temizlik
button.removeEventListener("click", handleClick);

📌 Altın kural:

Event eklediysen, kaldırmayı planla.

---

3️⃣ setInterval & setTimeout – Zaman Bombası ⏰

❌ Tehlikeli

setInterval(() => {
  console.log("Çalışıyorum");
}, 1000);

Bu ne yapar?

• Sayfa değişse bile
• Component kapansa bile
• Sonsuza kadar çalışır

✅ Doğru Kullanım

const id = setInterval(() => {
  console.log("Çalışıyorum");
}, 1000);

// İş bitince
clearInterval(id);

⚛️ React’te Hayati

useEffect(() => {
  const id = setInterval(() => {
    console.log("tick");
  }, 1000);

  return () => clearInterval(id);
}, []);

💡 İpucu:

Interval varsa, clear’i yoksa leak var.

---

4️⃣ Closure’lar – Süper Güç ama Yan Etkili 🧠

Closure Nedir?

Fonksiyonun dış değişkenleri hatırlaması

function counter() {
  let count = 0;

  return function () {
    count++;
    console.log(count);
  };
}

Burada:

• count asla silinmez
• Çünkü iç fonksiyon onu kullanıyor

❌ Büyük Veri + Closure = Leak

function leakyClosure() {
  const bigArray = new Array(1000000);

  return () => {
    console.log(bigArray.length);
  };
}

Bu fonksiyon yaşadığı sürece:

• bigArray RAM’de 🧠

✅ Çözüm

• Büyük veriyi dışarıda tutma
• Gerekince null’la

---

5️⃣ DOM Referansları – Görünmez Zincirler

❌ Klasik Leak

let box = document.getElementById("box");

document.body.removeChild(box);
// box hâlâ referans

Ne oldu?

• DOM gitti
• JS referansı duruyor
• Garbage Collector dokunamaz

✅ Temizlik

box = null;

🧹 Artık silinebilir.

---

🕵️ Memory Leak Nasıl Bulunur?

🔍 Chrome DevTools

• Memory tab
• Heap Snapshot
• Allocation Timeline

Mantık Testi

“Bu veri hâlâ gerçekten gerekli mi?”

Cevap hayırsa:
👉 Muhtemelen leak vardır 😄

---

🛡️ Memory Leak Önleme Rehberi (Duvara As)

✔️ Global değişken yazma
✔️ Event listener’ları temizle
✔️ Interval / timeout kapat
✔️ Büyük closure’lara dikkat
✔️ DOM referanslarını null’la
✔️ Component lifecycle’ı önemse

---

🎯 Neden Bu Kadar Kritik?

Çünkü memory leak:

• Hata vermez
• Konsolda bağırmaz
• Sessizce performansı öldürür ☠️

Ve production’da:

“Bizim uygulama niye yavaş?” sorusu başlar 😬

---

☕ Efsane Özet

• Memory leak = kullanılmayan belleğin tutulması
• JavaScript seni uyarmaz
• En tehlikeli bug türüdür
• Ama bilinirse önlenir