Penjelasan Loop for…in JavaScript: Sintaks, Kasus Penggunaan, dan Praktik Terbaik

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. Pendahuluan｜Masalah Apa yang Dapat Diselesaikan oleh Pernyataan for…in?

JavaScript adalah salah satu bahasa pemrograman yang paling banyak digunakan dalam pengembangan web. Di antara banyak fiturnya, perulangan sangat penting untuk memproses data secara berulang. Khususnya, pernyataan for…in berguna untuk mengiterasi properti sebuah objek.

Tujuan Artikel Ini

Dalam artikel ini, kami akan membahas poin‑poin berikut secara detail:

• Sintaks dasar dan penggunaan loop for…in JavaScript
• Peringatan saat menggunakannya dengan array
• Perbedaan dibandingkan dengan konstruksi loop lainnya (for…of dan forEach)
• Kesalahan umum dan cara memperbaikinya

Apa yang Akan Anda Pelajari

• Cara memproses properti objek dan elemen array secara efisien
• Peringatan dan penggunaan aman pernyataan for…in
• Contoh kode praktis dan perbandingan kinerja

Artikel ini disusun untuk memberikan pengetahuan berguna bagi pemula maupun pengembang JavaScript menengah. Mari kita mulai pada bagian berikutnya dengan dasar‑dasar pernyataan for…in.

2. Apa itu Pernyataan for…in JavaScript?【Penjelasan Dasar】

Dalam JavaScript, pernyataan for…in digunakan untuk mengiterasi properti sebuah objek. Sintaks ini sangat cocok untuk objek, memungkinkan Anda memproses setiap nama properti (kunci) satu per satu.

Sintaks Dasar

Berikut adalah sintaks dasar dari loop for…in:

for (variable in object) {
  // Repeated processing
}

Penjelasan Parameter:

• variable : Menyimpan nama properti saat ini (kunci).
• object : Objek target yang ingin Anda iterasi.

Contoh Penggunaan: Menenumerasi Properti Objek

const person = {
  name: "Taro",
  age: 25,
  city: "Tokyo"
};

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

Output:

name: Taro
age: 25
city: Tokyo

Peringatan: Urutan Properti yang Dinenumerasi

Urutan properti dalam loop for…in tidak dijamin. Menurut spesifikasi JavaScript, urutan mungkin tidak sesuai dengan urutan penyisipan ketika kunci berupa string. Jika Anda memerlukan urutan yang ketat, gunakan alternatif seperti Object.keys().

Ringkasan Fitur

1. Mudah mengambil kunci objek: Berguna saat mengakses nama properti secara dinamis.
2. Hanya properti yang enumerable yang ditargetkan: Properti non‑enumerable (enumerable: false) dikecualikan.
3. Properti yang diwarisi dari prototype juga dienumerasi: Hal ini dapat menimbulkan masalah, yang akan dijelaskan pada bagian berikutnya.

3. Array dan Pernyataan for…in｜Poin Penting yang Perlu Diperhatikan

Pernyataan for…in JavaScript dirancang untuk menenumerasi properti objek, tetapi juga dapat digunakan dengan array. Namun, ada beberapa peringatan saat menerapkannya pada array. Mari kita tinjau perilakunya dan jebakan‑jebakan secara detail.

Perilaku Dasar dengan Array

Pertimbangkan contoh berikut:

const fruits = ["Apple", "Banana", "Orange"];

for (const index in fruits) {
  console.log(index, fruits[index]);
}

Output:

0 Apple  
1 Banana  
2 Orange

Peringatan 1: Properti Prototype Mungkin Dinenumerasi

Array.prototype.newMethod = function () {
  return "New Method";
};

for (const index in fruits) {
  console.log(index, fruits[index]);
}

Output:

0 Apple  
1 Banana  
2 Orange  
newMethod undefined

Solusi:

for (const index in fruits) {
  if (fruits.hasOwnProperty(index)) {
    console.log(index, fruits[index]);
  }
}

Peringatan 2: Urutan Tidak Dijamin

const data = [];
data[10] = "Apple";
data[1] = "Banana";
data[5] = "Orange";

for (const index in data) {
  console.log(index, data[index]);
}

Output:

1 Banana  
5 Orange  
10 Apple

Peringatan 3: Indeks Diperlakukan sebagai String

const numbers = [10, 20, 30];
for (const index in numbers) {
  console.log(typeof index); // "string"
}

Solusi:

for (const index in numbers) {
  const numIndex = parseInt(index, 10);
  console.log(numIndex, numbers[numIndex]);
}

