Bir işlev ifadesidir, Hemen Çağırılmış İşlev İfadesi (IIFE) anlamına gelir. IIFE, oluşturulduktan hemen sonra yürütülen bir işlevdir. Bu nedenle, çalıştırılmaya çağrılıncaya kadar beklemek zorunda olan fonksiyondan yola çıkarak IIFE hemen yürütülür. Örnek olarak IIFE'yi oluşturalım. Diyelim ki iki tamsayı argüman olarak alan ve toplamı döndüren bir add fonksiyonumuz var, add fonksiyonunu IIFE'ye dönüştürelim,
1. Adım: İşlevi tanımlayın
function add (a, b){
return a+b;
}
add(5,5);
Adım 2: Tüm işlev bildirimini parantez içine alarak işlevi çağırın
(function add (a, b){
return a+b;
})
//add(5,5);
Adım 3: İşlevi hemen faturalandırmak için 'ekle' metnini aramadan kaldırın.
(function add (a, b){
return a+b;
})(5,5);
Bir IFFE kullanmanın temel nedeni , işleviniz içindeki özel bir kapsamı korumaktır. Javascript kodunuzun içinde, herhangi bir genel değişkeni geçersiz kılmadığınızdan emin olmak istiyorsunuz. Bazen yanlışlıkla bir global değişkeni geçersiz kılan bir değişken tanımlayabilirsiniz. Örnek olarak deneyelim. iffe.html adında bir html dosyanız olduğunu ve gövde etiketinin içindeki kodların
<body>
<div id = 'demo'></div>
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
</body>
Yukarıdaki kod herhangi bir soru olmadan yürütülür, şimdi yanlışlıkla veya kasıtlı olarak belge adlı bir değişkeni iptal ettiğinizi varsayalım.
<body>
<div id = 'demo'></div>
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
const document = "hi there";
console.log(document);
</script>
</body>
Bir de endup edecek SyntaxError : yapılandırılamayan küresel mülkiyet belgesinin yeniden bildirilmiş.
Ama eğer isteğiniz değişken bir isim belgesini köreltmekse IFFE'yi kullanarak yapabilirsiniz.
<body>
<div id = 'demo'></div>
<script>
(function(){
const document = "hi there";
this.document.getElementById("demo").innerHTML = "Hello JavaScript!";
console.log(document);
})();
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
</body>
Çıktı:
Başka bir örnekle deneyelim, körük gibi bir hesap makinesi nesnemiz olduğunu varsayalım.
<body>
<script>
var calculator = {
add:function(a,b){
return a+b;
},
mul:function(a,b){
return a*b;
}
}
console.log(calculator.add(5,10));
</script>
</body>
Peki bir cazibe gibi çalışıyor, ya yanlışlıkla hesap makinesi nesnesinin değerini yeniden atarsak.
<body>
<script>
var calculator = {
add:function(a,b){
return a+b;
},
mul:function(a,b){
return a*b;
}
}
console.log(calculator.add(5,10));
calculator = "scientific calculator";
console.log(calculator.mul(5,5));
</script>
</body>
evet bir TypeError ile bitireceksiniz: calculator.mul iffe.html bir işlev değildir
Ancak IFFE'nin yardımıyla başka bir değişken adı hesaplayıcısı oluşturabileceğimiz ve kullanabileceğimiz özel bir kapsam oluşturabiliriz;
<body>
<script>
var calculator = {
add:function(a,b){
return a+b;
},
mul:function(a,b){
return a*b;
}
}
var cal = (function(){
var calculator = {
sub:function(a,b){
return a-b;
},
div:function(a,b){
return a/b;
}
}
console.log(this.calculator.mul(5,10));
console.log(calculator.sub(10,5));
return calculator;
})();
console.log(calculator.add(5,10));
console.log(cal.div(10,5));
</script>
</body>
Çıktı:
