Mindset Debugging — Debugging

Pernah ngerjain bug sampe 3 jam terus baru sadar typo huruf di nama variable? Atau panik liat error long stack trace dan langsung Google "error xxx" tanpa…

Debugging adalah kerja mencari kenapa kode melakukan hal yang beda dari maumu, lalu membetulkannya. Bayangin lampu kamar yang tiba-tiba gak mau nyala. Kamu gak langsung bongkar kabel di tembok. Kamu pencet saklarnya sekali lagi (beneran mati terus?), lihat apakah lampu kamar lain nyala (kalau iya, listrik rumah aman, separuh tersangka gugur), lalu coba ganti bohlamnya dengan yang pasti bagus. Satu langkah, satu bukti. Debugging kode jalannya persis begitu.

🧪 Tebakan cepat: kode di bawah punya tiga bug. Waktu dijalankan, berapa pesan error yang muncul, dan di baris mana? Tebak dulu, jawabannya ada di bagian "Langkah 2: baca pesan error-nya".

Kode yang kita debug

processUsers harusnya mengambil user yang aktif saja, mengubah tiap user jadi teks Nama (umur), lalu mengembalikannya urut abjad. Dari data ini, hasil yang benar Andi (22),Budi (25),Dina (28).

function processUsers(users) {
  const activeUsers = users.filter(u => u.active = true);
  const formatted = activeUsers.map(u => u.nama + " (" + u.age + ")");
  formatted.sort();
}

const users = [
  { name: "Dina", age: 28, active: true },
  { name: "Budi", age: 25, active: true },
  { name: "Cici", age: 30, active: false },
  { name: "Andi", age: 22, active: true },
  { name: "Eka", age: 35, active: false }
];

const result = processUsers(users);
console.log(result.join(","));

Bug adalah perbedaan antara yang kamu mau dan yang kode lakukan. Di sini ada tiga, dan kita cari satu per satu dengan lima langkah.

Langkah 1: reproduksi dulu

Reproduksi artinya bisa memunculkan bug yang sama setiap kali, dengan langkah yang jelas. "Kadang error" belum bisa di-debug. "Jalankan file ini dengan data users di atas, keluar TypeError" bisa. Tanpa reproduksi, kamu juga gak bisa membuktikan bug-nya sudah hilang. Jadi ini langkah pertama, sebelum mengubah apa pun.

Langkah 2: baca pesan error-nya

Jalankan kodenya. Console Chrome menampilkan satu baris merah:

TypeError: Cannot read properties of undefined (reading 'join')

Jadi result isinya undefined. Kenapa? processUsers gak punya return, dan function tanpa return selalu mengembalikan undefined. Itu jawaban tebakannya: dari tiga bug, cuma satu pesan error, dan dia muncul di baris terakhir, padahal bug-nya ada di dalam processUsers. Error menunjuk tempat program jatuh, belum tentu tempat salahnya dimulai. Dua bug lainnya diam, cuma bikin hasilnya salah.

Langkah 3: tebak, lalu buktikan

Tambah return formatted; di akhir function, lalu jalankan lagi. Error-nya hilang, tapi keluarannya:

undefined (22),undefined (25),undefined (28),undefined (30),undefined (35)

Sekarang bentuk dugaan (hipotesis) yang bisa dicek, jangan ubah kode secara acak. Dugaan: "nama property-nya salah". Cara membuktikannya: log satu user.

console.log(activeUsers[0]); // {name: 'Dina', age: 28, active: true}

Property-nya name, sedangkan kode membaca u.nama. Property yang gak ada bernilai undefined, dan undefined yang digabung dengan teks jadi tulisan "undefined". Dugaannya terbukti.

Langkah 4: persempit dengan membelah dua

Masih ada gejala kedua: keluar lima orang, padahal yang aktif cuma tiga. Daripada membaca dari baris pertama, cek titik tengah jalannya data. processUsers punya tiga tahap: filter, map, sort. Pasang log setelah tahap pertama:

const activeUsers = users.filter(u => u.active = true);
console.log(activeUsers.length); // 5, harusnya 3

Datanya sudah salah setelah filter, jadi map dan sort bebas dari tuduhan: bug-nya di separuh pertama. Cara ini namanya binary search debugging: periksa titik tengah, lalu lanjut ke separuh yang bermasalah. Kode 8 tahap selesai dicek dalam 3 kali log, bukan 8.

Penyebabnya: u.active = true pakai satu =, yang mengisi nilai, bukan membandingkan. Hasil pengisian itu true, jadi semua user lolos. Ganti dengan u.active === true.

Langkah 5: perbaiki satu, jalankan lagi

Ubah satu hal, jalankan, lihat hasilnya. Setelah ketiga perbaikan:

Perbaikan Keluaran console
belum ada TypeError: Cannot read properties of undefined (reading 'join')
return formatted; undefined (22),undefined (25),undefined (28),undefined (30),undefined (35)
u.active === true undefined (22),undefined (25),undefined (28)
u.name Andi (22),Budi (25),Dina (28)

Terakhir, verifikasi dengan data lain, supaya kamu yakin yang benar function-nya, bukan cuma contoh tadi. processUsers dengan Zaki (aktif), Ani (gak aktif), dan Bimo (aktif) harus mengembalikan ["Bimo (41)", "Zaki (30)"]. Daftar yang gak punya user aktif harus menghasilkan array kosong, panjangnya 0.

⚠️ Jebakan yang sering ketemu

💡 Rubber duck debugging

Kalau buntu, jelaskan kodenya baris per baris dengan suara keras, ke teman atau ke bebek karet di meja. Waktu mengucapkan "lalu filter ini meloloskan user yang aktif...", kamu sering sadar sendiri bahwa yang tertulis bukan itu. Bebeknya gak perlu menjawab.

TL;DR: Debugging punya urutan: (1) reproduksi bug-nya sampai bisa muncul tiap kali, (2) baca pesan error-nya, misalnya TypeError: Cannot read properties of undefined (reading 'join') artinya ada yang membaca .join dari undefined, (3) bentuk dugaan dan buktikan dengan console.log, (4) persempit dengan membelah dua (binary search): log di titik tengah, lanjut ke separuh yang salah, (5) ubah satu hal, jalankan lagi, lalu cek dengan data lain. Error menunjuk tempat program jatuh, belum tentu tempat bug-nya. Function tanpa return menghasilkan undefined, dan = mengisi nilai, === membandingkan.

Yang akan kamu pelajari