Ringkasan

• Pernyataan for…in lebih cocok untuk objek daripada array.
• Untuk urutan dan penanganan indeks numerik, for…of atau loop for tradisional disarankan.

4. Perbedaan antara for…in dan for…of【Tabel Perbandingan】

Dalam JavaScript, baik for…in maupun for…of tersedia untuk perulangan, tetapi kasus penggunaan dan perilakunya berbeda.

Perbandingan Sintaks

for…in:

const obj = { a: 1, b: 2, c: 3 };
for (const key in obj) {
  console.log(key); // Retrieves keys
}

for…of:

const arr = [10, 20, 30];
for (const value of arr) {
  console.log(value); // Retrieves values
}

Tabel Perbandingan

Contoh Praktis｜Penanganan Array

const arr = ['a', 'b', 'c'];

// for...in
for (const index in arr) {
  console.log(index); // Output: 0, 1, 2
}

// for...of
for (const value of arr) {
  console.log(value); // Output: 'a', 'b', 'c'
}

Ringkasan

• for…in: Terbaik untuk menangani kunci objek.
• for…of: Terbaik untuk array dan objek yang dapat diiterasi.

5. Penggunaan Praktis: Aplikasi dan Praktik Terbaik Pernyataan for…in

Di sini, kami akan mengeksplorasi aplikasi praktis dari pernyataan for…in JavaScript dan memperkenalkan praktik terbaik yang berguna dalam pengembangan dunia nyata.

1. Contoh 1｜Menyaring Properti Objek

const user = {
  name: "Tanaka",
  age: 30,
  email: "tanaka@example.com",
  password: "secret123"
};

const publicData = {};
for (const key in user) {
  if (key !== "password") {
    publicData[key] = user[key];
  }
}
console.log(publicData);

Output:

{ name: 'Tanaka', age: 30, email: 'tanaka@example.com' }

2. Contoh 2｜Memproses Objek Bersarang

const data = {
  user: {
    name: "Sato",
    info: {
      age: 28,
      city: "Osaka"
    }
  }
};

function printNested(obj) {
  for (const key in obj) {
    if (typeof obj[key] === "object") {
      printNested(obj[key]);
    } else {
      console.log(`${key}: ${obj[key]}`);
    }
  }
}

printNested(data);

Output:

name: Sato
age: 28
city: Osaka

3. Contoh 3｜Praktik Terbaik｜Mengecualikan Properti Prototipe

const obj = { a: 1, b: 2 };
Object.prototype.c = 3;

for (const key in obj) {
  if (obj.hasOwnProperty(key)) {
    console.log(`${key}: ${obj[key]}`);
  }
}

Output:

a: 1
b: 2

Ringkasan

• Kami memperkenalkan kasus penggunaan yang tepat untuk menyaring dan menangani objek bersarang.
• Gunakan hasOwnProperty() untuk mencegah warisan prototipe yang tidak diinginkan terenumerasi.

6. Kesalahan Umum dan Solusi dengan for…in【Ramah Pemula】

1. Contoh Kesalahan 1｜Properti Prototipe Terenumerasi

const obj = { a: 1, b: 2 };
Object.prototype.c = 3;

for (const key in obj) {
  console.log(key, obj[key]);
}

Output:

a 1
b 2
c 3

Solusi:

for (const key in obj) {
  if (obj.hasOwnProperty(key)) {
    console.log(key, obj[key]);
  }
}

2. Contoh Kesalahan 2｜Menggunakan for…in dengan Array

const arr = [10, 20, 30];
Array.prototype.extra = "Additional Data";

for (const index in arr) {
  console.log(index, arr[index]);
}

Output:

0 10
1 20
2 30
extra undefined

Solusi:

for (const value of arr) {
  console.log(value);
}

3. Contoh Kesalahan 3｜Menangani Nilai Undefined

const obj = { a: 1, b: undefined, c: 3 };

for (const key in obj) {
  console.log(key, obj[key]);
}

Solusi:

for (const key in obj) {
  const value = obj[key] ?? "Default Value";
  console.log(key, value);
}

Ringkasan

• Masalah Properti Prototipe: Gunakan hasOwnProperty().
• Penanganan Array: Lebih baik gunakan for…of atau forEach daripada for…in.
• Nilai Undefined: Tetapkan nilai default dengan operator nullish coalescing ( ?? ).

7. Pengujian Kinerja dan Alternatif untuk for…in

1. Perbandingan Kinerja

