Closure dalam JavaScript: Konsep, Fungsi, dan Contoh Sederhana

Apa Itu Closure?

Closure adalah kombinasi dari sebuah fungsi dan lingkungan leksikal (lexical environment) tempat fungsi tersebut didefinisikan. Dengan kata lain, closure memberi kemampuan pada sebuah fungsi untuk “mengingat” variabel dari scope luar meskipun fungsi itu dijalankan di luar scope aslinya.

Mari lihat contoh sederhana:

Pada kode di atas, greeting mengembalikan fungsi anonim. Fungsi anonim ini masih bisa mengakses variabel name dari scope greeting, meskipun greeting sudah selesai dieksekusi. Itulah closure: fungsi yang membawa serta lingkungan tempat ia dibuat.

Closure bekerja berdasarkan lexical scope, yaitu aturan bahwa fungsi bisa mengakses variabel dari scope di mana ia didefinisikan, bukan dari scope di mana ia dipanggil.

Baca juga: Zero Trust Architecture: Masa Depan Keamanan Siber Perusahaan

Mengapa Closure Penting?

Closure bukan sekadar konsep rumit yang ada di buku teks, tapi benar-benar berguna dalam pengembangan sehari-hari. Beberapa manfaat pentingnya:

a. Menjaga Data agar Tetap Privat

Dalam JavaScript, semua variabel global bisa diakses dari mana saja, yang kadang berisiko mengubah data tanpa sengaja. Closure bisa membantu membuat data tetap privat.

Variabel count hanya bisa diakses lewat fungsi increment dan decrement. Dari luar, kita tidak bisa langsung mengubah count. Ini membuat data lebih aman.

b. Membuat Fungsi Fleksibel dan Reusable

Closure memungkinkan kita membuat fungsi factory yang dapat menghasilkan fungsi lain sesuai kebutuhan.

Dengan closure, kita tidak perlu menulis fungsi double dan triple secara terpisah. Cukup sekali, lalu buat sesuai parameter.

c. Membantu dalam Event Handling

Closure sangat berguna dalam event listener, karena memungkinkan kita menyimpan data tertentu agar tetap tersedia saat event dipicu.

Meskipun fungsi event listener dijalankan saat tombol diklik, ia tetap bisa mengakses message berkat closure.

Cara Kerja Closure

Untuk memahami cara kerja closure, kita perlu mengerti tentang scope dan lexical environment dalam JavaScript.

• Global Scope → variabel yang bisa diakses dari mana saja.
• Function Scope → variabel hanya bisa diakses dalam fungsi tempat ia dibuat.
• Block Scope (ES6) → variabel let dan const hanya bisa diakses di dalam blok {}.

Ketika sebuah fungsi didefinisikan, JavaScript menyimpan referensi ke scope di sekitarnya. Itulah yang disebut lexical environment. Closure terbentuk saat fungsi “membawa” lexical environment itu meski dieksekusi di luar scope aslinya.

Contoh mekanismenya:

Di sini, inner adalah closure. Ia “mengingat” outerVar dari outer, meskipun outer sudah selesai dieksekusi.

Closure juga bisa menyimpan banyak variabel sekaligus:

Variabel name dan age tetap tersimpan dalam closure.

Contoh Sederhana Closure dalam JavaScript

Mari kita lihat beberapa contoh praktis closure.

a. Fungsi dalam Fungsi

Closure paling sederhana terlihat saat kita membuat fungsi dalam fungsi.

b. Counter Menggunakan Closure

Closure bisa dipakai membuat counter sederhana.

Masing-masing counter menyimpan state-nya sendiri:

c. Data Privat

Closure bisa dipakai untuk membuat variabel privat, mirip konsep private di OOP.

Dengan closure, variabel secret aman dari akses langsung.

Kapan Menggunakan Closure?

Closure sangat berguna dalam banyak situasi nyata. Berikut beberapa contohnya:

a. Membuat Function Factory

Function factory adalah fungsi yang menghasilkan fungsi lain. Closure memungkinkan tiap fungsi memiliki data khususnya sendiri.

b. Membuat Modul Sederhana

Sebelum adanya ES6 module, developer sering menggunakan closure untuk membuat modul privat.

c. Event Listener

Closure membuat event listener lebih fleksibel karena bisa menyimpan variabel spesifik.

Setiap listener “mengingat” nilai i saat dibuat.

d. Asynchronous Code

Closure juga banyak digunakan pada asynchronous code seperti setTimeout atau fetch.

Fungsi callback di dalam setTimeout tetap bisa mengakses msg meski fungsi delayedMessage sudah selesai.

Baca juga: Peran DevOps dalam Meningkatkan Keamanan Aplikasi

Kesimpulan

Closure adalah konsep penting dalam JavaScript yang memungkinkan fungsi mengakses variabel dari scope luar meskipun scope tersebut sudah selesai dieksekusi. Dengan memahami closure, developer dapat menjaga data tetap privat, membuat fungsi lebih fleksibel, hingga membangun modul sederhana. Closure sering digunakan dalam event handling, function factory, hingga asynchronous code. Bagi pemula, closure mungkin terasa rumit, tetapi dengan banyak latihan dan mencoba berbagai contoh, pemahaman akan semakin kuat dan kemampuan menulis kode JavaScript pun meningkat signifikan.