𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗖𝗹𝗼𝘀𝘂𝗿𝗲𝘀 𝗘𝘅𝗽𝗹𝗮𝗶𝗻𝗲𝗱

Anda menggunakan closure setiap hari di JavaScript. Anda kemungkinan besar menggunakannya dalam React hooks, event listeners, dan callback Node.js. Banyak pengembang kesulitan dengan teorinya, tetapi konsepnya sederhana setelah Anda melihat polanya.

Untuk memahami closure, Anda harus memahami lexical scope.

Lexical scope berarti sebuah fungsi dapat mengakses variabel dari scope miliknya sendiri dan scope luar mana pun tempat fungsi tersebut didefinisikan. Ini bergantung pada di mana Anda menulis kode tersebut, bukan di mana Anda memanggilnya.

Closure adalah sebuah fungsi yang mengingat variabel dari scope asalnya bahkan setelah scope tersebut selesai dijalankan.

Bayangkan sebuah fungsi seperti membawa sebuah ransel. Saat fungsi dibuat, ia memasukkan setiap variabel yang dibutuhkannya dari lingkungannya ke dalam ransel tersebut. Fungsi tersebut membawa ransel itu ke mana pun ia pergi.

Berikut adalah cara kerja closure dalam praktiknya:

  • Variabel Privat: Anda dapat menyembunyikan data dari dunia luar. Dalam contoh rekening bank, variabel saldo tetap bersifat privat. Anda hanya dapat mengubahnya melalui metode tertentu seperti deposit atau withdraw. Hal ini mencegah akses langsung ke data sensitif.

  • Function Factories: Anda dapat membuat fungsi yang menghasilkan fungsi lain. Sebuah multiplier factory dapat membuat fungsi double atau fungsi triple. Setiap fungsi baru menyimpan pengali spesifiknya sendiri di dalam ranselnya.

  • Event Listeners: Saat Anda memasang event click pada sebuah tombol, handler akan mengingat data dari fungsi setup. Bahkan setelah fungsi setup selesai, listener tersebut tetap menyimpan data tersebut.

  • React Hooks: Setiap kali Anda menggunakan useState atau useEffect, Anda menggunakan closure. Bug umum di React terjadi ketika sebuah closure menangkap nilai state yang lama. Ini disebut sebagai stale closure.

Perhatikan penggunaan memori. Karena closure memegang referensi aktif ke variabel, engine tidak dapat membersihkannya melalui garbage collection selama closure tersebut ada. Hindari menyimpan objek besar dalam sebuah closure jika Anda tidak membutuhkannya untuk waktu yang lama.

Ringkasan:

  • Lexical scope menentukan akses.
  • Closure membuat akses tersebut bersifat persisten.
  • Sebuah fungsi membawa lingkungannya di dalam sebuah ransel.
  • Gunakan let alih-alih var dalam loop untuk menghindari bug scoping.

Sumber: https://dev.to/digitalunicon/javascript-closures-explained-with-examples-339f