Apa Perbedaan Antara Perulangan For Dan Perulangan For..In Dalam JavaScript?

Perbedaan mendasar antara perulangan for dan for..in dalam JavaScript terletak pada apa yang diiterasi dan struktur data yang cocok digunakannya:

• for: Mengulang berdasarkan indeks numerik dan penghitung (counter). Sangat ideal untuk struktur data berurutan seperti Array.
• for..in: Mengulang berdasarkan kunci (key) atau properti dari sebuah Object.

Perulangan for menggunakan tiga komponen utama: inisialisasi awal, kondisi batas, dan perubahan nilai (biasanya increment atau decrement). Perulangan ini mengontrol jumlah iterasi secara pasti menggunakan angka indeks. Kapan digunakan: Ketika bekerja dengan Array, atau saat butuh kontrol penuh terhadap langkah iterasi (misalnya melompati 2 angka atau berjalan mundur).

Kode For

const buah = ["Apel", "Mangga", "Jeruk"];

// Menggunakan indeks (i) yang berupa angka untuk mengakses elemen array
for (let i = 0; i < buah.length; i++) {
  console.log(`Indeks ke-${i}: ${buah[i]}`);
}

// Output:
// Indeks ke-0: Apel
// Indeks ke-1: Mangga
// Indeks ke-2: Jeruk

Perulangan for..in dirancang secara khusus untuk menjelajahi kunci (key) atau nama properti di dalam sebuah Object. Hindari menggunakan for..in pada Array. Jika digunakan pada array, for..in tidak menghasilkan angka indeks, melainkan indeks berjenis string ("0", "1", dst.), dan akan mengiterasi properti tambahan lain jika array tersebut dimodifikasi. Kapan digunakan: Ketika ingin mengekstrak seluruh nama kunci/properti dari sebuah Object.

Kode For..In

const pengguna = {
  nama: "Budi",
  umur: 25,
  pekerjaan: "Developer"
};

// Mengiterasi setiap kunci (key) di dalam objek
for (const kunci in pengguna) {
  console.log(`${kunci}: ${pengguna[kunci]}`);
}

// Output:
// nama: Budi
// umur: 25
// pekerjaan: Developer