Pernyataan for…in JavaScript Dijelaskan: Sintaks, Jebakan, 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, pemrosesan loop sangat penting untuk menangani data secara berulang.

Secara khusus, pernyataan for…in berguna ketika mengiterasi properti‑properti sebuah objek.

Tujuan Artikel Ini

Artikel ini menjelaskan poin‑poin berikut secara mendetail:

• Sintaks dasar dan penggunaan pernyataan for…in di JavaScript
• Pertimbangan penting saat menggunakannya dengan array
• Perbedaan dibandingkan konstruksi loop lain seperti for…of dan forEach
• Kesalahan umum dan solusi‑solusinya

Apa yang Akan Anda Pelajari dari Artikel Ini

• Cara memproses properti objek dan elemen array secara efisien
• Langkah‑langkah pencegahan dan pola penggunaan yang aman untuk pernyataan for…in
• Contoh kode praktis serta perbandingan kinerja

Artikel ini disusun untuk membantu pemula hingga pengembang JavaScript menengah memperoleh pengetahuan praktis yang dapat diterapkan pada proyek dunia nyata.

Sekarang, mari kita lihat lebih dekat dasar‑dasar pernyataan for…in pada bagian berikutnya.

2. Apa Itu Pernyataan for…in di JavaScript? [Basic Explanation]

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

Sintaks Dasar

Berikut adalah sintaks dasar pernyataan for…in.

for (variable in object) {
  // 반복 처리
}

Deskripsi Parameter:

• variable : Menyimpan nama properti (key) yang sedang diproses.
• object : Objek yang ingin Anda iterasi.

Contoh: Mengenumerasi 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

Catatan Penting: Urutan Properti yang Di‑enumerasi

Dengan pernyataan for…in, urutan properti tidak dijamin. Menurut spesifikasi JavaScript, ketika kunci berupa string, mereka tidak selalu diproses dalam urutan penambahannya. Jika Anda memerlukan urutan yang ketat, gunakan pendekatan lain seperti Object.keys().

Karakteristik Utama

1. Akses mudah ke kunci objek: Berguna ketika Anda perlu mengambil nama properti secara dinamis dari sebuah objek.
2. Hanya properti enumerable yang disertakan: Properti non‑enumerable (enumerable: false) tidak akan muncul.
3. Properti yang diwarisi dari prototype juga di‑enumerasi: Hal ini dapat menimbulkan masalah, yang akan dijelaskan secara detail pada bagian berikutnya.

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

Pernyataan for…in di JavaScript dirancang untuk mengenumerasi properti objek, namun dapat juga digunakan pada array. Namun, ketika diterapkan pada array, terdapat beberapa peringatan penting. Bagian ini menjelaskan perilakunya serta potensi 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 Ter‑enumerasi

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.
• Ketika urutan atau indeks numerik penting, for…of atau loop for standar disarankan.

4. Perbedaan antara Pernyataan for…in dan for…of [With Comparison Table]

Dalam JavaScript, baik pernyataan for…in maupun for…of digunakan untuk perulangan, tetapi tujuan dan perilakunya berbeda secara signifikan.

Perbandingan Sintaks Dasar

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｜Perbedaan dalam Pemrosesan 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: Paling cocok untuk memproses kunci objek.
• for…of: Ideal untuk array dan objek yang dapat diiterasi.

5. Contoh Praktis: Penggunaan Lanjutan dan Praktik Terbaik untuk Pernyataan for…in

Bagian ini memperkenalkan contoh lanjutan menggunakan pernyataan for…in JavaScript, beserta 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. 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 efektif untuk penyaringan objek dan pemrosesan objek bersarang.
• Gunakan hasOwnProperty() untuk menghindari masalah yang disebabkan oleh pewarisan prototipe.

6. Kesalahan Umum dengan Pernyataan for…in dan Cara Memperbaikinya [Beginner-Friendly]

1. Contoh Kesalahan 1｜Properti Prototipe Diiterasi

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 prototype: Gunakan hasOwnProperty().
• Pemrosesan array: Lebih baik menggunakan for…of atau forEach.
• Penanganan nilai undefined: Tetapkan nilai default.

7. Pengujian Kinerja Pernyataan for…in dan Pendekatan Alternatif

1. Perbandingan Kinerja

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. Contoh Hasil Perbandingan

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

3. Pendekatan yang Direkomendasikan

• Pemrosesan objek: Object.keys() direkomendasikan.
• Pemrosesan array: for…of atau forEach lebih cepat dan lebih aman.

Ringkasan

• Pernyataan for…in memang praktis, tetapi Anda harus memilih sintaks yang tepat berdasarkan kebutuhan kinerja dan keamanan.

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

1. Hal Utama yang Dapat Diambil dari Artikel Ini

1. Sintaks dasar dan tujuan pernyataan for…in:

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

1. Pertimbangan penting saat digunakan dengan array:

• Urutan tidak dijamin, dan properti rantai prototype dapat terenumerasi.
• Untuk pemrosesan array, for…of atau forEach() direkomendasikan.

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

• for…in: Mengenumerasi nama properti (kunci).
• for…of: Memproses nilai array dan objek yang dapat diiterasi secara langsung.

1. Penggunaan lanjutan dan praktik terbaik:

• Memproses objek bersarang menggunakan rekursi.
• Mengecualikan warisan prototype dengan menggunakan hasOwnProperty().
• Meningkatkan kinerja dan keamanan dengan alternatif seperti Object.keys() dan Object.entries().

1. Optimasi kinerja:

• Object.keys() + forEach() direkomendasikan sebagai alternatif for…in karena menjamin urutan dan menawarkan kinerja yang lebih baik.

2. Jawaban atas Pertanyaan Umum

Q1. Haruskah pernyataan for…in dihindari?

• A: Pernyataan ini cocok untuk mengenumerasi properti objek, tetapi untuk array atau tugas yang kritis terhadap kinerja, pendekatan lain seperti for…of atau Object.keys() lebih aman dan lebih efisien.

Q2. Apakah masalah enumerasi properti prototype selalu terjadi?

• A: Ya. Sesuai spesifikasi, properti yang diwarisi dari prototype termasuk dalam enumerasi. Untuk menghindarinya, Anda harus menggunakan hasOwnProperty().

Q3. Loop mana yang terbaik tergantung pada array vs objek?

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

3. Langkah Selanjutnya｜Topik untuk Dipelajari Lebih Lanjut

1. Iterables dan objek yang dapat diiterasi:

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

1. Manipulasi data dengan fungsi tingkat tinggi:

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

1. Teknik lanjutan untuk objek dan array:

• Pemrosesan data menggunakan Object.values() dan Object.entries().

1. Fitur JavaScript modern:

• Sintaks ringkas dengan fitur ES6+ seperti operator spread dan destrukturisasi.

1. Pemrosesan asinkron dengan Promise / Async / Await:

• Menerapkan konsep ini pada pemrosesan real‑time yang melibatkan pengambilan data dan manipulasi objek dinamis.

4. Kesimpulan｜Menguasai Pemrosesan Loop JavaScript

Artikel ini berfokus pada pernyataan for…in di JavaScript, mencakup segala hal mulai dari penggunaan dasar hingga contoh lanjutan, jebakan, dan pendekatan alternatif.

Poin Terpenting:

• Pernyataan for…in sangat cocok untuk mengiterasi properti objek, tetapi pendekatan alternatif harus dipilih untuk pemrosesan array atau skenario kritis kinerja.
• Untuk mencegah kesalahan dan perilaku tak terduga, sangat penting untuk selalu mengikuti praktik terbaik dan langkah-langkah keamanan saat menulis kode.

Lanjutkan ke Langkah Berikutnya!
Perdalam pemahaman Anda tentang pendekatan alternatif dan fungsi tingkat lebih tinggi yang diperkenalkan dalam artikel ini untuk membawa keterampilan JavaScript Anda ke tingkat berikutnya.