Apakah kamu pernah menemukan IIFE ketika belajar JavaScript atau melihat source code developer lain?

IIFE atau Immediately Invoked Function Expression adalah sebuah design pattern pada JavaScript yang bisa digunakan oleh developer sebagai salah satu cara agar kode menjadi lebih efisien.

Apa itu IIFE?

Arti IIFE atau Immediately Invoked Function Expression secara harfiah adalah ekspresi fungsi yang dipanggil secara langsung. Sesuai nama dan artinya, fungsi ini langsung dijalankan  sesaat setelah fungsi ini dibuat.

Gambar di atas adalah 2 contoh dari pembuatan IIFE. Untuk membuat sebuah IIFE, kita memerlukan 2 hal berikut.

1. Sebuah fungsi yang dikelompokkan dengan Grouping Operator atau simbol “(  )” sehingga fungsi tersebut menjadi Function Expressions. Hal ini juga mencegah adanya variabel yang terubah pada scope global.
2. Simbol “()” tambahan di akhir definisi fungsi atau di akhir simbol “)” untuk memberi sinyal kepada JavaScript agar fungsi yang telah dibuat pada nomor 1 segera dieksekusi. 

Selain dieksekusi segera setelah fungsi dibuat, IIFE memiliki sifat enkapsulasi. Artinya, apa pun yang terjadi di dalam IIFE, tidak akan bisa diakses dari luar fungsi. Hal ini membuat IIFE menjadi sangat andal apabila ingin digunakan pada studi kasus yang berhubungan dengan kredensial penting.

Keuntungan Penggunaan IIFE

Ketika kita ingin menjalankan sebuah subproses sebelum semua proses dijalankan, IIFE merupakan pilihan tepat untuk digunakan karena sifatnya yang immediately executed atau dieksekusi segera setelah fungsi dibuat. 

Selain sifatnya yang immediately executed, IIFE juga menyediakan sebuah ruang private dan langsung menghapus variabel yang sudah digunakan di dalam fungsi sehingga data kita terjaga dan tidak mencemari scope global dengan variabel yang tidak digunakan 

Kapan IIFE Digunakan?

Berikut beberapa kondisi ketika IIFE bisa digunakan.

• Pada sebuah aplikasi yang berbentuk modul-modul, IIFE memiliki fungsi untuk mengenkapsulasi isi dari modul tersebut. Kenapa? Hal ini mencegah terjadinya konflik dan galat antar modul yang dipanggil.
• Pada fungsi yang berinteraksi dengan kredensial penting seperti password bisa diakses secara bebas diluar kebutuhan lainnya. Penggunaan IIFE di sini dapat membatasi akses data dari luar scope sehingga variabel yang digunakan di dalam fungsi IIFE tidak dapat diakses.
• Proses inisialisasi aplikasi dapat dijalankan lebih mudah menggunakan IIFE seperti melakukan proses import, perhitungan awal, melakukan inisialisasi variabel, dsb.
• Mengeksekusi kode secara asynchronous untuk menciptakan top-level await, terutama bila browser atau JavaScript runtime belum menyediakannya secara default.

Contoh Penerapan IIFE

Gimana temen-temen? Sudah mulai paham dengan IIFE? Nah, di bawah ini adalah beberapa contoh penerapan IIFE yang dapat kamu gunakan untuk membantu proses pembuatan aplikasimu.

• Anonymous IIFE
  Sebuah anonymous IIFE memiliki ciri fungsi di dalamnya tanpa ada nama fungsinya seperti yang ditampilkan di atas. Beberapa kasus yang bisa digunakan bersama anonymous IIFE adalah inisialisasi variabel, inisialisasi impor library, dan hal lain yang tidak membutuhkan penggunaan kembali fungsi tersebut. Kekurangannya adalah fungsi ini sulit ditemukan ketika melakukan debugging.Anonymous IIFE juga dapat diterapkan menggunakan arrow function untuk penulisan yang lebih singkat seperti contoh di bawah ini.
  
• Named IIFE
  Pada named IIFE, sebuah nama dibutuhkan untuk proses definisi fungsi di dalam IIFE. Beberapa kasus yang cocok untuk digunakan bersama IIFE tipe ini yaitu ketika kebutuhan recursive atau memanggil fungsi itu sendiri. Kelebihan IIFE tipe ini adalah mudah diketahui karena nama fungsi tertera di console browser.

• Anonymous IIFE with Parameter
  Sebenarnya, semua IIFE dapat menggunakan parameter untuk membantu kinerja yang lebih maksimal. Contoh dari penggunaan parameter terhadap IIFE bisa dilihat di atas. Biasanya parameter digunakan untuk mengirimkan data dari luar scope IIFE untuk diproses di dalam IIFE

• Recursive IIFE
  Nah, sebelumnya kita sudah mengenal named IIFE, gambar di atas adalah contoh bagaimana named IIFE digunakan untuk recursive.

• Async IIFE
  
  IIFE juga dapat diterapkan pada kebutuhan top-level await. Hal ini tentu memudahkan kita dalam mengembangkan sebuah fungsi pada runtime javascript yang tidak memiliki dukungan terhadap top-level await

• Return Values
  
  Selain dapat digunakan sebagai proses inisialisasi library, IIFE juga dapat digunakan sebagai inisialisasi variabel seperti contoh di atas. Tentunya, bisa dikombinasikan dengan penggunaan parameter.

Nah, sekarang kamu sudah bisa mengenali IIFE atau Immediately Invoked Function Expression. Selanjutnya, kamu harus bisa praktek, ya. Tipe IIFE tadi merupakan poin terakhir sekaligus penutup untuk artikel kali ini. Semoga artikel ini bisa membantumu dalam mengembangkan aplikasi ke depannya. Sampai jumpa di artikel selanjutnya.

Also on Dicoding Blog

Mengenal Parameter pada Bidang Pemrograman

7 Skill untuk Menjadi Data Analyst Biar Karier Kamu Makin Oke!

Supervised vs Unsupervised Learning: Mana yang Paling Cocok untuk Data Kamu?

Unit Testing: Apa Itu dan Mengapa Kita Memerlukannya?

Respon Developer Terhadap Dinamika Tren Artificial Intelligence