JavaScript, ustalaşmak için en zor programlama dillerinden biridir. Kimi zaman üst düzey geliştiriciler bile yazdıkları kodun çıktısını tahmin edemezler. JavaScript’teki en kafa karıştırıcı kavramlardan biri kapanışlardır. Yeni başlayanlar çoğu zaman konsepte takılıp takılırlar, endişelenmeyin. Bu yazı, kapanışları daha iyi anlamanıza destek olmak için temel örneklerde sizi yavaşça yönlendirecektir. Hadi başlamış olalım.
Kapanışlar Nedir?
Kapatma, kapatma oluşturmada işlevin kapsamındaki değişkenler de dahil olmak suretiyle bir işlevin ve sözcüksel ortamının bir yapısıdır. Daha rahat bir ifadeyle, bir dış işlevi ve bir iç işlevi düşünün. İç işlev, dış işlevin kapsamına erişecektir.
Bazı JavaScript kapatma örneklerine bakmadan ilkin sözlü kapsamı anlamanız gerekir.
Sözlü Ortam Nedir?
Sözcüksel ortam, üst ortamıyla beraber mahalli bellektir. Aşağıda verilen örneğe göz atın ve aşağıdaki kodun çıktısını tahmin edin:
function outer(){
let a = 10;
console.log(y);
inner();
function inner(){
console.log(a);
console.log(y);
}
}
let y = 9;
outer();
Çıktı, 9, 10, 9. İç fonksiyon, üst öğesinin değişkenlerine erişebilir, dış() fonksiyon. Bundan dolayı, iç() işlevi erişebilir değişken a. Bu, bir sonraki iç() işlevi de erişebilir değişken y kapsam zinciri terimi sebebiyle.
Dış işlevin üst öğesi geneldir ve iç() işlevi dış() fonksiyon. Bundan dolayı, iç() işlevi, üst öğesinin değişkenlerine erişebilir. Değişkene erişmeye çalışırsanız a genel kapsamda bir hata görüntüler. Bundan dolayı, kabul edebilirsiniz ki iç() işlevi sözlü olarak dış() işlevi ve dış() işlevi geneldir.
JavaScript Kapatma Örnekleri Açıklandı
Sözcüksel ortam hakkında informasyon edindiğinize nazaran, aşağıdaki kodun çıktısını kolayca tahmin edebilirsiniz:
function a(){
let x = 10;
function b(){
console.log(x);
}
b();
}
a();Çıktı, 10. İlk bakışta tahmin enemeyebilirsiniz, sadece bu JavaScript’te bir kapatma örneğidir. Kapatmalar bir işlevden ve sözlü ortamlarından başka bir şey değildir.
Birbirinin içinde yuvalanmış üç işlevin olduğu bir örneği ele alalım:
function a(){
let x = 10;
function b(){
function c(){
function d(){
console.log(x);
}
d();
}
c();
}
b();
}
a();Buna gene de kapanış denecek mi? Yanıt: Evet. Gene, kapatma, sözcüksel üst öğesine haiz bir işlevdir. İşlevin sözcüksel üst öğesi d() dir c(), ve kapsam zinciri terimi sebebiyle, fonksiyon d() dış işlevlerin ve genel işlevlerin tüm değişkenlerine erişebilir.
Başka bir garip örneğe göz atın:
function x(){
let a = 9;
return function y(){
console.log(a);
}
}
let b = x();
Bir işlevin içindeki bir işlevi döndürebilir, bir değişkene işlev atayabilir ve JavaScript’teki bir işlevin içine bir işlev geçirebilirsiniz. Bu dilin güzelliği. Değişken yazdırırsanız çıktının nasıl sonuçlanacağını tahmin edebilir misiniz? b? İşlevi yazdıracak y(). İşlev x() bir işlev döndürür y(). Bundan dolayı, değişken b bir işlevi depolar. Şimdi, değişkeni ararsan nasıl sonuçlanacağını tahmin edebilir misin? b? Değişkenin kıymetini yazdırır a: 9.
Kapatmaları kullanarak veri gizlemeyi de sağlayabilirsiniz. Daha iyi idrak etmek için, tarayıcıda “düğme” adlı bir kimliği olan bir düğmeye haiz bir örnek düşünün. Buna bir tıklama vakası dinleyicisi ekleyelim.
Şimdi düğmenin kaç kez tıklatıldığınızı hesaplamanız gerekir. Bunu yapmanın iki yolu vardır.
-
Genel değişken sayısı oluşturun ve bunu onclick artırarak artırin. Sadece bu yöntemin bir kusuru vardır. Küresel değişkenlerde değişim yapmak kolaydır, şu sebeple bunlara kolayca erişilebilirler.
-
Kapatmaları kullanarak veri gizlemeyi başarabiliriz. Bütünü sarabilirsin. addEventListener() işlevin içinde çalışır. Bu bir son olur. Ve bir kapatma oluşturduktan sonrasında, bir sayım değişkeni ve kıymetini onclick artırarak artırılır. Bu yöntemi kullanarak, değişken işlevsel kapsamda kalır ve hiçbir değişim yapılabilir.
Kapanışlar Niçin Önemlidir?
Kapatmalar bir tek JavaScript söz mevzusu olduğunda değil, öteki programlama dillerinde de oldukça önemlidir. Öteki durumların yanı sıra, hususi kapsamlarında değişkenler oluşturabileceğiniz yada işlevleri birleştirebileceğiniz birçok senaryoda yararlıdırlar.
İşlev kompozisyonunun bu örneğini göz önünde bulundurun:
const multiply = (a,b) => a*b;
const multiplyBy2 = x => multiply(10, x);
console.log(multiplyBy2(9));Kapanışları kullanarak aynı örneği uygulayabiliriz:
const multiply = function(a){
return function (b){
return a*b
}
}
const multiplyBy2 = multiply(2);
console.log(multiplyBy2(10))İşlevler aşağıdaki senaryolarda kapanışları kullanabilir:
- İşlev körisini uygulamak için
- Veri gizleme için kullanılacak
- Vaka Dinleyicileri ile kullanılacak
- setTimeout yönteminde kullanılacak()
Kapatmaları Gereksiz Yere Kullanmamalısınız
Uygulamanızın performansını düşürebilecekleri için hakkaten gerekmedikçe kapanmaları önlemeniz önerilir. Kapatmayı kullanmak oldukça fazla belleğe mal olur ve kapatmalar muntazam bir halde işlenmezse hafıza sızıntılarına niçin olabilir.
Değişkenler üstünden kapatılanlar JavaScript’in çöp toplayıcısı tarafınca özgür bırakılmaz. Kapatmaların içindeki değişkenleri kullandığınızda, tarayıcı değişkenlerin hala kullanımda bulunduğunu hissettiğinden hafıza çöp toplayıcı tarafınca özgür bırakılmaz. Bundan dolayı, bu değişkenler belleği tüketir ve uygulamanın performansını düşürır.
Kapatmaların içindeki değişkenlerin iyi mi çöp toplanacağını gösteren bir örnek aşağıda verilmiştir.
function f(){
const x = 3;
return function inner(){
console.log(x);
}
}
f()();Bu, bir sonraki değişken x burada, sık kullanılmamasına karşın hafıza tüketir. Çöp toplayıcı bu anıyı boşaltamayacak şu sebeple kapatmanın içinde.
JavaScript Sonsuzdur
JavaScript’te uzmanlaşmak sonsuz bir iştir, şu sebeple çoğu zaman deneyimli geliştiricilerin kendileri tarafınca araştırılmayan birçok kavram ve çerçeve vardır. Temel detayları öğrenerek ve sık sık uygulayarak JavaScript’teki tanıtıcınızı mühim seviyede geliştirebilirsiniz. Yineleyiciler ve jeneratörler, röportajların JavaScript röportajları esnasında sordurulmuş olduğu kavramlardan bazılarıdır.