🧠 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

Keanehan	Gunakan Pengganti
`==` vs `===`	Gunakan `===`
`typeof null === object`	Gunakan `value === null`
`NaN !== NaN`	Gunakan `Number.isNaN()`
Array berlubang	Gunakan `Array.fill()` atau loop aman
Floating point error	Gunakan pembulatan (`Math.round`)
`isNaN()` bingung	Gunakan `Number.isNaN()`

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

Comments

More from this blog

Hermes vs OpenClaw (2026): Mana yang Lebih Baik untuk Developer?

Memahami Protokol Penting untuk Developer Web Modern dan Cloud Infrastructure

Mengapa Banyak Mahasiswa IT Lulus Tetapi Sulit Mendapat Pekerjaan?

OpenNext: Cara Menjalankan Next.js di Mana Saja Tanpa Terkunci Vercel

Jangan Langganan OpenCode Go Sebelum Ambil Bonus $5 Ini

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

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

🟡 3. `NaN !== NaN` ❗️

🟡 4. Array Bisa Diisi Kosong Tapi Tetap Panjang

🟡 5. Angka Desimal Bisa Salah Hitung

🟡 6. String Kosong == 0 → `true`

🟡 7. Boolean dalam Array

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

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

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

✅ Tips Umum Menghindari Quirks

🧠 Kesimpulan

Command Palette

Comments

More from this blog

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

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

🟡 3. NaN !== NaN ❗️

🟡 4. Array Bisa Diisi Kosong Tapi Tetap Panjang

🟡 5. Angka Desimal Bisa Salah Hitung

🟡 6. String Kosong == 0 → true

🟡 7. Boolean dalam Array

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

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

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

✅ Tips Umum Menghindari Quirks

🧠 Kesimpulan

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

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

🟡 3. `NaN !== NaN` ❗️

🟡 6. String Kosong == 0 → `true`

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

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

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