TypeErrorJavaScriptTypeErrorDebugging6 mnt baca

Mengatasi Cannot read properties of undefined di JavaScript

Error paling klasik di JavaScript: mengakses properti dari nilai undefined. Penyebab umum dan pola pengamanannya.

1 · Gejala & Log Pesan Error

error.log
Uncaught TypeError: Cannot read properties of undefined (reading 'name')
    at renderProfile (app.js:42:21)
    at HTMLButtonElement.onclick (index.html:1:1)

// varian lain yang sering muncul:
Cannot read properties of null (reading 'length')
undefined is not an object (evaluating 'user.profile.name') // Safari

2 · Akar Penyebab Masalah

Kamu Mengakses Properti dari Sesuatu yang Tidak Ada

Pesan ini artinya satu hal: ekspresi di sebelah kiri titik adalah undefined (atau null), lalu kamu mencoba membaca propertinya. JavaScript tidak bisa melanjutkan, jadi ia melempar TypeError.

Tiga Tersangka Utama

  1. Data belum datang: pola paling umum. Kamu fetch data dari API, lalu langsung render user.profile.name padahal respons belum tiba atau strukturnya beda dari dugaan.
  2. Salah nama properti: typo seperti user.nam vs user.name, atau API mengembalikan full_name bukan name.
  3. Fungsi mengembalikan undefined: lupa return di fungsi, atau mengakses elemen array yang indeksnya di luar batas (arr[10] dari array berisi 3 item).

3 · Solusi & Diff Kode

✕ Sebelum (bermasalah)

before
// ❌ meledak kalau user / profile belum ada
function renderProfile(user) {
  document.getElementById("nama").textContent = user.profile.name;
  document.getElementById("kota").textContent = user.address.city;
}

✓ Sesudah (diperbaiki)

after
// ✔ aman: optional chaining + nilai default
function renderProfile(user) {
  document.getElementById("nama").textContent =
    user?.profile?.name ?? "Tamu";
  document.getElementById("kota").textContent =
    user?.address?.city ?? "-";
}

Langkah Perbaikan

  1. Baca baris error-nya: DevTools menunjukkan file dan nomor baris persis. Itulah titik ledakan, bukan selalu akar masalahnya.
  2. console.log induknya, bukan anaknya: log user dan user.profile sebelum baris error. Kamu akan langsung lihat mana yang undefined.
  3. Pasang pengaman: gunakan optional chaining (?.) dan nullish coalescing (??) seperti contoh di atas untuk nilai yang memang boleh kosong.
  4. Validasi bentuk data API: kalau error muncul setelah fetch, console.log respons mentahnya. Sering ternyata API mengembalikan { data: {...} } atau array kosong.
  5. Pencegahan jangka panjang: TypeScript menangkap sebagian besar kasus ini saat coding, sebelum sampai ke browser.