Boneka Matryoshka: Belajar rekursi JavaScript lewat boneka bersarang

Cara bermain Boneka Matryoshka

1. Baca instruksi level. Nama dan parameter fungsinya sudah tertulis di atas editor, kamu cukup mengisi badannya.
2. Ubah kode di editor. Kodemu langsung dijalankan dengan beberapa kasus uji, dan arena memutar tumpukan panggilan kasus yang dipilih sekali, dari panggilan pertama sampai nilai terakhir kembali.
3. Klik kasus lain di atas arena untuk melihat jejak panggilannya. Kasus bertanda ✗ adalah yang belum sesuai. Tombol Lewati animasi langsung menampilkan keadaan akhirnya.
4. Tekan Cek jawaban atau Ctrl + Enter. Semua kasus harus kembali dengan nilai yang benar, dan fungsimu harus benar-benar memanggil dirinya sendiri.
5. Rekursi yang tidak berhenti dihentikan dengan aman setelah 500 lapis, jadi tab tidak macet.
6. Kalau buntu, buka Petunjuk. Level yang sudah selesai tetap tercentang di browser yang sama.

Yang kamu pelajari

1. Level 1

   Kasus dasar

   Kondisi yang langsung mengembalikan jawaban tanpa memanggil lagi, misalnya boneka yang isi-nya null.

2. Level 2

   Nilai yang dibawa kembali

   Tiap lapis memakai nilai dari panggilan di dalamnya, lalu menambahkan bagiannya sendiri sebelum return.

3. Level 3

   Stack overflow

   Tanpa kasus dasar, panggilan menumpuk terus sampai call stack habis dan JavaScript melempar RangeError.

4. Level 4

   Langkah yang mengecil

   Argumen tiap panggilan harus lebih dekat ke kasus dasar, misalnya n - 1. Kalau tidak, kasus dasar tidak pernah tercapai.

5. Level 5

   Urutan turun dan kembali

   Kode sebelum panggilan rekursif jalan saat turun, kode sesudahnya jalan saat kembali. Posisinya menentukan urutan hasil.

6. Level 6

   Array bersarang

   Satu panggilan bisa memanggil dirinya beberapa kali, sekali untuk tiap kotak di dalamnya.

7. Level 7

   Meratakan array

   Hasil dari tiap kotak di dalam disatukan ke array milik panggilan ini dengan spread.

8. Level 8

   Objek bersarang

   Data berbentuk pohon (isi berupa array objek). Kasus dasarnya tersembunyi: loop atas array kosong tidak memanggil apa pun.

9. Level 9

   Menggabungkan cabang

   Hasil beberapa cabang digabung sesuai pertanyaannya: dijumlah untuk menghitung, Math.max untuk mencari yang terdalam.

10. Level 10

    Berhenti lebih awal

    Begitu satu cabang menemukan jawaban, hasilnya diteruskan ke atas dan cabang lain tidak perlu diperiksa.

Tiap panggilan punya bonekanya sendiri

Saat hitung(Ibu) memanggil hitung(Kakak), panggilan pertama belum selesai. Ia menunggu di call stack dengan variabel dan parameternya sendiri, sementara panggilan baru dibuka di atasnya. Baru setelah hitung(Adik) mengembalikan 1, Kakak bisa menghitung 1 + 1, lalu Ibu menghitung 1 + 2.

Jadi rekursi selalu punya dua arah. Saat turun, masalahnya dibuat lebih kecil sampai ketemu kasus dasar. Saat kembali, jawaban kecil itu dibawa naik dan dilengkapi di tiap lapis. Kalau kasus dasar tidak pernah tercapai, tumpukan terus bertambah sampai RangeError: Maximum call stack size exceeded.

Tanya jawab