Perbaiki TypeError dengan Cara Mengatasi Cannot Set Properties Of Undefined JavaScript

Ditulis oleh JavaScript

Cara mengatasi cannot set properties of undefined JavaScript paling cepat: hentikan assignment, lalu periksa object induknya. Error TypeError ini muncul karena kode mencoba mengisi properti ke nilai undefined, misalnya user.name = "Andi" padahal user belum ada isinya.

Arti Error Cannot Set Properties of Undefined

Pesan lengkapnya biasanya TypeError: Cannot set properties of undefined (setting 'namaProperti'). JavaScript menolak membuat properti baru di atas undefined.

Bedakan tiga kondisi ini karena penanganannya berbeda:

  • Undefined: variabel dideklarasikan, object induk belum diisi, lalu dipaksa diisi properti.
  • Null: nilainya sengaja dikosongkan, pesannya menjadi cannot set properties of null.
  • Undeclared: variabel tidak pernah dideklarasikan, pesannya ReferenceError, bukan TypeError.

Di browser, kasus umum terjadi saat data fetch belum datang, querySelector tidak menemukan elemen, atau akses object bertingkat seperti data.user.address.street.

Penyebab Umum Error Ini di JavaScript

Object induk sering belum diinisialisasi. Fungsi mengembalikan undefined, response API kosong, atau index array diakses di luar batas.

Error/Kondisi Penyebab Solusi
Setting properti object kosong Induk belum dibuat Inisialisasi {} dahulu
Setting dari hasil fetch Data belum siap atau struktur beda Tunggu response dan validasi bentuknya
Setting ke elemen DOM Selector salah atau DOM belum dimuat Periksa elemen dan urutan script
Setting properti nested Level tengah masih undefined Buat level tengah atau gunakan guard

BACA JUGA:

Langkah Memperbaiki Error Sampai Hilang

Ikuti urutan ini:

  1. Baca stack trace dan klik baris error untuk menemukan assignment yang gagal.
  2. Tambahkan console.log tepat sebelum baris itu untuk melihat object induknya.
  3. Pastikan induknya object atau array, bukan undefined dari fungsi atau fetch.
  4. Beri nilai default seperti {}, [], atau parameter default.
  5. Perbaiki urutan async dan DOM, misalnya tunggu fetch selesai atau jalankan script setelah DOM siap.
// Salah: user masih undefined
let user;
user.name = "Andi";

// Benar: inisialisasi dulu
let user = {};
user.name = "Andi";

// Benar untuk nested object
let data = {};
data.profile = data.profile || {};
data.profile.name = "Andi";

// Guard untuk DOM dan API
const el = document.querySelector("#nama");
if (el) el.textContent = "Andi";
if (response && response.user) response.user.name = "Andi";

Pola perbaikan yang aman:

  • Gunakan guard clause if (!user) return; sebelum assignment.
  • Buat object tengah satu per satu untuk struktur bertingkat.
  • Validasi response API dengan response.ok, lalu cek properti pentingnya.
  • Gunakan default parameter, contoh function simpan(user = {}).

Optional chaining seperti data?.user hanya aman untuk membaca. Ia tidak bisa dipakai di sisi kiri assignment seperti data?.user = {}.

Pencegahan Agar Error Tidak Terulang

  • Inisialisasi state sejak awal, jangan biarkan object penting bernilai undefined.
  • Validasi bentuk data API sebelum menulis propertinya.
  • Pastikan selector DOM benar dan script berjalan setelah elemen tersedia.

FAQ

Apakah error ini sama dengan cannot read properties of undefined?

Tidak. Versi read terjadi saat membaca properti, versi set terjadi saat menulis atau mengisi properti.

Kenapa optional chaining saja tidak selalu memperbaiki error ini?

Optional chaining menghentikan pembacaan, tetapi assignment tetap membutuhkan object induk yang nyata.

Bagaimana cara cepat menemukan baris object yang undefined?

Klik stack trace di console browser, lalu log object induk tepat sebelum baris assignment.

Artikel Terkait