pernyataan for…in:

const obj = { a: 1, b: 2, c: 3 };
console.time("for...in");
for (const key in obj) {
  console.log(key, obj[key]);
}
console.timeEnd("for...in");

Object.keys():

console.time("Object.keys");
Object.keys(obj).forEach(key => {
  console.log(key, obj[key]);
});
console.timeEnd("Object.keys");

2. Hasil Perbandingan Contoh

for...in: 0.015ms
Object.keys: 0.005ms

3. Alternatif yang Direkomendasikan

• Penanganan Objek: Lebih baik gunakan Object.keys() untuk kinerja dan keamanan yang lebih baik.
• Penanganan Array: Gunakan for…of atau forEach untuk iterasi yang lebih cepat dan lebih dapat diandalkan.

Ringkasan

• Pernyataan for…in nyaman digunakan, tetapi pilih konstruksi loop yang paling tepat dengan mempertimbangkan kinerja dan keamanan.

8. Kesimpulan｜Memahami Pernyataan for…in dan Langkah Selanjutnya

1. Poin Penting

1. Sintaks Dasar dan Penggunaan for…in:

• Digunakan untuk mengiterasi nama properti objek.
• Khusus untuk kunci objek, bukan array.

1. Peringatan Saat Menggunakan dengan Array:

• Urutan tidak dijamin, dan properti rantai prototipe dapat termasuk.
• Untuk array, gunakan for…of atau forEach() sebagai gantinya.

1. Perbedaan antara for…in dan for…of:

• for…in: Mengiterasi nama properti (kunci).
• for…of: Mengiterasi nilai sebenarnya dari array atau objek yang dapat diiterasi.

1. Aplikasi Praktis dan Praktik Terbaik:

• Menangani objek bersarang dengan rekursi.
• Mengecualikan pewarisan prototipe dengan hasOwnProperty().
• Meningkatkan kinerja dan keamanan dengan Object.keys() atau Object.entries().

1. Optimasi Kinerja:

• Object.keys() + forEach() direkomendasikan untuk jaminan urutan dan efisiensi, menjadikannya alternatif yang lebih aman dibandingkan for…in.

2. Jawaban atas Pertanyaan Umum

Q1. Haruskah saya menghindari penggunaan pernyataan for…in?

• A: Ini cocok untuk enumerasi properti objek, tetapi untuk array atau tugas yang kritis terhadap kinerja, for…of atau Object.keys() lebih aman dan lebih efisien.

Q2. Apakah properti prototipe selalu akan dienumerasi?

• A: Ya. Menurut spesifikasi, properti prototipe yang diwarisi juga termasuk. Gunakan hasOwnProperty() untuk menghindari masalah ini.

Q3. Apa loop terbaik tergantung pada array vs. objek?

• Objek: Gunakan for…in atau Object.keys().
• Array: Gunakan for…of atau forEach().

3. Langkah Selanjutnya｜Apa yang Harus Dipelajari Selanjutnya

1. Iterables dan Objek Iterable:

• Struktur data seperti Map, Set, WeakMap, WeakSet dan loop untuk menanganinya.

1. Fungsi Tingkat Tinggi untuk Penanganan Data:

• Penggunaan praktis map(), filter(), reduce().

1. Teknik Lanjutan untuk Objek dan Array:

• Menggunakan Object.values() dan Object.entries() untuk pemrosesan data yang efisien.

1. Fitur JavaScript Modern:

• Fitur ES6+ seperti spread operator dan destructuring untuk kode yang lebih bersih.

1. Pemrograman Asinkron dengan Promise/Async/Await:

• Terapkan loop dalam pemrosesan waktu nyata seperti pengambilan data dan penanganan objek dinamis.

4. Pemikiran Akhir｜Menguasai Loop JavaScript

Dalam artikel ini, kami fokus pada pernyataan for…in JavaScript, mencakup penggunaan dasarnya, aplikasi lanjutan, jebakan, dan alternatifnya. Poin terpenting:

• for…in ideal untuk enumerasi properti objek, tetapi untuk array atau tugas yang berfokus pada kinerja, pendekatan lain harus digunakan.
• Selalu ikuti praktik terbaik dan langkah keamanan untuk menghindari kesalahan serta perilaku tak terduga dalam kode Anda.

Langkah Selanjutnya! Perdalam pemahaman Anda tentang metode alternatif dan fungsi tingkat tinggi untuk meningkatkan keterampilan JavaScript Anda ke tingkat berikutnya.