Indeks Diakses Malah Kosong? Cara Mengatasi Array Index Undefined Javascript

Ditulis oleh JavaScript

Cek length dan tipe data sebelum memakai indeks. Kebanyakan kasus arr[i] undefined terjadi karena indeks melebihi batas, array berisi lubang, atau data fetch belum datang saat kode mengakses elemen. Tambahkan guard if (i < arr.length) lalu sediakan nilai cadangan dengan ??.

Penyebab arr[i] Mengembalikan Undefined

JavaScript tidak melempar error saat indeks keluar rentang. Mesin hanya mengembalikan undefined. Masalah baru muncul pada baris berikutnya, misalnya arr[5].name memicu Cannot read properties of undefined.

Ada tiga pemicu umum di browser maupun Node.js. Indeks negatif tidak membaca dari belakang, fungsi async dipanggil sebelum await selesai, dan delete arr[1] meninggalkan lubang tanpa menggeser length.

Error/Kondisi Penyebab Solusi
arr[10] padahal length 3 Indeks di luar batas Batasi indeks dengan length
arr.length benar tapi cetak undefined Array berlubang atau slot kosong Isi dengan map, filter Boolean, atau Array.from
Data API undefined saat render Akses berjalan sebelum fetch selesai Tunggu respons lalu validasi bentuk array

BACA JUGA:

Cara Memperbaiki Akses Indeks yang Undefined

Ikuti urutan ini agar akar masalah terlihat, bukan sekadar ditutup fallback:

  1. Cetak console.log(arr.length, i, arr) sebelum akses.
  2. Pastikan i berupa angka valid dan tidak negatif.
  3. Tambahkan guard Array.isArray(arr) && i < arr.length.
  4. Beri fallback memakai ?? nilaiDefault untuk tampilan.
// Salah: langsung akses tanpa guard
const nama = users[2].name;

// Benar untuk browser dan Node.js
if (Array.isArray(users) && users.length > 2) {
  const nama = users[2]?.name ?? "Pengguna tidak ditemukan";
  console.log(nama);
}

Optional chaining mencegah TypeError lanjutan. Nullish coalescing mengganti undefined dan null tanpa menimpa angka 0 atau string kosong.

  • Periksa response.ok sebelum memanggil response.json().
  • Pastikan hasil parse benar array memakai Array.isArray(data).
  • Validasi elemen penting, contohnya typeof data[0] === "object".
  • Normalkan respons object menjadi array bila API kadang berubah bentuk.

Cara Mencegah Indeks Undefined Terulang

Gunakan metode yang sesuai tujuan. find() mencari berdasarkan kondisi, arr.at(-1) mengambil elemen terakhir dengan aman, dan for...of menghindari salah hitung indeks manual.

Validasi input indeks dari parameter fungsi, query string, atau input form. Ubah string menjadi angka dengan Number(), tolak NaN, lalu pastikan nilainya dalam rentang.

  • Frontend: tampilkan skeleton atau pesan memuat sebelum data tersedia.
  • Frontend: gunakan nilai default saat merender daftar agar layout tidak rusak.
  • Node.js: validasi payload dan hasil query database sebelum indeks dipakai.
  • Node.js: catat indeks bermasalah ke log agar mudah dilacak.

FAQ

Apakah array index undefined termasuk TypeError?

Akses indeks berlebih hanya logic error bernilai undefined; TypeError muncul bila nilai tersebut dipanggil sebagai object atau fungsi.

Kenapa arr.length benar tapi isinya undefined?

Kemungkinan array berlubang, slot belum diisi, atau datanya memang berisi nilai undefined dari sumber.

Kapan memakai fallback ?? instead of if?

Pakai ?? untuk nilai tampilan sederhana, pakai if bila alur program harus berhenti atau bercabang.

Artikel Terkait