JavaScript’te “IIFE” Nedir?
Malumunuz JavaScript, günümüzün en popüler programlama dillerinden biri olup web uygulamaları geliştirmede oldukça sık kullanılmaktadır. JavaScript, diğer dillerde kullanılan özelliklere sahip olduğu gibi “IIFE” gibi nevi şahsına münhasır özellikleri de barındırmaktadır. “Peki bu IIFE denen şey de nedir?” diye soracak olursanız, cevap olarak; Immediately Invoked Function Expression olarak adlandırılan bir fonksiyon tanımlama tekniğidir diyebiliriz ve adlandırmasını da kelimelerin baş harflerinden almışıtır.
Bu yazımızda, IIFE’nin ne olduğunu, nasıl kullanıldığını ve neden önemli olduğunu daha detaylı bir şekilde ele alacağız.
“IIFE” Nedir?
Türkçe karşılığı olarak “Anında Çağrılan Fonksiyon İfadesi” veya “Anında Çağrılan Fonksiyon” şeklinde kullanabileceğimiz “Immediately Invoked Function Expression”, bir fonksiyonun tanımlanması ve hemen ardından çağrılmasıdır.
“Peki, IIFE ne işimize yarıyor, bizim için önemli mi?” diye soracak olursanız bu özellik için, kodun daha önceden bir kapsayıcıya ihtiyaç duymadan çalışmasını sağlar ve içindeki değişkenlerin ve fonksiyonların “global” ad alanıyla çakışmasını önler.
IIFE çağrısı için aşağıdaki iki yöntemden biri ile sağlanır:
|
1 2 3 4 5 6 7 8 9 |
// IIFE Yönem 1 (function () { // kod bloğu })(); // IIFE Yönem 2 (function () { // kod bloğu }()); |
Yukarıda gösterilen kod bloğu, fonksiyonun tanımlanmasını ve ardından hemen çağrılmasını içerir. Bu tarz fonksiyonlar çağrı operatörleri ( ) kullanır. Zaten fark ettiyseniz bu yapının, parantezler ( ) içine giydirilmiş anonim fonksiyonlar olduğu görülecektir.
IIFE’nin alametifarikası ise içinde tanımlanan değişkenlerin dış dünya tarafından erişilmesini engellemesidir. Haliyle global değişkenlerle bir çakışma yaşamadığından değişken bildirimlerini izole etmek için oldukça pratik bir kullanım sağlar. Böylece, değişken çakışması riski ortadan kalkar ve programın işleyişi daha öngörülebilir ve güvenli hale gelir.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
var message = "Merhaba dünya! (Global)"; (function() { var message = "Merhaba dünya! (IIFE)"; console.log(message); })(); console.log(message); // Bir başka kullanım var result = (function() { var x = 10; var y = 5; return x + y; })(); console.log(result); // 15 |
❗ Argümanlar, IIFE’nin içindeki kodun kullanabileceği değerler sağlamak için kullanılabilir. Örneğin:
|
1 2 3 |
(function(firstName, lastName) { console.log("Merhaba, " + firstName + " " + lastName); })("John", "Doe"); |
❗ IIFE’ler arrow fonksiyonlarıyla da kullanılabilir. Aşağıdaki örnek, “arrow” fonksiyonlarının “IIFE” içinde nasıl kullanılabileceğini göstermektedir:
|
1 2 3 4 5 6 7 8 9 10 |
// IIFE & function (function(name) { console.log('Merhaba, ' + name + '!'); })('John'); // IIFE & arrow function ((name) => { console.log(`Merhaba, ${name}!`); })('John'); |
❗ Her ne kadar IIFE’lere isim verilebilse de bu tür bir kullanım genellikle gereksizdir ve IIFE’nin ana amacı olan “kapsamı koruma” ve “örtülü kapsam” yaratma özelliklerinin çoğunu ortadan kaldırabilir. Bakınız:
|
1 2 3 4 5 |
var myIIFE = (function() { // Fonksiyon içeriği burada yer alır })(); myIIFE(); // IIFE çağrılıyor |
❗ Birden fazla JavaScript dosyasını birleştirirken eğer önceki dosyanın son satırında noktalı virgül yoksa, sonraki dosyanın ilk satırıyla birleştirildiğinde sentaks hatası oluşabilir. Bu yüzden böylesi durumlarda noktalı virgül ; ile başlayan “IIFE” kullanımları vardır:
|
1 2 3 |
;(function() { console.log('Merhaba, dünya!'); })(); |
❗ ❗ JavaScript’te IIFE’ler scope ile alakalı olduğu için scope kavramını iyi bilmek hayati bir öneme sahiptir. Bunun nasıl bir öneme sahip olduğunu aşağıdaki örnek üzerinden inceleyebilirsiniz:
|
1 2 3 4 5 6 7 8 9 10 |
// IIFE (function() { var x = y = 200; })(); console.log('y: ', y); console.log('x: ', x); "y: " 200 Uncaught ReferenceError: x is not defined |
Yukarıdaki örneğimizde x, fonksiyonun kapsama alanında var anahtar kelimesi kullanılarak tanımlanmıştır. Ancak y değişkeni için var, let veya const anahtar kelimelerinden biri kullanılmamıştır, bu da onun otomatik olarak global kapsama atanmasına neden olmuştur.
Haliyle y‘nin global kapsama alanında tanımlanmış olur ve 200 yazdırılacaktır. Ancak x, IIFE içinde var anahtar kelimesi kullanılarak tanımlanmıştır ve yalnızca o fonksiyonun kapsama alanında mevcuttur. Bu yüzden x‘in değeri global kapsamda tanımlı değildir ve x is not defined hatası alınır.
Bu durumu anlamak, JavaScript’te değişken kapsama alanlarını (scope) ve var, let, const anahtar kelimelerinin nasıl çalıştığını anlamak için önemlidir. JavaScript’te var anahtar kelimesi, değişkenin tanımlandığı en yakın fonksiyon kapsamını oluştururken, let ve const anahtar kelimeleri blok kapsamı oluşturur ve değişkenin tanımlandığı blok içinde kalır.
Yukarıda da gösterdiğimiz nedenlerden ötürü IIFE’ler, kodun modülerleştirilmesi ve işlevselliklerin izole edilmesi için JavaScript uygulamalarında sıklıkla kullanılmaktadır. Örneğin, IIFE içinde tanımlanan bir değişken, sadece IIFE’nin içindeki kodda kullanılabilir ve global ad alanını kirletmezler. Bu nedenle, IIFE’ler, JavaScript projelerinde sıkça kullanılan bir tasarım deseni olarak karşımıza çıkar.