JavaScript: Apa itu Closure?


1. Closure pada JavaScript

Closure pada JavaScript mengadaptasi konsep matematika yaitu lambda calculus. Di JavaScript sendiri, closure merupakan sebuah fungsi yang dieksekusi oleh fungsi lainnya(nested functions) sehingga fungsi tersebut dapat mengakses/merekam variable didalam lexical scope pada fungsi induk(parent function).

image source:
https://edward-huang.com/tech/javascript/closure/functional-programming/programming/2020/02/13/what-is-really-so-special-about-javascript-closure/


Jadi lebih tepatnya,

Closure adalah kombinasi dari fungsi dan lexical environtment dimana fungsi itu dideklarasikan. 

 

Berikut beberapa poin penting dari sebuah closure yaitu:

  • Closure dibuat ketika ada fungsi yang me-return/mengembalikan nilai fungsi lainnya.
  • Nested functions/child function punya akses ke variabel yang di deklarasikan di luar scope (parent function).

2. Contoh Closure

Sebelum masuk ke contoh closure, berikut gambaran singkat mengenai scope.

 
// global scope
function parentFunction() {
  //local scope untuk fungsi parentFunction
    ....
  //lexical scope untuk fungsi childFunction
  return childFunction() {
    //local scope untuk fungsi childFunction
  }
}
Dari kode diatas kita mengetahui bahwa parentFunction bisa mengakses global scope dan local scope miliknya, tetapi tidak bisa mengakses local scope pada childFunction. Sedangkan childFunction dapat mengakses global scope, local scope miliknya sendiri, local scope pada parentFunction yang juga disebut lexical scope untuk childFunction.

Contoh 1 

function mobil() {
    var merk = "Honda";
    return function() {
        return merk + "Jazz";
    }
}
console.dir(mobil());


Setelah kita mengetahui gambaran singkat mengenai scope, mari kita lihat contoh 1 untuk closure diatas. Ketika kode dijalankan fungsi mobil() seketika itu argumennya di destroy dari memory(variabel merk pada kode diatas). Dan variable merk sekarang berisi function definition hasil return dari fungsi mobil().

Jadi closure kali ini adalah variabel merk dari fungsi mobil().

Contoh 2 

function mobil(merk) {
    var tahun = "2002";
    return function(type) {
        return merk +" "+type+" "+tahun;
    }
}

var sedan = mobil("Honda");
var minivan = mobil("Mitsubisi");
sedan("Civic"); //mencetak "Honda Civic 2002"
minivan("Pajero"); //mencetak "Mitsubisi Mobilio 2002"
console.dir(sedan);


Ketika kita jalankan kode contoh 2 diatas, dengan closure kita bisa memodifikasi nilai pada fungsi yaitu variabel merk dan type. Jika kita lihat hasil dari console untuk direktori fungsi pemanggil sedan, maka closurenya adalah merk dan tahun(lexical scope dari child function/local scope dari fungsi mobil).

3. Kegunaan Closure

  • Membuat sebuah fungsi yang dinamis, kita bisa menyusun komposisi fungsi serta kode dapat digunakan berulang kali(reusable).
  • Sebagai encapsulasi data, closure berguna untuk men-create variabel privat dan fungsi privat. Dengan begitu closure dapat menyimpan data dalam lingkup terpisah, dan memanggil/menggunakannya hanya jika diperlukan.

Sekian ulasan singkat mengenai closure, semoga membantu teman-teman pembaca untuk memahami apa itu closure pada JavaScript. Jika pembaca baru belajar tentang JavaScript, sebaiknya sebelum memahami closure pembaca sudah paham mengenai mekanisme fungsi di JavaScript, untuk lebih lengkapnya silahkan kunjungi dokumentasi maupun link sumber dibawah ini.

Source: