For…Of Gagal Terus? Cara Mengatasi Object Is Not Iterable Javascript

Ditulis oleh JavaScript

Perbaikan tercepat untuk object is not iterable adalah berhenti melempar plain object ke for...of. Ubah dulu object jadi array dengan Object.entries(user), Object.values(user), atau Object.keys(user), baru loop. Error TypeError: object is not iterable muncul karena for...of, spread [...data], dan destructuring array butuh protokol iterable.

Kenapa Object Memicu Error Not Iterable

Plain object seperti {nama: "Andi", umur: 20} tidak punya Symbol.iterator. Browser dan Node.js menolak object itu saat dipakai di posisi iterable. Array, string, Map, dan Set bisa langsung di-loop karena mereka iterable bawaan.

  • Gunakan typeof data untuk memastikan data benar object, bukan string atau number.
  • Gunakan Array.isArray(data) sebelum map, for...of, atau spread array.
  • Cetak console.log(data) karena response API sering berbentuk {data: [...]}, bukan array langsung.

Tabel Troubleshooting Object is Not Iterable

Error/Kondisi | Penyebab | Solusi

skillet tabel berikut merangkum kasus paling sering:

for…of ke object plain object tidak iterable pakai for…of Object.entries(obj)
[…]objekUser spread array butuh iterable pakai {…objekUser} atau Object.values(obj)
response API dikira array API kirim object berisi array akses response.data lalu loop arraynya

BACA JUGA:

Cara Memperbaiki dengan Object.entries, Values, dan Keys

Ikuti urutan ini supaya tidak salah konversi:

1. Identifikasi bentuk data lewat console.log.
2. Pilih konversi sesuai kebutuhan key atau value.
3. Tulis ulang loop memakai hasil array tersebut.

// SALAH
const user = { nama: "Andi", kota: "Solo" };
for (const item of user) {
  console.log(item);
}

// BENAR
for (const [key, value] of Object.entries(user)) {
  console.log(key, value);
}

for (const value of Object.values(user)) {
  console.log(value);
}
  • Pakai entries kalau butuh pasangan key dan value.
  • Pakai keys kalau hanya butuh nama properti.
  • Pakai values kalau hanya butuh isi data.
  • Pakai Array.from hanya untuk array-like seperti arguments atau NodeList, bukan plain object.

Cara Mencegah Error Terulang

  • Validasi Array.isArray(data) sebelum memanggil map, filter, for...of, atau [...data].
  • Normalisasi response Fetch/API menjadi array sejak awal, misalnya ambil result.items || [].
  • Bedakan TypeError ini dengan Cannot read properties of undefined. Yang pertama salah tipe iterable, yang kedua properti diakses dari data kosong.

FAQ

Apakah semua object bisa dibuat iterable dengan for…of?

Tidak. Plain object harus dikonversi dulu memakai Object.entries, keys, atau values.

Kapan memakai Object.entries dibanding Object.values?

Pakai entries bila key dibutuhkan, pakai values bila hanya isi yang diproses.

Kenapa spread object […] tetap error padahal {…} berhasil?

[...] membutuhkan iterable, sedangkan {...} menyalin properti object enumerable.

Artikel Terkait