Error saat Unpacking? Cara Mengatasi Destructuring Undefined Javascript

Ditulis oleh JavaScript

Cara mengatasi destructuring undefined JavaScript paling cepat adalah memberi nilai default objek kosong pada sumbernya, contohnya const { nama } = data || {} atau function cetak({ nama } = {}). Pola ini menghentikan error Cannot destructure property of undefined or null karena JavaScript hanya boleh melakukan unpacking dari objek atau array yang ada.

Penyebab Destructuring Undefined Paling Sering

Sumber data bernilai null atau undefined memicu TypeError saat di-destructuring. Kondisi ini sering muncul dari response API yang gagal, parameter fungsi yang tidak dikirim, dan fungsi yang me-return kosong.

  • Response fetch gagal lalu kode langsung destructuring data.user.
  • Fungsi dipanggil tanpa argumen, padahal parameternya memakai pola { nama }.
  • Properti nested hilang, misalnya user.alamat tidak ada lalu kota di-unpacking dari sana.

Perlu dibedakan, properti yang hilang hanya menghasilkan undefined. Error muncul ketika objek induknya yang null atau undefined.

Tabel Troubleshooting Destructuring Undefined

Gunakan tabel ini untuk mencocokkan kondisi error sebelum memperbaiki kode.

Kondisi Penyebab Solusi
Destructuring response API Data belum datang atau fetch gagal Fallback || {} dan cek response.ok
Destructuring argumen fungsi Fungsi dipanggil tanpa objek Pakai default parameter = {}
Destructuring nested object Objek level atas hilang Beri default tiap level
Destructuring array kosong Elemen tidak tersedia Beri default nilai array

BACA JUGA:

Cara Memperbaiki Destructuring Undefined JavaScript

Ikuti urutan ini agar perbaikan tepat sasaran:

  1. Reproduksi error dan lihat baris yang melakukan destructuring.
  2. Cek sumber data dengan console.log sebelum baris tersebut.
  3. Tambah default objek, default properti, atau guard bila data berasal dari API.
// SALAH: error jika user undefined
const { nama } = user;

// BENAR: objek
const { nama = "Tamu" } = user || {};

// BENAR: nested
const { alamat: { kota = "-" } = {} } = user || {};

// BENAR: parameter fungsi
function sapa({ nama = "Tamu" } = {}) {
  return nama;
}

// BENAR: array
const [pertama = 0] = daftar || [];
  • Default {} menjaga sumber destructuring tetap objek.
  • Default nilai seperti = "Tamu" menjaga properti yang hilang.
  • Renaming { nama: fullName = "-" } berguna bila nama variabel bentrok.
  • Guard if (!user) return cocok bila data memang tidak boleh diproses lanjut.

Cara Mencegah Error Terulang

Validasi response API dan return fungsi sebelum unpacking. Kode frontend berjalan di browser, jadi pastikan bentuk data sudah sesuai setelah fetch dan JSON.parse.

  • Gunakan default parameter untuk semua fungsi yang menerima objek.
  • Buat fallback response, misalnya const data = await res.json().catch(() => ({})).
  • Periksa properti opsional sebelum dipakai untuk render DOM.

Pakai optional chaining untuk membaca aman, seperti user?.alamat?.kota. Pakai default destructuring ketika nilai tersebut perlu ditampung ke variabel dan diberi nilai awal.

FAQ

Kenapa destructuring properti undefined tidak error tapi destructuring objek undefined error?

Properti hilang hanya menghasilkan undefined, sedangkan sumber undefined tidak punya struktur untuk di-unpacking.

Apakah default destructuring cukup untuk data API yang kosong?

Cukup untuk mencegah TypeError, tetapi tetap periksa status response dan bentuk datanya.

Bagaimana cara aman destructuring nested object JavaScript?

Beri default pada setiap level, contohnya const { alamat: { kota } = {} } = user || {}.

Artikel Terkait