Debugging dan kesalahan umum

console.table, debugger, kesalahan klasik JavaScript.

Pahami konsepnya

Debugging di JavaScript: console.log untuk inspeksi cepat, console.table(arr) untuk array objek rapi, console.trace() untuk jejak stack. Statement debugger menjeda eksekusi di DevTools — set breakpoint tanpa klik. Error stack trace menunjukkan urutan pemanggilan yang mengarah ke error.

Kesalahan klasik: (1) == vs === — selalu gunakan ===; (2) this dalam arrow vs method biasa; (3) 0.1 + 0.2 !== 0.3 (floating-point); (4) sort() default string; (5) var hoisting dan function scope; (6) mutation tak sengaja — b = a membuat reference bukan salinan; (7) NaN !== NaN.

Kebiasaan sehat: gunakan const secara default; selalu periksa response.ok pada fetch; tangani Promise rejection dengan .catch atau try/catch; test dengan console.log sebelum refactor.

Coba contoh kode

// console.table untuk array objek
const siswa = [
  { nama: "Ari", poin: 85 },
  { nama: "Budi", poin: 92 },
];
console.table(siswa);

// kesalahan klasik
console.log("5" == 5);    // true — coercion!
console.log("5" === 5);   // false — strict
console.log([10, 2].sort());         // [10, 2] — string!
console.log([10, 2].sort((a,b)=>a-b)); // [2, 10] — number

// reference
const a = [1, 2];
const b = a;      // reference
const c = [...a]; // salinan
b.push(3);
console.log(a === b);  // true — sama!
console.log(a === c);  // false — beda

console.table mencetak array objek sebagai tabel rapi di console. Perhatikan == vs ===, sort default, dan reference vs salinan — tiga jebakan yang paling sering menangkap pemula.

Latihan singkat

Uji: buktikan [10,2].sort() memberi `[10,2,` bukan `[2,10]` (string sort).