JavaScript IIFE nedir?

Mehmet · Dün 21:55 da

JavaScript IIFE nedir?

IIFE, “Immediately Invoked Function Expression” ifadesinin kısaltmasıdır; Türkçede tanımlandığı anda bir kez çalıştırılan fonksiyon ifadesi anlamına gelir. Fonksiyon parantez içine alınır ve sonuna eklenen () ile hemen çağrılır. Bu çağrı, ifadenin her değerlendirilmesinde yeniden yapılabilir; bütün uygulama ömrü için otomatik bir “yalnız bir kez” kilidi değildir. Böylece geçici değişkenler ve yardımcı kodlar dış kapsamı kirletmeden çalıştırılabilir.

En küçük IIFE sözdizimi şöyledir:

Kod:

(function () {
    console.log("IIFE çalıştı");
})();

Buradaki ilk parantez fonksiyonu bir “function declaration” olmaktan çıkarıp fonksiyon ifadesine dönüştürür. Sondaki () ise bu fonksiyon ifadesini çağırır. Aynı yapı ok fonksiyonuyla da yazılabilir:

Kod:

(() => {
    console.log("IIFE çalıştı");
})();

IIFE nasıl çalışır?

Normalde bir fonksiyon tanımlandığında gövdesi hemen çalışmaz; ayrıca çağrılması gerekir. IIFE’de ise fonksiyon ifadesi parantezle oluşturulur ve oluşturulmasının hemen ardından çağrılır. Fonksiyonun içindeki let ve const değişkenleri dışarıdan doğrudan erişilebilir olmaz.

Kod:

(function () {
    const siteAdi = "Örnek site";
    const mesaj = `${siteAdi} hazır`;

    console.log(mesaj);
})();

console.log(typeof siteAdi); // "undefined"

Beklenen çıktı önce Örnek site hazır, sonra undefined olur. siteAdi yalnızca IIFE’nin kapsamındadır. Dışarıdaki kodun bu değişkene erişmeye çalışması, değişkenin tanımsız olmasını veya doğrudan kullanılırsa ReferenceError oluşmasını açıklamaya yardımcı olur.

IIFE’ye parametre de verilebilir. Bu kullanım, dışarıdaki bir değeri kontrollü biçimde içeri aktarmak için uygundur:

Kod:

(function (isim, tekrar) {
    console.log(`${isim}: ${tekrar} kez`);
})("JavaScript", 3);

Çıktı JavaScript: 3 kez olur. Fonksiyonun tanımındaki isim ve tekrar parametreleri, çağrıdaki değerleri alır.

Kapsam oluşturma seçenekleri

İhtiyaç	Yaklaşım	Sınır
Modülsüz betikte geçici yardımcılar	IIFE	Dışarı açılan değerler ayrıca seçilir
Yalnız let/const için dar kapsam	Blok	Fonksiyon çağrısı veya var kapsamı sağlamaz
Dosyalar arası bağımlılıklar	ES modülü	Modül yükleme ortamı gerekir

Uygulanabilir kullanım örneği

Bir sayfadaki eski bir betikte yalnızca başlangıçta çalışacak yardımcı değişkenleri gizlemek istiyorsanız şu örneği kullanabilirsiniz:

Aşağıdaki kodu JavaScript dosyanıza veya test için tarayıcı geliştirici araçlarının Console bölümüne yerleştirin.
Kodu çalıştırın.
Konsolda önce Uygulama başlatıldı, ardından 42 çıktısını bekleyin.

Kod:

(function (root) {
    const ayar = {
        aktif: true,
        limit: 42
    };

    if (ayar.aktif) {
        console.log("Uygulama başlatıldı");
        console.log(ayar.limit);
    }

    root.ornekUygulama = {
        durum: "hazır"
    };
})(window);

Burada ayar dış kapsamı kirletmez; yalnızca özellikle window.ornekUygulama üzerinden dışarı açılan değer kalıcı olarak erişilebilir olur. Konsolda beklenen mesajlar görünmüyorsa kodun çalıştırıldığı bağlamı, JavaScript dosyasının gerçekten yüklendiğini ve tarayıcı konsolunda bir önceki sözdizimi hatası bulunmadığını kontrol edin. Bu örnek tarayıcıya özgüdür; Node.js ortamında window bulunmadığından aynı haliyle çalışmaz.

IIFE ne zaman tercih edilmeli?

IIFE özellikle modül sistemlerinin yaygın olmadığı eski veya tek dosyalı betiklerde geçici kapsam oluşturmak, başlangıç kodunu bir kez çalıştırmak ve global değişken sayısını azaltmak için kullanışlıdır. Dışarıya yalnızca gereken sonucu açmak istiyorsanız fonksiyondan nesne döndürebilirsiniz:

Kod:

const araclar = (function () {
    const gizliDeger = 10;

    return {
        ikiyleCarp(deger) {
            return deger * 2;
        },
        gizliDegeriOku() {
            return gizliDeger;
        }
    };
})();

console.log(araclar.ikiyleCarp(5)); // 10
console.log(araclar.gizliDegeriOku()); // 10

Yeni kodlarda ES modülleri, import/export ve blok kapsamı çoğu durumda daha açık bir organizasyon sağlar. Bu nedenle IIFE’yi her fonksiyonda zorunlu bir kalıp olarak değil, kodun tek seferlik başlatılması veya eski, modülsüz bir çalışma ortamında kapsam yalıtımı gerektiğinde kullanın.

Sık sorulan sorular

Fonksiyonu çağırma parantezini unutmak neye yol açar?

(function () { ... }) yalnızca fonksiyon ifadesini oluşturur; sondaki () yoksa fonksiyon hemen çalışmaz. Çağrının gerçekten yapıldığından emin olun.

IIFE’nin başına neden noktalı virgül konur?

Birleştirilmiş veya küçültülmüş dosyalarda önceki satır noktalı virgülle bitmemişse, JavaScript yeni IIFE’yi önceki ifadeyle birleştirmeye çalışabilir. Bu riski azaltmak için IIFE’yi şu biçimde başlatabilirsiniz: ;(function () { ... })();.

IIFE ile modül arasındaki temel fark nedir?

IIFE yalnızca bir fonksiyon kapsamı ve anlık çalıştırma sağlar; modül ise dosya kapsamı, bağımlılık yönetimi ve açık içe/dışa aktarma mekanizması sunar. Yeni bir uygulamada tercih, projenin modül desteğine ve kodun nasıl paylaşılacağına göre yapılmalıdır.

JavaScript IIFE nedir?

Mehmet