Closure dalam Contoh UI
Memahami closure lewat state kecil seperti counter atau toggle yang diingat oleh function.
Tujuan belajar
- Memahami closure sebagai function yang mengingat outer variable
- Membaca closure dalam pola counter atau toggle
- Menghindari state kecil yang langsung dibuat global
Isi lesson
6 blok- 1.Closure membuat function punya ingatan kecilBelum selesaiWajib
- 2.State tidak selalu harus globalBelum selesaiWajib
- 3.Toggle yang mengingat statusBelum selesaiWajib
- 4.Baca closure dari dua arahBelum selesaiWajib
- 5.Coding practiceBelum selesaiWajib
- 6.RingkasanBelum selesaiWajib
Closure membuat function punya ingatan kecil
WajibSetelah scope, closure jadi lebih mudah dibaca. Closure terjadi ketika sebuah function tetap punya akses ke variable dari scope luarnya, bahkan setelah function luar selesai berjalan.
Di UI, closure sering terasa seperti function yang punya ingatan kecil. Misalnya counter yang mengingat jumlah klik, toggle yang mengingat status terbuka, atau helper yang mengingat konfigurasi tertentu.
Bagian ini memengaruhi progres lesson.
State tidak selalu harus global
WajibUntuk fitur kecil, kamu bisa menyimpan state di dalam function pembuat, lalu mengembalikan function lain yang memakai state itu. Function yang dikembalikan membentuk closure karena masih bisa membaca dan mengubah variable dari scope luarnya.
Pola ini berguna saat kamu ingin state kecil tetap tersembunyi dari kode lain, tetapi tetap bisa dipakai oleh event handler atau function kontrol.
Bagian ini memengaruhi progres lesson.
Toggle yang mengingat status
Wajibfunction createToggle(initialValue) {
let isOpen = initialValue;
return function toggle() {
isOpen = !isOpen;
return isOpen;
};
}
const toggleMenu = createToggle(false);
console.log(toggleMenu()); // true
console.log(toggleMenu()); // false
console.log(toggleMenu()); // truecreateToggle selesai berjalan setelah toggleMenu dibuat. Tetapi function toggle yang dikembalikan masih mengingat variable isOpen. Itulah closure.
Bagian ini memengaruhi progres lesson.
Tips
WajibBaca closure dari dua arah
Pertama, cari function luar yang membuat variable. Kedua, cari function dalam yang memakai variable itu. Jika function dalam dikembalikan atau dipakai sebagai callback, kemungkinan besar kamu sedang melihat closure.
Bagian ini memengaruhi progres lesson.
Coding practice
WajibDibuka di workspace khususMembuat counter dengan closure
Latihan membuat function counter yang mengingat nilai count tanpa variable global.
Tujuan awal: Fokus di tab JS.
Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.
Tombol selesai aktif setelah semua validasi wajib lolos.
Ringkasan
Wajib- Closure adalah function yang tetap punya akses ke outer variable.
- Closure terbentuk dari hubungan function dan lexical scope tempat function dibuat.
- Closure berguna untuk state kecil seperti counter, toggle, atau konfigurasi helper.
- Closure bisa mengurangi kebutuhan global variable.
- Berikutnya, kamu akan melihat cara memecah file JavaScript dengan ES modules.
Bagian ini memengaruhi progres lesson.
Langkah berikutnya
Selesaikan bagian penting lesson ini
Lanjutkan blok wajib berikutnya: Closure membuat function punya ingatan kecil.