Cara Mengatasi Error 'Maximum call stack size exceeded' di JavaScript

Saat Kodemu Terjebak dalam Ruang Tanpa Ujung

Saat sedang menguji kode JavaScript di Browser atau Node.js, aplikasi tiba-tiba macet (Freeze), kipas laptopmu berputar kencang, dan beberapa detik kemudian muncul teks merah horor di terminal: RangeError: Maximum call stack size exceeded.

Apa arti pesan ini? Ini berarti kodemu telah melakukan Perulangan Tak Terhingga (Infinite Loop) secara Rekursif hingga memori antrean mesin JavaScript-mu kepenuhan dan meledak!

Penyebab Utama: Fungsi Memanggil Dirinya Sendiri (Rekursi Gagal)

Dalam ilmu komputer, sebuah fungsi diperbolehkan untuk memanggil dirinya sendiri. Teknik ini disebut Recursion (Rekursi). Namun, rekursi itu WAJIB memiliki rem darurat (Base Case/Exit Condition). Jika tidak ada remnya, fungsi itu akan masuk ke jurang tanpa batas.

Contoh Kode yang Menghasilkan Error:

function panggilAku() {
  console.log("Memanggil diriku sendiri...");
  // Dosa Besar: Memanggil fungsi ini lagi tanpa ada batasan (if-else)
  panggilAku(); 
}

panggilAku(); // Menyalakan bom waktu

Apa itu Call Stack? (Tumpukan Piring)

JavaScript memiliki memori internal bernama Call Stack (Tumpukan Panggilan). Kamu bisa membayangkannya seperti tumpukan piring di restoran.

Setiap kali sebuah fungsi dijalankan, JavaScript menaruh satu piring (Fungsi) ke atas tumpukan. Saat fungsi itu selesai tugasnya, piringnya diambil (dihapus).
Tapi, di kode di atas, fungsi panggilAku() terus-terusan memanggil dirinya yang baru sebelum dirinya yang lama selesai! Akibatnya, piring terus ditumpuk ke atas tanpa pernah diambil. Karena batas tumpukan (Stack Limit) di Chrome biasanya hanya sekitar 10.000 piring, tumpukan itu akhirnya ambruk (Exceeded)!

Cara Mengatasinya (Memberi Rem Darurat)

Jika kamu MENGHARUSKAN penggunaan Rekursi (misal: saat mencari data di dalam struktur folder Tree yang bercabang-cabang), pastikan kamu Selalu menulis statemen IF (Kondisi Keluar) di baris pertama fungsi tersebut.

let jumlahPanggilan = 0;

function panggilAkuDenganAman() {
  jumlahPanggilan++;
  
  // REM DARURAT (Base Case)!
  if (jumlahPanggilan > 5) {
    return console.log("Stop! Sudah 5 kali. Kita keluar.");
  }

  console.log(`Panggilan ke-${jumlahPanggilan}`);
  panggilAkuDenganAman(); // Memanggil diri sendiri
}

panggilAkuDenganAman();

Catatan Tambahan di React: Jika kamu mengalami error ini di React, 99% penyebabnya adalah kamu salah mengatur useEffect (tanpa *dependency array*) yang memicu *State* berubah terus menerus, menyebabkan siklus Re-render tanpa batas waktu!