JavaScript IIFE Nedir?
-
28 Kasım 2022 • 20 dakikalık okuma
JavaScript IIFE, Immediately Invoked Function Expression ifadelerinin kısaltmasıdır. Hemen çalıştırılan fonksiyon ifadesi olarak çevirilebilir. Tanımlandığı anda çalışan fonksiyon demektir. IIFE mantığını kavrayabilmek için öncelikle JavaScript değişken ve kapsam kavramları anlaşılmalıdır;
JavaScript değişkenleri, global (en üst) veya local scope (lokal kapsamda) tanımlanırlar. Bir fonksiyon içinde tanımlanan değişken lokal değişken olarak tanımlanır ve fonksiyon çalıştıktan sonra bellekten düşerler. Bu nedenle 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.
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>
var name = 'Kamil'; // global kapsamdaki değişken
function greeting() {
var message = 'Merhaba';
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. Global kapsamda değişken tanımlamak, kodu çoğaldıkça ve farklı javascript dosyaları sayfaya eklendikçe değişken ve foksiyon isimlerinin çakışması ve gereksiz ve kullanılmayan değişkenlerin bellekte kalması gibi sorunlara neden olabilirler. Immediately Invoked Function Expression kendi kapsamı bulunur içindeki değişkenler metot dışından erişilemezler.
Kod
<script>
(function () {
// js kodu
})();
</script>
IIFE fonksiyonlar dışarıdan parametre alabilirler.
Kod
<script>
(function (a, b) {
console.log(a + b);
})(77, 1);
</script>
IIFE fonksiyonlar arrow fonksiyon olarak tanımlanabilir.
Kod
<script>
((a, b) => {
console.log(a + b);
})(77, 1);
</script>
Kullanım Amacı
IIFE tanımlaması ile gereksiz global değişkenleri tanımlanması engellenir, değişken ve fonksiyon isim çakışmaları önlenir, javascript kodu moduler hale getirilip daha organize hale edilebilir ve kod daha bakımı kolay hale getirilebilir.
IIFE Örnekleri
IIFE fonksiyon dışından erişilemeyen değişken tanımlanabilir ve fonksiyon birden fazla çağırılabilir;
Kod
<script>
const uniqueId = (function () {
let count = 0;
return function () {
++count;
return "id_" + count;
};
})();
console.log(uniqueId()); // "id_1"
console.log(uniqueId()); // "id_2"
console.log(uniqueId()); // "id_3"
</script>
IIFE fonksiyon lokal tanımlı fonksiyon ve değişken değerleri geri döndürülebilir;
Kod
<script>
var counter = function () {
var counterValue = 0;
return {
increment: function increment() {
++counterValue;
},
get value() {
return counterValue;
}
};
}();
counter.increment();
console.log(counter.value); // 1
counter.increment();
counter.increment();
counter.increment();
console.log(counter.value); // 4
</script>
Kaynaklar
- Immediately Invoked Function Expression - IIFE , tutorialsteacher.com, 28.11.2022 tarihinde alındı.
- JavaScript Immediately Invoked Function Expression , javascripttutorial.net, 28.11.2022 tarihinde alındı.
- Use Cases for JavaScript's IIFEs , mariusschulz.com, 28.11.2022 tarihinde alındı.
Beğen