Memakai Closure Di JavaScript


Belakangan ini, saya kerap terlibat pada pengembangan front-end dan mau tidak mau saya harus berhadapan dengan JavaScript.  Walaupun namanya mirip-mirip Java, tapi fiturnya jelas berbeda.  Salah satunya adalah JavaScript memiliki apa yang disebut sebagai closure.   Awalnya, sangat sulit bagi saya untuk mengerti apa itu closure dan bagaimana penerapannya.  Sejuta kata-kata yang saya temui serasa tidak bisa dicerna.  Tapi beruntung, sebuah kasus dalam development membuat saya memahami closure dan penerapannya.

Saya memiliki HTML + jQuery sederhana yang beri 4 tombol (<button>) seperti berikut ini:

<html>
  <head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
  <script>
     $(document).ready(function(){
       $("#tombolA").click(function(){alert("Solid");});
       $("#tombolB").click(function(){alert("Solid");});
       $("#tombolC").click(function(){alert("Snake");});
       $("#tombolD").click(function(){alert("Snake");});
     });
  </script>
  </head>
  <body>
    <button id="tombolA">Tombol A</button>
    <button id="tombolB">Tombol B</button>
    <button id="tombolC">Tombol C</button>
    <button id="tombolD">Tombol D</button>
  </body>
</html>

Tombol A dan Tombol B bila ditekan akan memunculkan pesan “Solid”.  Sementara itu, Tombol C dan Tombol D bila ditekan akan memunculkan pesan “Snake”.  Jika dilihat-lihat, saya membuat 4 function berbeda untuk itu!  Ini berarti jika saya mau mengganti pesan “Solid” menjadi “Liquid”, saya harus mengubah 2 function yg berbeda…  Kurang efisien, bukan?

Saya menginginkan hanya 1 function yang bisa dipakai oleh keempatnya.  Dan function ini harus memiliki parameter untuk menampung nilai seperti “Solid”, “Snake”, dan sebagainya.  Kira-kira saya ingin seperti begini:

function buatPesan(pesan) {
  alert(pesan);
}
$(document).ready(function(){
  $("#tombolA,#tombolB").click(buatPesan("Solid"));  // KODE PROGRAM INI MASIH SALAH
  $("#tombolC,#tombolD").click(buatPesan("Snake"));  // KODE PROGRAM INI MASIH SALAH
});

Tapi sayangnya kode program di atas masih salah.  Saya tidak bisa memanggil sebuah function begitu saja di click(), tapi saya harus mengembalikan sebuah function (dalam bentuk nama function).

Beruntungnya, JavaScript mendukung inner function (function di dalam function).  Jika saya mengembalikan sebuah inner function, maka telah terjadi closure, dimana variabel yang ada di outer function (function diluarnya) akan tetapi di-ingat!  Jadi, saya bisa membuat kode program seperti berikut ini:

function buatPesan(pesan) {
  function f() {
    alert(pesan);
  }
  return f;
}
$(document).ready(function(){
  $("#tombolA,#tombolB").click(buatPesan("Solid"));
  $("#tombolC,#tombolD").click(buatPesan("Snake"));
});

Pada kode program di atas, sebuah fungsi yang sama dapat dipakai ulang untuk setiap tombol yang ada.  Dan saya tidak membutuhkan variabel global dan sebagainya, karena dengan closure, nilai parameter yang diberikan akan tetap diingat oleh JavaScript.

Perihal Solid Snake
I'm nothing...

4 Responses to Memakai Closure Di JavaScript

  1. Ping-balik: Anonymous Function Di PHP « The Solid Snake

  2. benhard mengatakan:

    saya juga masih bingung dengan closure ini, di php udah diterapkan juga, tapi belum paham kapan harus dipakai, contoh diatas kenapa tidak langsung return alert() saja?

    • Solid Snake mengatakan:

      Closure juga ada di .NET, Groovy, dan Java 8 nanti.. Pada contoh di atas, method jQuery.click() mengharapkan sebuah nilai parameter yang berupa function. Bila saya mengganti return f yang mengembalikan sebuah function dengan return window.alert() yang segera menampilkan kotak dialog pada saat itu juga dan tidak mengembalikan nilai (void), maka pada saat tombol di-klik, tidak akan terjadi apa-apa.

    • Solid Snake mengatakan:

      Pada contoh kode program, saya mendeklarasikan function f() agar terlihat cara kerja closure dimana inner function f() tetap mengingat nilai variabel pesan; bahkan saat ia dikerjakan oleh jQuery.click().

      Versi yang lebih singkat adalah dengan memakai anonymous function seperti berikut ini:

      function buatPesan(pesan) {
        return function() {
          alert(pesan);
        }
      }
      $(document).ready(function(){
        $("#tombolA,#tombolB").click(buatPesan("Solid"));
        $("#tombolC,#tombolD").click(buatPesan("Snake"));
      });
      

      Untuk menunjukkan contoh penggunaan, bayangkan function buatPesan() adalah kode program yang rumit seperti cetakLaporan(). Ada beberapa jenis laporan yang harus ditampilkan sesuai dengan tombol yang di-click. Mereka tidak berbeda jauh. Tanpa closure, saya harus membuat cetakLaporanA(), cetakLaporanB(), dan seterusnya yang dipanggil oleh jQuery.click(). Dengan closure, saya bisa melewatkan cetakLaporan('A'), cetakLaporan('B'), dsb ke jQuery.click().

Apa komentar Anda?

Please log in using one of these methods to post your comment:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: