JavaScript Closure Nedir?
-
29 Kasım 2022 • 20 dakikalık okuma
JavaScript Closure, üst kapsamındaki lokal değerlere erişim hakkına sahip fonksiyondur. Closure mantığını kavrayabilmek için öncelikle değişken ve kapsam kavramları anlaşılmalıdır; JavaScript değişkenler global (en üst) veya local scope (lokal kapsamda) tanımlanırlar.
Lokal Değişkenler
JavaScript dilinde bir fonksiyon içinde tanımlanan değişkenler (local scope) lokal kapsamda tanımlanırlar. Lokal tanımlı değişkenler tanımlandığı fonksiyon çağrıldığında oluşturulur ve fonksiyon çalıştırılması tamamlandığında bellekten düşerler. Bu nedenle lokal değişkenler tanımlandığı fonksiyonun dışından erişilemezler.
Kod
<script>
function greeting() {
var message = 'Merhaba'; // lokal kapsamdaki değişken
console.log(message);
}
</script>
Global Değişkenler
JavaScript dilinde var , let ya da const anahtar kelimesiyle tanımlanan tüm değişkenler global kapsamda tamımlanır.
Kod
<script>
var name = 'Kamil'; // global kapsamdaki değişken
function greeting() {
var message = 'Merhaba';
console.log(message + ' ' + name);
}
</script>
Bir fonksiyon içinde var, let ya da const anahtar kelimesi olmadan tanımlanan değişkenler fonksiyonun içinde olmasına rağmen her zaman global olarak tanımlanır.
Kod
<script>
function greeting() {
var message = 'Merhaba';
name = 'Kamil'; // global kapsamdaki değişken
console.log(message + ' ' + name);
}
</script>
Global tanımlı değişkenler sayfa kapatılana kadar erişilebilir durumdadır ve sayfadaki tüm fonksiyon ve kodlar tarafından erişilebilir, let ve const ile tanımlanmadıysa değeri değiştirilebilir. Global değişkenler diğer fonksiyonlar içinden de erişilebilirler.
İç İçe Fonksiyonlar
JavaScript dilinde iç içe fonksiyon tanımlanabilir;
Kod
<script>
function greeting() {
var message = 'Merhaba';
function sayHi() {
console.log(message);
}
sayHi();
}
greeting();
</script>
Closure
Closure fonksiyon, üst kapsamındaki lokal değerlere erişim hakkına sahip fonksiyondur. Daha anlaşılır bir ifadeyle; içerideki fonksiyon daima dışındaki lokal değişken ve fonksiyonlara erişme hakkına sahiptir.
Kod
<script>
function greeting() {
var message = 'Merhaba';
function sayHi() {
console.log(message);
}
return sayHi;
}
var hi = greeting();
hi(); // hi fonksiyonu message değişkenine erişebilir.
</script>
Closure Örnekleri
Aşağıdaki örnekde sayHi ve sayHello fonksiyonları closure fonksiyondur. Aynı fonksiyon gövdesine sahip olsa da kapsamları farklıdır.
Kod
<script>
function greeting(message) {
return function(name){
return message + ' ' + name;
}
}
var sayHi = greeting('Merhaba');
var sayHello = greeting('Selam');
console.log(sayHi('Kamil')); // Merhaba Kamil
console.log(sayHello('Kamil')); // Selam Kamil
</script>
Artıları
- Closure fonksiyon içindeki değişkenlerde değer tutularak sonra kullanılabilir.
- Değişkeni gizli (private) yapar (Encapsulation yapılabilir)
- Kod tekrarını önler
- Modüler kod yazmayı sağlar.
Eksileri
- Closure içinde tanımlanan değişkenler bellekten düşmez.
- Çok fazla closure kullanımı uygulamayı yavaşlatabilir.
Closure Nasıl Kullanılır?
Closure JavaScripte implementasyon detayını saklamak için kullanılabilir. Yani fonksiyon dışından erişilemeyen (private) değişkenler ve fonksiyonlar tanımlanabilir.
Kod
<script>
function Counter(){
var privateCounter = 0;
function changeBy(val) {
privateCounter += val;
}
return {
increment: function() {
changeBy(1);
},
decrement: function() {
changeBy(-1);
},
value: function() {
return privateCounter;
}
};
};
var mySuperCounter = Counter();
console.log(mySuperCounter.value());
mySuperCounter.increment();
mySuperCounter.increment();
console.log(mySuperCounter.value());
mySuperCounter.decrement();
console.log(mySuperCounter.value());
</script>
Kaynaklar
- JavaScript Closures , w3schools.com, 27.11.2022 tarihinde alındı.
- JavaScript Closures , tutorialsteacher.com, 27.11.2022 tarihinde alındı.
- Closure in JavaScript – Explained with Examples , freecodecamp.org, 27.11.2022 tarihinde alındı.
- JavaScript Closures , javascripttutorial.net, 27.11.2022 tarihinde alındı.
Beğen