for...of, for...in & forEach

for...of, for...in & forEach 🔄

JavaScript menyediakan beberapa cara modern untuk melakukan iterasi yang lebih ekspresif dan mudah dibaca daripada for tradisional.

for...of — Iterasi Nilai

for...of digunakan untuk mengiterasi nilai dari objek yang bisa diiterasi (array, string, Map, Set, dll):

// Iterasi array
let buah = ['apel', 'mangga', 'jeruk'];
for (let item of buah) {
  console.log(item); // apel, mangga, jeruk
}

// Iterasi string — karakter per karakter
let kata = 'Halo';
for (let huruf of kata) {
  console.log(huruf); // H, a, l, o
}

// Iterasi dengan index menggunakan entries()
for (let [index, nilai] of buah.entries()) {
  console.log(`${index}: ${nilai}`);
  // 0: apel
  // 1: mangga
  // 2: jeruk
}

for...in — Iterasi Properti Objek

for...in digunakan untuk mengiterasi nama properti (key) dari sebuah objek:

let orang = {
  nama: 'Budi',
  umur: 25,
  kota: 'Jakarta'
};

for (let key in orang) {
  console.log(`${key}: ${orang[key]}`);
}
// nama: Budi
// umur: 25
// kota: Jakarta

// Gunakan hasOwnProperty() untuk filter properti sendiri saja
for (let key in orang) {
  if (orang.hasOwnProperty(key)) {
    console.log(key); // hanya properti milik orang sendiri
  }
}

⚠️ Hindari menggunakan for...in untuk array — gunakan for...of atau forEach sebagai gantinya, karena for...in juga mengiterasi properti yang diwariskan dari prototype.

forEach — Iterasi Array dengan Callback

Metode array yang menerima fungsi callback untuk setiap elemen:

let angka = [1, 2, 3, 4, 5];

// Dengan function biasa
angka.forEach(function(nilai) {
  console.log(nilai);
});

// Dengan arrow function — lebih ringkas
angka.forEach(nilai => console.log(nilai));

// Callback menerima tiga argumen: nilai, index, array asli
angka.forEach((nilai, index) => {
  console.log(`Index ${index}: ${nilai}`);
});

// Contoh nyata
let produk = [
  { nama: 'Laptop', harga: 8000000 },
  { nama: 'Mouse', harga: 150000 },
  { nama: 'Keyboard', harga: 350000 },
];

produk.forEach(item => {
  console.log(`${item.nama}: Rp ${item.harga.toLocaleString('id-ID')}`);
});
// Laptop: Rp 8.000.000
// Mouse: Rp 150.000
// Keyboard: Rp 350.000

Perbandingan Metode Iterasi

let buah = ['apel', 'mangga', 'jeruk'];

// for klasik — verbose tapi fleksibel penuh
for (let i = 0; i < buah.length; i++) {
  console.log(buah[i]);
}

// for...of — bersih, untuk nilai
for (let item of buah) {
  console.log(item);
}

// forEach — method array, tidak bisa break
buah.forEach(item => console.log(item));

💡 Tips: Untuk iterasi array sederhana, gunakan forEach atau for...of — keduanya lebih bersih dari for tradisional. Gunakan for klasik hanya jika kamu perlu mengontrol index secara kompleks atau membutuhkan break/continue. Untuk objek, gunakan for...in atau Object.keys() / Object.values() / Object.entries(). 🎯