Javascript Ve Closure

Javascript’in temellerinden biri olan closure aynı zamanda sıkça karıştırılan bir terimdir. Tanım vermeden önce javascript’in işleyiş düzeni hakkında biraz konuşalım.

Javascript temel olarak satır satır okuyarak kodu çalıştıran bir mekanizmaya sahiptir. (thread of execution)

Okuduğu her satırı string olarak kendi hafızasında depolar ve gerektiği zaman kullanır ya da çağırır.

let num = 5;
function multiplyByTwo(inputNum) {
 const result = inputNum * 2;
 return result;
}
const output = multiplyByTwo(num);

Yukarıdaki kodu mekanizma ile okuyalım. İlk satırdan başlıyoruz ve de son satıra kadar her şeyi string olarak depolayacağız. İlk satırda num tanımlayıp değerini 5 olarak belirledik.

İkinci satırda multiplyByTwo adlı bir fonksiyon tanımladık. Burada fonksiyonu çağırmıyor ya da çalıştırmıyoruz. Bir fonksiyon paketinin içine koymuş gibi depolayacağız yalnızca. Çünkü henüz çağrılmış değil.

Ardından bir sonraki satıra geçiyoruz. Output tanımlanmış ve de multiplyByTwo fonksiyonu çağrılmış.

Javascript’te ne zaman bir fonksiyon çağrılsa, o fonksiyona özel bir execution stack içinde çalışır. Bu stack’in kendine özel bir hafızası vardır.

Şimdi bu execution stack’i çalıştıralım.

İlk yazacağımız bilgi inputNum ve de global stack’ten aldığımız bilgi ile bu 3.

Ardından result’ı tanımlıyoruz ve işlemin sonucunu atıyoruz. Son olarak bu değeri output’a atıyoruz.

Şimdiye kadar closure ile ilgili herhangi bir konuşma olmadı fakat bunlar konsepti anlamamız için gerekli.

Closure Örneği

Şimdi closure’ı bir örnek ile tanımlayalım. İlk başta kodu inceleyelim. Counter adında bir fonksiyon tanımlamışız.

PrivateCount adında bir variable’ımız var. Private/Public bunlar OOP kavramı iken burada sırf isim amaçlı mı konulmuş yoksa bir anlamı var mı?

sonrasında birçok fonksiyon görüyoruz. Bunlardan üç tanesi return olarak tanımlanmış ve sırasıyla value, increment ve decrement değerleri.

function counter() {
  
  let privateCount = 0;
  
  function changeByVal(val) {
    privateCount += val;
  }
  
  return {
    value: function() {
      return privateCount;
    },
    increment: function() {
      changeByVal(+1);
    },
    decrement: function() {
      changeByVal(-1);
    }
  }
  
}

Genel olarak fonksiyonları düşünelim. Eğer içinde bir değer tanımlıyorsak bu değer fonksiyonu çağırdığımızda sıfırlanır. Bu bugüne kadar bildiğimiz ya da closure olmadan bildiğimiz.

Javascript’te fonksiyonları çağırdığımızda onların her defasında bir execution stack yarattığını söylemiştik. Kendine ait bir hafızası olan bir kare olarak düşünün bunu. O fonksiyonun içinde tanımlanmış olan değerleri içinde tutmakta.

const countVar = counter();
console.log(countVar.value());
countVar.increment();
console.log(countVar.value());
countVar.decrement();
console.log(countVar.value());

Yukarıdaki kod ile countVar adında bir variable tanımlayıp counter fonksiyonunu tanımlıyoruz. Fonksiyon return ettiğini countVar’a atayacak.

countVar artık counter fonksiyonu değil onun return ettiği değerlere/fonksiyonlara sahip olacak.

İlk başta değerimizi okutuyoruz. // 0

Bu değeri arttıyoruz ve yeniden okutuyoruz. // 1

Elimizdeki güç privateCount’ı kontrol edebilmek. Ve fark ettiyseniz bu değeri dışarıdan değiştirmenin imkanı yok. Diyebilirsiniz global bir şekilde bunu tanımlayabilirdik. Fakat global bir değere özellikle önemli ise herkesin erişme ihtimali pek de hoş değil.

Closure ile bir gizlilik geliyor. O değer gizli kalmış ve sadece istediğimiz şekilde değişmiş oluyor. increment veya decrement fonksiyonları haricinde değiştiremiyoruz ya da bir başka fonksiyon gelip değiştirmiyor.

Diğer Kullanım Alanları

Böyle baktığımızda ‘peki bu ne işimize yarayacak’ diyebilirsiniz.

Aslında şu an verdiğimiz örnek en sık kullanılan örneği olan bilgiyi saklamak. Fakat bu örnekleri çoğaltmak gerekirse:

1-) Bir butona tıklanma limiti getirebiliriz. (bir sayfadaki diğer her şey için geçerli)

2-) Bir fonksiyonu belli bir süre içinde ne kadar çağrılabileceği limitini getirebiliriz.

Bir de bunu hikayeleştirelim. Yoğun trafiğin olduğu bir alışveriş sitesinde eğer bir buton çoktan tıklanmışsa onun tıklanmasını istemeyiz. Closure ile bunun önüne geçebiliriz. (belki daha iyi alternatifler de olabilir. =) )

Umarım closure hakkında size yardımcı olmuştur bu yazı. Eleştiri/tavsiye dilerseniz bırakabilirsiniz.