Cara Mengatasi Cannot Read Properties Of Null JavaScript dari Penyebabnya

Ditulis oleh JavaScript

Cara mengatasi cannot read properties of null JavaScript adalah memastikan nilai yang dibaca propertinya bukan null sebelum kode mengaksesnya. Error TypeError: Cannot read properties of null muncul saat Anda menulis user.name atau element.textContent, tetapi user atau element ternyata null. Periksa selector DOM, data API, dan variabel dengan console.log, lalu tambahkan pengecekan null atau optional chaining.

Penyebab Cannot Read Properties Of Null Paling Sering

Browser menampilkan TypeError ini saat kode berjalan, bukan saat parsing. Kode menemukan objek null, lalu gagal membaca properti di dalamnya.

  • DOM null: querySelector tidak menemukan elemen karena selector salah atau script jalan sebelum DOM dimuat.
  • Data API null: response.data kosong, struktur JSON berubah, atau fetch gagal tetapi kode tetap membaca hasilnya.
  • Variabel belum diisi: state awal null, data async belum datang, atau assignment terlewat.
  • Fungsi mengembalikan null: JSON.parse(localStorage.getItem()) menghasilkan null saat key belum tersimpan.

Null berarti sengaja kosong. Undefined berarti variabel belum diberi nilai. Keduanya memicu pesan error mirip, tetapi sumbernya berbeda.

Tabel Error, Penyebab, dan Solusi Cepat

Gunakan tabel ini untuk diagnosis sebelum mengubah kode.

Error/Kondisi Penyebab Solusi
querySelector(…).textContent error Elemen tidak ada di DOM Cek selector dan pastikan script setelah elemen
response.data.user error API mengembalikan null Cek response.ok dan isi JSON sebelum dibaca
Data localStorage error Key kosong sehingga hasil parse null Beri nilai default object atau array

BACA JUGA:

Cara Memperbaiki Error Null dengan Tepat

Ikuti urutan ini agar perbaikan tepat sasaran:

  1. Baca stack trace di DevTools untuk menemukan baris dan nama variabel yang error.
  2. Tambahkan console.log(namaVariabel) tepat sebelum baris error.
  3. Periksa selector, ejaan ID atau class, dan posisi script terhadap DOM.
  4. Periksa data API dengan console.log(await response.json()) atau tab Network.
// SALAH: langsung membaca properti
const el = document.querySelector("#nama");
el.textContent = user.nama;

// BENAR: cek null dan data
const el = document.querySelector("#nama");
if (!el || !user) return;
el.textContent = user?.nama ?? "Tanpa nama";

Pengecekan if (!el || !user) menghentikan kode sebelum null dibaca. Optional chaining user?.nama aman untuk properti bersarang, sedangkan ?? memberi nilai cadangan bila nama kosong.

Cara Mencegah Error Null Terulang

  • Validasi elemen DOM sebelum memanggil addEventListener, classList, atau textContent.
  • Pakai guard clause di awal fungsi untuk keluar cepat bila data null.
  • Beri default value seperti {}, [], atau string kosong untuk state awal.
  • Periksa response.ok, status, dan struktur JSON setelah fetch sebelum memakai datanya.

FAQ

Kenapa querySelector menyebabkan error ini?

Karena selector tidak cocok dengan elemen apa pun sehingga hasilnya null, lalu kode membaca properti dari null tersebut.

Apakah optional chaining selalu cukup?

Tidak, optional chaining mencegah crash tetapi tidak memperbaiki selector salah atau data API kosong.

Artikel Terkait