Ini adalah ekspresi fungsi, singkatan dari Immediately Invoked Function Expression (IIFE). IIFE hanyalah sebuah fungsi yang dieksekusi segera setelah itu dibuat. Jadi insted dari fungsi harus menunggu sampai dipanggil untuk dieksekusi, IIFE dieksekusi segera. Mari kita membangun IIFE dengan contoh. Misalkan kita memiliki fungsi add yang mengambil dua bilangan bulat sebagai args dan mengembalikan jumlah mari kita buat fungsi add menjadi IIFE,
Langkah 1: Tentukan fungsi
function add (a, b){
return a+b;
}
add(5,5);
Langkah2: Panggil fungsi dengan membungkus seluruh deklarasi fungsi menjadi tanda kurung
(function add (a, b){
return a+b;
})
//add(5,5);
Langkah 3: Untuk membuka fungsi dengan segera, cukup hapus teks 'tambah' dari panggilan.
(function add (a, b){
return a+b;
})(5,5);
Alasan utama untuk menggunakan IFFE adalah untuk mempertahankan ruang lingkup pribadi dalam fungsi Anda. Di dalam kode javascript Anda ingin memastikannya, Anda tidak mengabaikan variabel global apa pun. Terkadang Anda mungkin secara tidak sengaja mendefinisikan variabel yang menimpa variabel global. Mari kita coba dengan contoh. misalkan kita memiliki file html bernama iffe.html dan kode di dalam tag tubuh adalah-
<body>
<div id = 'demo'></div>
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
</body>
Nah, kode di atas akan mengeksekusi tanpa pertanyaan, sekarang asumsikan Anda mendeklarasikan variabel bernama dokumen yang tidak disengaja atau disengaja.
<body>
<div id = 'demo'></div>
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
const document = "hi there";
console.log(document);
</script>
</body>
Anda akan berakhir di SyntaxError : pernyataan ulang dokumen properti global yang tidak dapat dikonfigurasi.
Tetapi jika keinginan Anda adalah untuk mendeklarasikan documet nama variabel, Anda dapat melakukannya dengan menggunakan IFFE.
<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>
Keluaran:
Mari kita coba dengan contoh lain, misalkan kita memiliki objek kalkulator seperti di bawah-
<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>
Yah itu berfungsi seperti pesona, bagaimana jika kita tidak sengaja menetapkan ulang nilai objek kalkulator.
<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>
ya Anda akan berakhir dengan TypeError: calculator.mul bukan fungsi iffe.html
Tetapi dengan bantuan IFFE kita dapat membuat ruang lingkup pribadi di mana kita dapat membuat kalkulator nama variabel lain dan menggunakannya;
<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>
Keluaran:
