Akses Data API Lebih Tenang dengan Cara Mengecek Property Nested Object Javascript Aman

Ditulis oleh JavaScript

Cara mengecek property nested object JavaScript aman adalah memastikan objek induk ada dulu, lalu pakai optional chaining ?. dan nilai default. Pola paling praktis untuk data API: const city = data?.user?.address?.city ?? “Tidak tersedia”;. Kode tidak berhenti saat satu level bernilai undefined atau null.

Kenapa Akses Nested Object Sering Error

JavaScript membaca rantai properti dari kiri ke kanan. Kalau data.user ada tetapi data.user.address bernilai undefined, akses data.user.address.city menghasilkan TypeError: Cannot read properties of undefined (reading ‘city’).

Kasus lain terjadi saat level atas sendiri kosong. data belum terisi karena fetch masih berjalan, lalu kode langsung membaca data.user.name. Hasilnya sama, aplikasi berhenti di baris itu.

  • Respons API masih loading lalu komponen langsung render.
  • Field opsional tidak dikirim backend untuk user tertentu.
  • Struktur berbeda antar endpoint, misalnya address kadang objek, kadang null.
  • Data array kosong sehingga items[0].price gagal dibaca.

BACA JUGA:

Cara Mengecek Property Nested Object yang Aman

Gunakan urutan ini untuk rantai yang panjang:

  1. Pastikan variabel dasar berupa object dan bukan null.
  2. Ganti titik biasa dengan optional chaining pada setiap level rawan kosong.
  3. Tambahkan default dengan ?? agar tampilan dan perhitungan tetap berjalan.
// Salah: crash kalau address undefined
const city = data.user.address.city;

// Benar: aman untuk frontend browser
const city = data?.user?.address?.city ?? "Jakarta";

Kode benar membaca city hanya bila seluruh rantai tersedia. Operator ?? mengisi cadangan khusus untuk null dan undefined, sehingga angka nol atau string kosong tetap lolos.

  • in: memeriksa nama key ada di objek, termasuk dari prototype.
  • hasOwnProperty: memeriksa key milik objek itu sendiri.
  • Optional chaining: menghentikan pembacaan rantai saat menemukan nullish.

Tabel Metode Pengecekan Nested Object

Metode Fungsi Catatan
Optional chaining Akses rantai tanpa error Cocok untuk render data API
Operator in Cek keberadaan key Perlu objek induk valid dulu
hasOwnProperty Cek key milik sendiri Bagus untuk validasi objek

Pengecekan langsung cukup untuk satu atau dua level yang hampir selalu ada. Helper kecil atau validasi eksplisit lebih cocok bila struktur dalam, dipakai berulang, atau menentukan alur program.

FAQ

Apakah optional chaining cukup untuk semua kasus?

Cukup untuk mencegah crash saat baca properti, tetapi tidak menggantikan validasi format dan tipe data.

Bagaimana cek key yang mungkin bernilai null?

Gabungkan optional chaining dengan ??, contohnya user?.phone ?? “-“.

Kapan perlu validasi tipe sebelum akses nested?

Lakukan saat nilai menentukan perhitungan, misalnya pastikan array dengan Array.isArray() sebelum memakai indeks.

Artikel Terkait