Cara menggunakan does javascript support iife?

Apa Itu IIFE ?

Awal Saya berkenalan dengan kata IFFE, itu pun disebabkan munculnya rasa kepo setelah mengutak-atik algoritma milik jQuery. Banyak sekali hal baru yang Saya temui, terutama cara memanggil funsi yang tidak biasa (well aneh). “Kok bisa gini? Kok gak error ya?”, pertanyaan pertanyaan itu kemudian muncul. Berbekal keingintahuan yang teramat sangat, kemudian Saya mencari-cari tau. Tentunya dengan bantuan si “Mbah Google” yang serba tau dan whoilaa, Saya dipertemukan dengan IIFE. Well, secara teknis, ke-kepoan Saya kali ini pun berujung “Indah”.

Saat mencari artikel tentang IIFE, tentunya Kamu akan menemukan beragam definisi tentangnya. Mulai dari yang sederhana sampai yang ribet, intinya semua sama. So, apa itu IIFE?

(Versi Saya) IIFE merupakan cara pemanggilan fungsi di Javascript tanpa mendefinisikan fungsi itu sebelumnya.
Atau dapat juga diartikan: “Fungsi yang memanggil dirinya sendiri”. Mm, mulai pusing? hhe. Nah daripada pusing, yuk simak contoh IIFE berikut ini.

Picture 1 : Contoh IIFE

Kegunaan IIFE

IIFE biasa digunakan untuk mengamankan variable di dalamnya sehingga menjadi private. Mengapa bisa? Kalau kalian familiar dengan pemrograman khususnya javascript, kalian tau bahwa setiap variable yang didefinisikan di dalam scope “{}” hanya dapat diakses dari dalam. Misal:

function example(){
  var a = 'Hi, Im a!'
  document.write(a)
}

example()

Hasilnya: Hi, Im a!

function example(){
  var a = 'Hi, Im a!'
}

example()
document.write(a)

Hasilnya: undefined

Membuat Framework dengan IIFE

IFEE biasa digunakan oleh framework seperti jQuery, Bootstrap, dll. So, let’s try it out!

1. Langkah pertama buatlah IIFE scope terlebih dahulu

(function(){ /*your code goes here*/ }())

2. Definisikan w sebagai parameter, dan masukkan window sebagai Argument. Nantinya “window” akan dikenal di dalam scope sebagai “w”.

(function(w){
  /*your code goes here*/ 
}(window))

3. Definisikan sebuah variable sebagai object yang nantinya akan menjadi nama framework-mu.

(function(w){

  var framework = {} 

}(window))

4. Definisikan method di dalamnya.

(function(w){
  
  var framework = {}

  framework.version = '1.0.0'
  framework.build_date = '20 Juni 2015'
  framework.programmer = 'Mias Marthinus'

  framework.detail = function(){
    alert( 
      framework.version + 
      ' - ' +
      framework.build_date +
      ' - ' +
      framework.programmer 
    )
  }

  /*add another method here*/

}(window))

5. Terakhir masukkan framework ke dalam window.

(function(w){
  
  var framework = {}

  framework.version = '1.0.0'
  framework.build_date = '20 Juni 2015'
  framework.programmer = 'Mias Marthinus'

  framework.detail = function(){
    alert( 
      framework.version + 
      ' - ' +
      framework.build_date +
      ' - ' +
      framework.programmer 
    )
  }

  /*add another method here*/
  
  w.framework = framework
}(window))

6. Whoilaa, framework milikmu sendiri sudah selesai dan dapat dipanggil kapanpun.

framework.detail()