Kenapa Cara Mengatasi QuerySelectorAll Tidak Bisa Map Javascript Selalu Butuh Array.From

Ditulis oleh JavaScript

document.querySelectorAll() mengembalikan NodeList, bukan Array. Itu sebabnya .map() langsung memicu TypeError: ...map is not a function. Perbaikannya ubah dulu ke array dengan Array.from() atau spread [...].

Penyebab QuerySelectorAll Gagal Dipakai Map

NodeList terlihat seperti array karena punya length dan indeks, tetapi tidak punya method map, filter, atau reduce. Kode berhenti tepat di baris map dan nilai kembalian tidak pernah dibuat.

  • TypeError nyata: pesan nodes.map is not a function berarti selector benar, tetapi tipe datanya salah.
  • Selector kosong: jika tidak ada elemen cocok, hasilnya NodeList kosong. Ini tidak error saat dikonversi, hanya menghasilkan array kosong.
  • DOM belum siap: script jalan sebelum elemen dirender membuat querySelectorAll menemukan nol elemen. Letakkan script di akhir body atau tunggu DOMContentLoaded.

Tabel Troubleshooting Cepat

Error/Kondisi | Penyebab | Solusi

Untuk format tabel WordPress, baca baris berikut sebagai tiga kolom:

Error/Kondisi Penyebab Solusi
map is not a function Memanggil map pada NodeList Bungkus dengan Array.from(nodes)
Hasil selalu kosong Selector salah atau typo class Cek selector di DevTools dengan document.querySelectorAll
Elemen kadang tidak ketemu Script jalan sebelum DOM siap Pakai DOMContentLoaded atau pindah script ke bawah

BACA JUGA:

Cara Memperbaiki dengan Array.from dan Spread

Ikuti urutan ini agar tidak tertukar:

  1. Ambil elemen dengan querySelectorAll.
  2. Ubah NodeList menjadi array.
  3. Baru panggil map dan pakai hasilnya.
// SALAH: NodeList tidak punya map
const salah = document.querySelectorAll(".item");
const hasilSalah = salah.map(el => el.textContent);

// BENAR
const nodes = document.querySelectorAll(".item");
const hasil = Array.from(nodes).map(el => el.textContent);

// Alternatif spread, hasilnya sama
const hasilSpread = [...document.querySelectorAll(".item")].map(el => el.textContent);

Array.from() dan spread sama-sama membuat array baru. Alternatif tanpa konversi adalah nodes.forEach() untuk aksi langsung atau loop for biasa bila hanya perlu iterasi sederhana.

Cara Mencegah Error Serupa

  • Cek tipe data sebelum map, misalnya console.log(Array.isArray(data)).
  • Pastikan selector diawali titik untuk class dan pagar untuk id.
  • Gunakan textContent untuk membaca teks, jangan innerHTML bila tidak perlu memasukkan HTML.

FAQ

Apakah QuerySelectorAll mengembalikan Array?

Tidak. Ia mengembalikan NodeList yang mirip array tetapi tanpa method map.

Kapan memakai Array.from dibanding spread?

Pakai Array.from bila perlu mapping langsung lewat argumen kedua, pakai spread untuk konversi paling ringkas.

Apakah NodeList kosong tetap error saat map?

Tidak, setelah dikonversi ia menjadi array kosong dan map mengembalikan array kosong.

Artikel Terkait