JavaScript’te Kapanımlar (Closures): Tam Bir Rehber ve Örnekler
JavaScript’te kapanımlar, fonksiyonların kapsamı ve belleği hakkında güçlü bir kavramdır. Fonksiyonların kendi içindeki değişkenlere erişme ve hatırlama yeteneğini sağlar. Bu rehberde, kapanımları derinlemesine inceleyeceğiz ve nasıl çalıştıklarını, ne zaman kullanıldıklarını ve ne zaman kullanıldığını örneklerle açıklayacağız.
Kapanımlar Nedir?
Kapanımlar, JavaScript’te bir fonksiyonun tanımlandığı yerin dışında dahi, fonksiyonun kapsamındaki değişkenlere erişebildiği bir mekanizmadır. Başka bir deyişle, bir iç fonksiyon, dış fonksiyonun kapsamındaki değişkenlere erişebilir ve bunları “hatırlayabilir”.
Bu özelliği açıklamak için basit bir örnek:
“`javascript
function outerFunction() {
let outerVar = “Dış Değişken”;
function innerFunction() {
console.log(outerVar);
}
return innerFunction;
}
let myInnerFunction = outerFunction();
myInnerFunction(); // Çıktı: “Dış Değişken”
“`
Yukarıdaki örnekte, innerFunction, outerFunction‘ın kapsamındaki outerVar değişkenine erişebilir ve değerini yazdırabilir. Bu, innerFunction, outerFunction‘ın kapsamını “kapattığı” ve outerVar değişkenine erişebildiği için mümkündür.
Kapanımlar Neden Önemlidir?
Kapanımların JavaScript’te birkaç önemli avantajı vardır:
- Veri Gizliliği: Kapanımlar, değişkenleri dış dünyadan gizlemeyi sağlar. İç fonksiyonlar dış fonksiyonun kapsamındaki değişkenlere erişebilse de, bu değişkenlere doğrudan erişilemez.
- Durum Yönetimi: Kapanımlar, fonksiyonun durumunu hatırlamak için kullanılabilir. Örneğin, bir sayaç oluşturmak için bir kapanım kullanılabilir:
- Fonksiyonel Programlama: Kapanımlar, fonksiyonel programlamanın önemli bir parçasıdır. Fonksiyonlar, diğer fonksiyonları parametre olarak alabilir veya döndürebilir ve bu da kodun daha modüler ve yeniden kullanılabilir olmasını sağlar.
Kapanımların Kullanım Alanları
Kapanımlar, birçok farklı uygulamada kullanılır:
- Çalışan Kapanımlar (Closures in Action): Kapanımlar, JavaScript’te birçok farklı şekilde kullanılır. Örneğin, bir sayacın değeri için geçerli değeri saklamak için kapanımlar kullanılabilir:
- Olay İşleyicileri: Kapanımlar, olay işleyicilerinde kullanılabilir. Örneğin, bir düğmeye tıklandığında, tıklama anında geçerli değeri hatırlayan bir kapanım kullanılabilir.
- Fonksiyonel Programlama: Kapanımlar, fonksiyonel programlamada yaygın olarak kullanılır. Kapanımlar, fonksiyonları parametre olarak alabilir veya döndürebilir ve bu da kodun daha modüler ve yeniden kullanılabilir olmasını sağlar.
Kapanımlar ve Bellek Yönetimi
Kapanımlar, bellekte yer kaplayan nesnelerdir. Bir fonksiyonun kapsamı sona erdiğinde bile, iç fonksiyonların kullanabileceği değişkenler bellekten silinmez. Bu nedenle, kapanımların dikkatli kullanılması önemlidir, aksi takdirde bellek sızıntılarına neden olabilirler.
Bellek sızıntılarına neden olabilecek bazı durumlar:
- Döngülerde Kapanımlar: Bir döngü içinde bir kapanım oluşturulur ve döngü her yinelemede bir değişkene bağlanırsa, döngü tamamlandığında bile değişken bellekten silinmez.
- Kapanımların Sık Kullanımı: Çok sayıda kapanım oluşturulması, bellek tüketimini artırabilir.
Örnekler
Kapanımların JavaScript’te nasıl kullanıldığını gösteren bazı örnekler:
1. Sayaç Örneği
“`javascript
function counter() {
let count = 0;
return function() {
count++;
return count;
};
}
let myCounter = counter();
console.log(myCounter()); // Çıktı: 1
console.log(myCounter()); // Çıktı: 2
console.log(myCounter()); // Çıktı: 3
“`
Bu örnekte, counter fonksiyonu, bir sayaç değeri tutan bir kapanım döndürür. myCounter değişkenine atanmış olan kapanım, her çağrıldığında sayacın değerini artırır.
2. Olay İşleyicisi Örneği
“`javascript
let button = document.getElementById(‘myButton’);
button.addEventListener(‘click’, function() {
console.log(‘Düğmeye tıklandı!’);
});
“`
Bu örnekte, addEventListener fonksiyonu, bir düğmeye tıklandığında çağrılacak bir kapanım alır. Kapanım, düğmeye tıklandığında hangi fonksiyonun çağrılacağını “hatırlar”.
3. Fonksiyonel Programlama Örneği
“`javascript
function add(x) {
return function(y) {
return x + y;
};
}
let add5 = add(5);
console.log(add5(3)); // Çıktı: 8
“`
Bu örnekte, add fonksiyonu, bir sayı alan ve başka bir sayı alan ve toplamlarını döndüren bir kapanım döndürür. add5 değişkeni, 5 ekleyen bir kapanım içerir. Bu, kodun daha modüler ve yeniden kullanılabilir olmasını sağlar.
Sonuç
Kapanımlar, JavaScript’te güçlü bir kavramdır ve birçok farklı uygulamada kullanılabilir. Kapanımların nasıl çalıştığını ve ne zaman kullanılacağını anlamak, daha güçlü ve verimli JavaScript kodu yazmanıza yardımcı olabilir.
Kapanımlar hakkında daha fazla bilgi edinmek için fatihsoysal.com web sitesini ziyaret edebilirsiniz. Bu sitede, JavaScript hakkında kapsamlı makaleler ve kaynaklar bulabilirsiniz.
#Etiketler: JavaScript, Kapanımlar, Closures, Fonksiyon Kapsamı, Fonksiyonel Programlama, Bellek Yönetimi, Durum Yönetimi, Veri Gizliliği, Olay İşleyicileri, JavaScript Örnekleri, Fonksiyonel Programlama Örnekleri, Bellek Sızıntıları, Kapanımların Kullanım Alanları