🧠 Keanehan (Quirks) JavaScript yang Bikin Bingung Tapi Wajib Dipahami

JavaScript adalah bahasa yang fleksibel dan powerful, tapi juga terkenal punya banyak keanehan (quirks) warisan masa lalu. Ini bisa bikin frustrasi, apalagi untuk pemula. Artikel ini membahas beberapa quirks paling umum dan solusinya — lengkap dengan contoh kode.

---

🟡 1. null == undefined → true, tapi null === undefined → false

console.log(null == undefined);  // true
console.log(null === undefined); // false

Penjelasan:

• == melakukan type coercion (perbandingan longgar).

• === melakukan strict comparison (harus sama jenis dan nilai).

🔍 Solusi: Gunakan === untuk menghindari kejutan dari coercion.

---

🟡 2. typeof null === "object" ❗️

console.log(typeof null); // "object"

Penjelasan:

• Ini bug historis di JavaScript dari tahun 1995 yang tak bisa diperbaiki demi kompatibilitas.

• Padahal null seharusnya merepresentasikan "tidak ada apa-apa", bukan "object".

🔍 Solusi:
Gunakan pengecekan eksplisit:

if (value === null) {
  // benar-benar null
}

---

🟡 3. NaN !== NaN ❗️

console.log(NaN === NaN); // false

Penjelasan:

• NaN artinya "Not a Number".

• Satu-satunya nilai di JavaScript yang tidak sama dengan dirinya sendiri.

🔍 Solusi:
Gunakan Number.isNaN():

console.log(Number.isNaN(NaN)); // true

---

🟡 4. Array Bisa Diisi Kosong Tapi Tetap Panjang

const arr = [];
arr[10] = "sepuluh";
console.log(arr.length); // 11
console.log(arr); // [ <10 empty items>, 'sepuluh' ]

Penjelasan:

• JavaScript array itu seperti object, bukan list padat seperti di bahasa lain.

• Bisa ada "lubang" dalam array.

🔍 Solusi: Gunakan Array.prototype.fill jika ingin array padat.

const arr = new Array(11).fill(null);
arr[10] = "sepuluh";

---

🟡 5. Angka Desimal Bisa Salah Hitung

console.log(0.1 + 0.2); // 0.30000000000000004

Penjelasan:

• Ini bukan bug JavaScript, tapi karakteristik floating-point IEEE 754 yang juga dipakai di bahasa lain.

• Bilangan desimal tertentu tidak bisa direpresentasikan dengan akurat di biner.

🔍 Solusi:
Gunakan pembulatan:

Math.round((0.1 + 0.2) * 100) / 100; // 0.3

---

🟡 6. String Kosong == 0 → true

console.log("" == 0); // true

Penjelasan:

• String kosong dikonversi menjadi 0 saat dibandingkan secara longgar (==).

🔍 Solusi:
Selalu gunakan ===, atau validasi tipe sebelum membandingkan.

---

🟡 7. Boolean dalam Array

console.log([false] == false); // true 😵

Penjelasan:

• [false] diubah menjadi 'false', lalu dibandingkan longgar dengan false.

🔍 Solusi: Hindari perbandingan longgar. Gunakan:

console.log([false] === false); // false

---

🟡 8. isNaN("abc") → true, tapi Number.isNaN("abc") → false

isNaN("abc"); // true ❌
Number.isNaN("abc"); // false ✅

Penjelasan:

• isNaN melakukan coercion dulu, "abc" → NaN → true.

• Number.isNaN tidak melakukan coercion, hanya true jika nilai benar-benar NaN.

🔍 Solusi: Gunakan Number.isNaN().

---

🟡 9. parseInt("08") → 8, tapi parseInt("08", 8) → 0

parseInt("08");     // 8
parseInt("08", 8);  // 0

Penjelasan:

• Kalau tidak hati-hati, parseInt bisa mengira angka dengan awalan 0 sebagai oktal.

• Namun perilaku ini sudah tidak konsisten antar browser dan disarankan hindari.

🔍 Solusi: Selalu pakai radix (basis) secara eksplisit.

parseInt("08", 10); // 8

---

🟡 10. true + true → 2, "true" + true → "truetrue"

console.log(true + true);      // 2 (true = 1)
console.log("true" + true);    // "truetrue"

Penjelasan:

• true dikonversi ke angka saat operasi numerik → 1 + 1

• + juga bisa jadi concatenation kalau salah satu operand string.

🔍 Solusi: Selalu perhatikan tipe operand sebelum operasi.

---

✅ Tips Umum Menghindari Quirks

• Aktifkan "use strict" di awal file.

• Gunakan TypeScript untuk mencegah banyak masalah ini.

• Hindari ==, gunakan ===.

• Biasakan membaca spesifikasi coercion dan konversi tipe.

---

🧠 Kesimpulan