Latihan 1: Event Listener & Closure Leaks — Debugging
Latihan 1 dari materi Event Listener & Closure Leaks di Debugging — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.
Bangun createEmitter(): event emitter kecil yang menghitung listener per nama event dan bisa melaporkan event yang listener-nya menumpuk.
createEmitter() mengembalikan object dengan empat method:
on(event, handler): simpan handler di daftar milik event, lalu kembalikan function unsubscribe. Saat dipanggil, unsubscribe membuang handler itu saja dari daftarnya.
emit(event, payload): panggil semua handler milik event dengan payload, lalu kembalikan jumlah handler yang dipanggil. Event tanpa listener mengembalikan 0.
count(event): kembalikan jumlah listener aktif untuk event. Event yang belum pernah didaftarkan hasilnya 0.
leakReport(threshold): kembalikan array nama event yang listener-nya threshold atau lebih.
Kode pemanggil di bawah function sudah ada di kode awal, biarkan saja. Yang dinilai delapan baris console-nya, berurutan:
2
1
0
2
1
16
1
scroll
Ada juga cek tambahan: dua on("a"), unsubscribe yang pertama, lalu empat on("b") harus menghasilkan count("a") 1, count("b") 4, dan leakReport(3) berisi ["b"].
Hint
Simpan listener per nama event: sebuah object yang key-nya nama event dan isinya array handler. Tiap method cukup membaca atau mengubah array milik event itu.
on() melakukan push lalu mengembalikan function yang memakai filter untuk membuang handler yang sama persis. count() dan emit() memakai listeners[event] || [] supaya event kosong aman. leakReport() memakai Object.keys lalu filter berdasarkan panjang array.