for...in JavaScript: Cara Praktis Mengulang Objek

Saat membuat aplikasi kadang kita perlu melakukan perulangan pada objek seperti halnya array, nah kita bisa menggunakan for...in untuk melakukan hal tersebut.

Mirip seperti for...of yang dibuat untuk mengulang array, for...in dibuat khusus untuk mengulang objek.

Tapi perilakunya sedikit berbeda dengan perulangan array.

Mari kita pelajari sintaks dan contoh penggunaannya agar dapat dipahami lebih mudah.

Berikut topik yang akan kita pelajari terkait for...in.

1. Sintaks
2. Contoh
3. Perilaku Properti Saat Dimodifikasi
4. Properti Symbol Tidak Masuk Dalam Iterasi

Sintaks

for (variabel in objek) {
  statement;
}

Keterangan:

• variabel: variabel yang akan diinisialisasi dengan properti objek pada setiap iterasi.
• objek: objek target yang ingin dilakukan perulangan.
• statement: statement atau kode yang akan dieksekusi pada setiap iterasi.

Contoh

Perhatikan contoh kode bawah, variabel key yang dideklarasikan di dalam kurung kurawal diinisialisasi dengan nama properti atau kunci objek pada setiap iterasi.

const mahasiswa = {
  nama: 'ucup',
  umur: 20,
  jurusan: 'teknik informatika',
};

for (const key in mahasiswa) {
  console.log(`${key} = ${mahasiswa[key]}`);
}

/* output:
nama = ucup
umur = 20
jurusan = teknik informatika
*/

Perilaku Properti Saat Dimodifikasi

Perulangan for...in mengulang properti objek dalam urutan arbiter.

Jadi, tidak ada jaminan apakah properti yang ditambahkan selama perulangan akan masuk dalam iterasi...

...apakah properti yang diubah akan masuk dalam perulangan, atau apakah properti yang dihapus akan diulang sebelum dihapus.

Mari kita gunakan contoh berikut.

const mahasiswa = {
  nama: 'ucup',
  umur: 20,
  jurusan: 'teknik informatika',
};

for (const key in mahasiswa) {
  mahasiswa.jenisKelamin = 'laki-laki';
  console.log(`${key} = ${mahasiswa[key]}`);
}

/* output:
nama = ucup
umur = 20
jurusan = teknik informatika
*/

Lihat kode di atas, kita menambahkan properti baru bernama jenisKelamin, tapi properti itu tidak masuk dalam iterasi.

Oleh karena itu, lebih baik tidak menambahkan, mengubah, atau menghapus properti dari objek selama iterasi, selain properti yang sedang diiterasi.

Properti Symbol Tidak Masuk Dalam Iterasi

Hati-hati saat Anda menangani objek yang memiliki properti simbol, properti ini tidak masuk dalam iterasi.

Mari kita lihat contoh berikut.

const jenisKelamin = Symbol();
const mahasiswa = {
  nama: 'ucup',
  umur: 20,
  jurusan: 'teknik informatika',
  [jenisKelamin]: 'laki-laki',
};

for (const key in mahasiswa) {
  console.log(`${key} = ${mahasiswa[key]}`);
}

/* output:
nama = ucup
umur = 20
jurusan = teknik informatika
*/

Perhatikan kode di atas, properti dengan key Symbol tidak masuk dalam iterasi, oleh karena itu tidak ditampilkan ke console.