Penjelasan JavaScript Closures

Anda menggunakan closure setiap hari dalam JavaScript. Anda berkemungkinan menggunakannya dalam React hooks, event listeners, dan callback Node.js. Ramai pembangun bergelut dengan teorinya, tetapi konsepnya mudah sebaik sahaja anda melihat coraknya.

Untuk memahami closure, anda mesti memahami lexical scope.

Lexical scope bermaksud sesebuah fungsi boleh mengakses pemboleh ubah daripada skopnya sendiri dan mana-mana skop luar di mana ia ditakrifkan. Ia bergantung pada di mana anda menulis kod tersebut, bukan di mana anda memanggilnya.

Closure ialah sebuah fungsi yang mengingati pemboleh ubah daripada skop asalnya walaupun selepas skop tersebut selesai dijalankan.

Bayangkan sesebuah fungsi seperti membawa sebuah beg galas. Apabila fungsi itu dicipta, ia memasukkan setiap pemboleh ubah yang diperlukan daripada persekitarannya ke dalam beg galas tersebut. Fungsi itu membawa beg galas tersebut ke mana sahaja ia pergi.

Berikut adalah cara closure berfungsi dalam praktis:

  • Pemboleh Ubah Peribadi (Private Variables): Anda boleh menyembunyikan data daripada dunia luar. Dalam contoh akaun bank, pemboleh ubah baki (balance) kekal peribadi. Anda hanya boleh mengubahnya melalui kaedah khusus seperti deposit atau pengeluaran (withdraw). Ini menghalang akses terus kepada data sensitif.

  • Kilang Fungsi (Function Factories): Anda boleh mencipta fungsi yang menghasilkan fungsi lain. Sebuah kilang pendarab (multiplier factory) boleh mencipta fungsi ganda dua atau ganda tiga. Setiap fungsi baharu menyimpan pendarab spesifiknya sendiri di dalam beg galasnya.

  • Event Listeners: Apabila anda menyertakan acara klik (click event) pada butang, pengendali (handler) akan mengingati data daripada fungsi tetapan (setup function). Walaupun selepas fungsi tetapan selesai, pendengar (listener) tersebut tetap memegang data itu.

  • React Hooks: Setiap kali anda menggunakan useState atau useEffect, anda menggunakan closure. Pepijat (bug) biasa dalam React berlaku apabila closure menangkap nilai state yang lama. Ini dipanggil stale closure.

Berhati-hati dengan penggunaan memori. Oleh kerana closure memegang rujukan langsung (live reference) kepada pemboleh ubah, enjin tidak dapat membersihkannya melalui pengumpulan sampah (garbage collection) selagi closure itu wujud. Elakkan menyimpan objek yang besar di dalam closure jika anda tidak memerlukannya untuk jangka masa yang lama.

Ringkasan:

  • Lexical scope menentukan akses.
  • Closure menjadikan akses tersebut kekal.
  • Sesebuah fungsi membawa persekitarannya di dalam beg galas.
  • Gunakan let dan bukannya var dalam gelung (loops) untuk mengelakkan pepijat skop.

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