JavaScript Closure Nedir?

Photo link

Herkese merhaba, ilk yazımda sizlere Asenkron (Asynchronous) Programlama ile ilgili yazımı paylaşmıştım. İkinci yazımda ise sizlere Javascript Closure (Kapama) ile ilgili yazımı aktaracağım. Şimdiden iyi okumalar.

Bir fonksiyon kendi kapsamı dışındaki değişkeni kullanıyorsa, bu fonksiyon başka bir kapsamdan çalıştırılsa bile o değişkene hala erişimi vardır. Bu açıklamaya, Closure’nin özetle tanımlaması diyebiliriz. Ayrıca “içteki fonksiyonların, dıştaki fonksiyon içinde bulunan değişkenleri kullanabilmesi ve kullanırken de değerini kaybetmemesi” böyle de ifade edebiliriz.

Fonksiyon çağırdığımızda geriye bir değer döndürür değil mi? Closure yapısında ise geriye bir fonksiyon döndürebiliyor . Evet yanlış duymadınız bir fonksiyon. Şöyle izah edelim: Fonksiyon başka bir fonksiyonu veya fonksiyonları “return“ edebiliyor.

Closure’un bize sağladığı diğer bir fayda; global olan bu değişkeni fonksiyonun içine alarak sadece tanımlanan ve kullanılacak olan fonksiyonda geçerlilik sağlamasıdır. Ek olarak, tanımladığımız fonksiyonda işlemi gerçekleştiriyor olmasıdır. Örneklerimizi incelemeye başlayalım.

let count = 0;

function counter() {
  count+++;
  return count;
}

console.log(counter());
console.log(counter());
console.log(counter());

Evet bu işlemimizden sonra çıktımızda beklediğimiz üzere değişkenimizin değeri ilk olarak 0 setlendikten sonra, counter() fonksiyonumuzu üç defa çağırıyoruz. Ekranda sırasıyla ‘’ 1 ‘’ ardından ‘’ 2 ‘’ ardından ‘’ 3 ‘’ şeklinde bir çıktı göreceğiz. Şimdi birazcık bu yapımızı değiştirelim…

function counter(){
  let count = 0;
  function setCount(){
      count++;
      return count;
  }
  return setCount;
}

let count = counter();

console.log(
  count
);

Yapımızı değiştirdiğimizde aslında globalde olan değişkenimizi fonksiyonumuzun içerisine alarak sadece bu fonksiyon içinde globalleştirdik. Ardından counter() fonksiyonumuzun içinde tanımladığımız setCount() fonksiyonunu çağırarak onun içinde değişkenimizi “return” edip daha sonrasında oluşturduğumuz setCount() fonksiyonumuzu döndürdük. console.log(count) çıktısı şu şekilde olacaktır;

setCount() {
count++;
return count;
}

şeklinde olacak. Şimdi fonksiyon döndürdüğünü gördüğümüz örneğin bir de çalıştırmasına geçelim.

Evet görmüş olduğumuz üzere burada çağırdığımız “count()” fonksiyonu artık bize döndüreceği fonksiyonu çalıştırarak değerimizi döndürecek. Yani, çıktımız “ 1 “ , “ 2 “ ve “ 3 “ şeklinde olacak. İkinci satıra dikkat edersek burada count değerimiz 0 olarak setleniyor. Onuncu satırda counter() fonksiyonumuzu her çağırdığımızda bu atama tekrar tekrar geçrekleşiyor ama count değerimiz hiç bir zaman değişmiyor. Önceki değeri ile devam ediyor.

Closure’larda ki diğer bir kullanım ise geriye değer yeniden isimlendirerek birden fazla fonksiyon döndürebilmesidir. Kulağa biraz daha garip geliyor değil mi? Aslında çok kullanışlı ve yaygın kullanımı burada başlıyor da diyebiliriz. Hadi kod üzerinden inceleyelim.

Burada ki yazdığımız “counter()” fonksiyonumuzun yukarıda ki yazmış olduğumuz fonksiyonlardan farkı geriye döndürdüğü birden fazla fonksiyonlardır. Konsolumuzda beklediğimiz çıktı ise tanımladığımız şekilde iki adet fonksiyonu çıktı olarak göstermesidir.

Evet aslında fotoğrafımızda ki logumuza bakarsak nitekim öyle oldu. Şimdi ise bu fonksiyonlarımızı kullanmaya geçelim. Fonksiyonumuz şu şekilde:

Baktığımızda aslında iki tane inner fonksiyonumuz mevcut yani iki tane Closure yapımız var ve geriye değer döndürürken de bir obje olarak verdiğimiz isimlerle dönmesini sağlıyoruz.

Konsol çıktılarımızın ise şu şekilde olmasını bekliyoruz: “1” , ”2” , ”3” , ”2” , ”1” ve ”0”

Ne demiştik özetle Closure yapısı sayesinde Javascript ile birlikte değişkenlerin global alanda yönetimini esnek bir şekilde sağlayabiliyoruz. Projelerde ki ihtiyaçlara göre bu esnekliği kullanabiliyoruz. Verdiğimiz örnekler ile güzel bir şekilde anlatma deneyiminde bulunduğuma inanıyorum. Elimden geldiğince anlaşılır olmaya çalıştım yazımı okuduğunuz ve incelediğiniz için teşekkürler.

Bir sonra ki konumuz ise Lazy Loading olacaktır…