for...in vs for...of

Analogi: Membaca Daftar Belanja vs Membaca Label Gudang

Ada dua cara memeriksa isi gudang. Cara pertama: berjalan menyusuri rak dan mengambil setiap barangnya satu per satu, kamu peduli pada barangnya. Cara kedua: berjalan menyusuri rak sambil mencatat label setiap kotak ("kotak A berisi paku, kotak B berisi cat"), kamu peduli pada namanya lalu membuka isinya lewat nama itu.

for...of adalah cara pertama: ia memberimu langsung nilainya dari setiap item array. for...in adalah cara kedua: ia memberimu key (nama properti) dari setiap field object, lalu kamu mengambil nilainya lewat key itu. Keduanya modern, keduanya bersih, tapi tertukar memakai mereka adalah sumber bug yang membingungkan.

Kenapa Konsep Ini Ada?

Loop for klasik dengan index itu powerful tapi berisik: for (let i = 0; i < arr.length; i++) memaksamu mengurus counter padahal yang kamu mau hanyalah "untuk setiap item, lakukan X". Masalah yang dipecahkan kedua loop modern ini ada tiga. Pertama, menghilangkan boilerplate counter saat index tidak dibutuhkan. Kedua, mencegah error off-by-one karena tidak ada lagi < vs <= yang harus dipikirkan. Ketiga, mengekspresikan maksud dengan jelas: for...of berkata "aku butuh nilainya", for...in berkata "aku butuh nama field-nya".

Aturan pakainya tegas dan wajib dihafal: for...of untuk array (dan string), menghasilkan nilai; for...in untuk object, menghasilkan key. Tabelnya sederhana, tapi menukarnya menghasilkan bug yang diam-diam salah.

Contoh Kode

Contoh 1: for...of untuk nilai array

const buah = ["apel", "mangga", "jeruk"];

// Tanpa index, langsung nilainya
for (const b of buah) {
  console.log("Saya suka " + b);
}
// Saya suka apel, Saya suka mangga, Saya suka jeruk

// Juga bisa untuk string (per karakter)
for (const huruf of "halo") {
  console.log(huruf); // h, a, l, o
}

Bandingkan dengan for klasik: tidak ada i, tidak ada .length, tidak ada buah[i]. Untuk kasus "proses setiap item", ini adalah cara paling bersih dan paling sulit untuk salah.

Contoh 2: for...in untuk key object (realistis)

const siswa = {
  nama: "Budi",
  umur: 17,
  kelas: "XII",
};

// for...in memberi KEY, nilai diambil lewat key
for (const key in siswa) {
  console.log(key + ": " + siswa[key]);
}
// nama: Budi, umur: 17, kelas: XII

// Contoh realistis: cetak profil apa pun tanpa tahu field-nya
function cetakProfil(profil) {
  console.log("=== PROFIL ===");
  for (const key in profil) {
    console.log(key + " = " + profil[key]);
  }
}
cetakProfil({ nama: "Ani", kota: "Bandung", member: true });

Contoh kedua ini powerful: fungsi cetakProfil bisa mencetak object apa pun tanpa tahu dulu field-nya apa. Inilah cara kerja kode yang generik, misalnya saat menampilkan data profil dari API yang strukturnya bisa berbeda-beda. for...in membuatmu tidak perlu menghafal nama field satu per satu.

Butuh index sekaligus nilai di array? Ada jalan tengah yang elegan: for (const [i, b] of buah.entries()) memberimu keduanya, index i dan nilai b.

Kesalahan Umum Pemula

1. Memakai for...in pada array. Contoh yang salah:

const buah = ["apel", "mangga"];
for (const x in buah) {
  console.log(x); // "0", "1" -> STRING index, bukan nilai!
}

Yang benar: for...in pada array memberi index sebagai string (plus bisa ikut properti tak terduga). Untuk array selalu pakai for...of (nilai) atau for klasik (butuh index angka).

2. Memakai for...of langsung pada object. Contoh yang salah: for (const x of siswa) menghasilkan error siswa is not iterable. Yang benar: object tidak bisa di-of langsung. Pakai for...in untuk key-nya, atau Object.values(siswa) / Object.entries(siswa) kalau butuh versi array.

3. Mengira urutan for...in selalu rapi. Contoh yang salah: mengandalkan urutan key object untuk logika berurutan. Yang benar: untuk data berurutan pakai array; object tidak menjanjikan urutan yang bisa diandalkan untuk logika (meski praktiknya sering berurutan untuk key string).

4. Mengubah object saat diiterasi for...in. Contoh yang salah: menambah/menghapus key di dalam loop yang sama, perilakunya tidak terdefinisi dengan rapi. Yang benar: kumpulkan perubahan dulu, terapkan setelah loop selesai, atau iterasi dari salinan key: for (const key of Object.keys(obj)).

Ringkasan

Hafalkan tabelnya: for...of untuk array menghasilkan nilai, for...in untuk object menghasilkan key. Memakai yang tepat membuat kode bersih tanpa counter dan bebas off-by-one. Jangan tertukar: for...in pada array memberi index string yang menyesatkan, dan for...of tidak bisa langsung dipakai pada object. Pilih loop sesuai bentuk datamu.