Closure tuzakları

Döngü içinde closure oluştururken yapılan sık hatayı ve nasıl düzeleceğini öğrenirsin.

Closure tuzağı

Klasik bir closure tuzağı: döngüde var ile closure üretmek. var fonksiyon kapsamlı olduğundan, tüm closure'lar aynı i değişkenini yakalar. Döngü bitince i son değerinde kalır; closure'lar çağrıldığında hepsi aynı son değeri döndürür.

Buna stale reference denir: closure eski bir değere işaret ettiğini sanar ama aslında hep son değeri görür.

let ile çözüm

Çözüm: var yerine let kullan. let blok kapsamlıdır; her yineleme yeni bir bağ (binding) oluşturur. Her closure kendi i'sini yakalar, böylece çağrıldığında doğru indeksi döndürür.

Bu yüzden modern JavaScript'te döngülerde hep let tercih edilir. Eski kodlarda var görsen de yeni kod yazarken let kullan; bu basit değişiklik sinsi hatalardan korur.

Uygulama Döngüde closure düzelt

makeFunctions() adında bir fonksiyon tanımla. İçinde boş bir fns dizisi oluştur. for (let i = 0; i < 3; i++) döngüsüyle her yinelemede fns.push(function() { return i; }) yapsın. Sonunda fns'i döndürsün. Çağırıp üç elemanını da konsola yazdır.

Örnek çözümü göster

function makeFunctions() {
  const fns = [];
  for (let i = 0; i < 3; i++) {
    fns.push(function() {
      return i;
    });
  }
  return fns;
}

const fns = makeFunctions();
console.log(fns[0]());
console.log(fns[1]());
console.log(fns[2]());

Kendini test et

Tuzak terimlerini eşleştir

loop capture

Döngüde closure'ın değişkeni yakalaması
stale reference

Eski değere işaret eden referans
let in loop

Her yineleme için yeni kapsam
Döngüde var ile closure oluşturunca ne olur?
- Her closure kendi indeksini yakalar
- Tüm closure'lar döngünün son indeksini yakalar
- Döngü hiç çalışmaz
- Closure'lar otomatik sıfırlanır
Cevabı göster

Tüm closure'lar döngünün son indeksini yakalar — Doğru. var fonksiyon kapsamlıdır; tüm closure'lar aynı i'yi paylaşır ve döngü bitince son değerde kalır.

Doğru döngüyü seç

// Hatalı: tüm fonksiyonlar aynı i'yi yakalar
const wrong = [];
for (var i = 0; i < 3; i++) {
  wrong.push(() => i);
}

// Doğru: her yineleme yeni i bağlar
const right = [];
for (____) {
  right.push(() => i);
}

Cevabı göster

// Hatalı: tüm fonksiyonlar aynı i'yi yakalar
const wrong = [];
for (var i = 0; i < 3; i++) {
  wrong.push(() => i);
}

// Doğru: her yineleme yeni i bağlar
const right = [];
for (let i = 0; i < 3; i++) {
  right.push(() => i);
}

Sıradaki ders: Özet - Closure

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler