JavaScript Closure Nedir?

JavaScript ogrenmeye yeni baslayan veya 2-3 yildir yazan ama temel kavramlari tam oturtamamis herkes, "closure" denince bir tedirginlik yasar. Bunun sebebi, konunun etrafinda gereksiz bir "gizem" olusturulmus olmasi. Aslinda closure basit bir sey — hayatinda bir kez anladin mi bir daha unutmuyorsun.

Yaygin yanlis inanclar:

• "Closure super karmasik bir sey" — degil, bir kapsam + bir fonksiyon, o kadar.
• "Sadece ileri seviye JavaScript'te kullanilir" — her yerde, en basit callback'lerde bile var.
• "Performansi cok yer" — cogu durumda motor optimize eder, dert etmeye gerek yok.
• "Mulakatta sorulmaz" — JavaScript mulakatinin %80'inde ilk 3 sorudan biri.

Bu yazi, closure'i 12 dakikada "bir daha unutmayacagin" sekilde anlatmak icin yazildi. Somut ornekler, benzetmeler ve mulakat SSS ile.

Asagidaki kodu ac ve ne oldugunu tahmin et. Sonra calistir:

function disFonksiyon() {
  const mesaj = "Merhaba";

  function icFonksiyon() {
    console.log(mesaj);  // ← "mesaj" disFonksiyon'un degiskeni
  }

  return icFonksiyon;
}

const fn = disFonksiyon();
fn();  // Cikti: "Merhaba" 😮

disFonksiyon() calistirildi ve bitti. mesaj degiskeni artik o scope'ta var olmamali — cunku fonksiyon dondu, scope temizlendi. Ama fn() cagirinca hâlâ "Merhaba" yazdiriyor.

Bu mumkun, cunku icFonksiyon, mesaj'i bir closure icinde "hapsediyor". JavaScript motoru, icFonksiyon hâlâ hayattayken o degiskeni garbage collector'a teslim etmiyor.

Mulakatlarda en cok sorulan ornek: bir sayac olustur, disaridan count'a dogrudan erisilemesin, sadece "arttir" ve "oku" metodlari olsun. Class yazmadan yapabilir misin? Closure ile olur:

function sayacOlustur() {
  let count = 0;  // private degisken — disaridan erisilemez

  return {
    arttir: function() {
      count += 1;
      return count;
    },
    oku: function() {
      return count;
    }
  };
}

const s = sayacOlustur();
console.log(s.oku());     // 0
console.log(s.arttir());  // 1
console.log(s.arttir());  // 2
console.log(s.oku());     // 2
// s.count  ← undefined! Disaridan erisilemez

Burada count degiskeni hicbir zaman dogrudan erisilebilir degil — sadece arttir() ve oku() fonksiyonlari uzerinden kontrol edilebilir. Bu encapsulation'in en sade hali, ve JavaScript'te class yazmadan mumkun.

Asagidaki kodu calistir. Ne bekliyorsun, ne oluyor?

// YANLIS — var function-scoped
for (var i = 1; i <= 3; i++) {
  setTimeout(function() {
    console.log(i);
  }, i * 100);
}
// Cikti: 4, 4, 4  ❌  (Beklenti: 1, 2, 3)

Hep 4 yazdirmasinin sebebi: var i function-scoped, yani tum iterasyonlar ayni i degiskenini paylasiyor. setTimeout callback'i dongu bittikten sonra calistiginda i artik 4'e esit.

Cozum 1: let kullan (block-scoped, her iterasyon yeni i):

// DOGRU — let block-scoped
for (let i = 1; i <= 3; i++) {
  setTimeout(function() {
    console.log(i);
  }, i * 100);
}
// Cikti: 1, 2, 3  ✓

Cozum 2: forEach kullan (callback parametre olarak i alir):

// DOGRU — forEach
[1, 2, 3].forEach(function(i) {
  setTimeout(function() {
    console.log(i);
  }, i * 100);
});
// Cikti: 1, 2, 3  ✓

Cozum 3 (closure, eski usul): IIFE ile yeni kapsam:

// ESKI USUL — IIFE
for (var i = 1; i <= 3; i++) {
  (function(j) {
    setTimeout(function() {
      console.log(j);
    }, j * 100);
  })(i);
}
// Cikti: 1, 2, 3  ✓

Mulakatta "neden hep 4 cikti?" diye sorarlarsa, "var function-scoped, tum iterasyonlar ayni i'yi paylasiyor, setTimeout dongu bittikten sonra calistigi icin i=4" cevabini ver. Pratikte bugun let veya forEach kullan — var ile dongu yazma.

Closure'i gercek projede 4 yerde gorursun. Bunlari bilmek mulakatta "evet kullaniyorum" demeni saglar.

function debounce(fn, ms) {
  let timeoutId;  // closure'da tutuluyor

  return function(...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => fn.apply(this, args), ms);
  };
}

const aramaYap = debounce(function(query) {
  console.log("Araniyor:", query);
}, 300);

// Kullanicinin her tus vurusunda aramaYap('p'), aramaYap('py'), aramaYap('pyt')
// Sadece sonuncusu 300ms sonra calisir — oncekiler iptal olur