Frontend Mülakatlarında Closure Soruları Neden Sorulur?

Frontend mülakatlarında sıkça karşımıza çıkan konulardan biri closure. Genellikle küçük bir kod parçası verilir ve çıktının ne olacağı sorulur. İlk bakışta basit gibi görünen bu sorular, aslında JavaScript'in çalışma mantığını ne kadar anladığınızı ölçer.

JavaScript davranış odaklı bir dil olduğu için closure kavramı sadece teorik bir bilgi değildir. Scope, asenkron işlemler, event handler'lar ve React hook'ları gibi birçok yerde closure davranışıyla karşılaşırız. Bu nedenle mülakatlarda closure soruları, adayın gerçek JavaScript bilgisini ölçmek için oldukça etkili bir yöntem olarak görülür.

Closure Nedir?

Closure, en basit tanımıyla bir fonksiyonun tanımlandığı scope'a erişmeye devam edebilmesidir. Başka bir deyişle, bir fonksiyon kendi dışındaki değişkenleri hatırlayabilir ve bu değişkenlere erişmeye devam eder.

Basit bir örnek üzerinden bakalım:

function outer() {
  let count = 0;

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

  return inner;
}

const counter = outer();

counter(); // 1
counter(); // 2
counter(); // 3

Burada inner fonksiyonu, outer fonksiyonunun içindeki count değişkenine erişmeye devam ediyor. Normalde outer fonksiyonu çalıştıktan sonra değişkenlerin silinmesi beklenir. Ancak closure sayesinde count değişkeni hafızada tutulmaya devam eder.

Bu davranış JavaScript'in temel özelliklerinden biridir ve birçok modern JavaScript yapısının temelini oluşturur.

Mülakatlarda Neden Closure Soruları Sorulur?

Closure soruları genellikle küçük ama kafa karıştırıcı örnekler üzerinden sorulur. Bunun nedeni, bu soruların birden fazla JavaScript konusunu aynı anda ölçebilmesidir.

Örneğin oldukça bilinen bir örnek:

for (var i = 0; i < 3; i++) {
  setTimeout(() => {
    console.log(i);
  }, 100);
}

Bu kodun çıktısı çoğu kişinin beklediği gibi 0 1 2 olmaz. Bunun yerine çıktı şu şekilde olur:

3
3
3

Bunun nedeni closure ve var değişkeninin scope davranışıdır. var fonksiyon scope'una sahiptir ve loop tamamlandığında i değeri 3 olur. setTimeout callback'leri çalıştığında closure sayesinde aynı i değişkenine erişirler.

Aynı örneği let ile değiştirelim:

for (let i = 0; i < 3; i++) {
  setTimeout(() => {
    console.log(i);
  }, 100);
}

Bu sefer çıktı:

0
1
2

Bunun nedeni let değişkeninin block scope'a sahip olmasıdır. Her iteration için ayrı bir i değişkeni oluşturulur ve closure bu değişkenleri ayrı ayrı yakalar.

Bu örnek aslında şu konuları birlikte ölçer:

• Scope bilgisi

• var vs let farkı

• Closure davranışı

• Asenkron JavaScript davranışı

Bu yüzden closure soruları mülakatlarda oldukça popülerdir.

Closure ile Fonksiyon Üretmek

Closure sadece mülakat sorularıyla sınırlı değildir. Gerçek projelerde fonksiyon üretmek için de sıkça kullanılır.

function createMultiplier(multiplier) {
  return function(number) {
    return number * multiplier;
  };
}

const double = createMultiplier(2);
const triple = createMultiplier(3);

console.log(double(5)); // 10
console.log(triple(5)); // 15

Burada her fonksiyon kendi multiplier değerini hatırlar. Bu da closure'ın gerçek hayattaki kullanımına güzel bir örnektir.

Event Handler'larda Closure

Closure davranışı event handler'larda da sıkça karşımıza çıkar.

const buttons = document.querySelectorAll("button");

for (var i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener("click", function() {
    console.log(i);
  });
}

Burada hangi butona basarsanız basın aynı değer yazdırılır. Bunun nedeni yine closure ve var davranışıdır.

Bunu let ile düzeltirsek:

for (let i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener("click", function() {
    console.log(i);
  });
}

Artık her buton kendi index değerini yazdırır.

React'te Closure Davranışı

Closure konusu React'te de oldukça önemlidir. Özellikle hook kullanırken closure kaynaklı bug'larla sık karşılaşılır.

useEffect(() => {
  console.log(count);
}, []);

Burada count değişse bile useEffect içindeki değer güncellenmez. Bunun nedeni closure'ın ilk değeri yakalamasıdır.

Bu durum "stale closure" olarak adlandırılır ve React projelerinde sık karşılaşılan bir problemdir.

Başka bir örnek:

const handleClick = () => {
  setTimeout(() => {
    console.log(count);
  }, 1000);
};

Bu örnekte kullanıcı butona bastıktan sonra state değişirse, setTimeout içindeki değer eski olabilir. Bu da beklenmeyen davranışlara yol açabilir.

Closure Soruları Aslında Neyi Ölçer?

Closure soruları genelde şunları ölçer:

• JavaScript'in çalışma mantığını anlama

• Scope bilgisini anlama

• Asenkron davranışı yorumlama

• Debug yeteneği

• Gerçek dünya problemlerine yaklaşım

Bu yüzden closure soruları küçük ama oldukça güçlü sinyaller üretir.

Sonuç

Closure kavramı JavaScript'in temel yapı taşlarından biridir. Scope, asenkron davranış ve fonksiyonel yapı gibi birçok konu closure ile birlikte çalışır.

Frontend mülakatlarında closure sorularının sıkça sorulmasının nedeni de budur. Küçük bir kod örneği üzerinden adayın JavaScript bilgisinin derinliği ölçülebilir.

Closure sadece mülakat konusu değildir. Gerçek projelerde, özellikle React uygulamalarında, closure davranışını anlamak daha stabil ve öngörülebilir kod yazmayı sağlar.

Bu yüzden closure konusunu anlamak, JavaScript öğrenme sürecinde önemli bir dönüm noktasıdır.