Penjelasan Loop for…of JavaScript: Sintaks, Contoh, dan Praktik Terbaik

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

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

1. Pengenalan

Saat bekerja dengan data di JavaScript, pengulangan sangat penting. Untuk memproses data seperti array dan string secara berurutan, JavaScript menyediakan beberapa sintaks loop. Di antaranya, pernyataan for…of menonjol sebagai opsi yang sederhana namun kuat.

Dalam artikel ini, kami akan menjelaskan pernyataan for…of JavaScript secara detail—dari dasar hingga kasus penggunaan yang lebih maju. Kami akan mulai dengan contoh yang ramah pemula dan kemudian membahas pola praktis yang digunakan dalam pengembangan menengah dan dunia nyata. Setelah membaca ini, Anda akan dapat menggunakan pernyataan for…of dengan percaya diri tanpa tersangkut saat menulis loop.

2. Apa Itu Pernyataan for…of JavaScript? Penggunaan Dasar

2.1 Gambaran Umum Pernyataan for…of

Pernyataan for…of JavaScript adalah sintaks yang memungkinkan Anda melooping melalui objek iterable dengan cara yang bersih dan sederhana. Ini dirancang untuk menangani struktur data seperti array, string, Map, dan Set secara efisien.

2.2 Sintaks Dasar Pernyataan for…of

Gunakan sintaks berikut untuk memproses setiap elemen dari objek iterable secara berurutan.

for (const element of arrayOrObject) {
  // 반복 처리
}

Sintaks ini berguna ketika Anda ingin dengan mudah mengambil setiap elemen dari array atau string.

2.3 Contoh Kode Praktis

Contoh 1: Output elemen array secara berurutan

const fruits = ['Apple', 'Banana', 'Orange'];
for (const fruit of fruits) {
  console.log(fruit);
}

Keluaran:

Apple  
Banana  
Orange

Contoh 2: Output setiap karakter dari string

const word = 'JavaScript';
for (const char of word) {
  console.log(char);
}

Keluaran:

J  
a  
v  
a  
S  
c  
r  
i  
p  
t

2.4 Jenis Data yang Didukung

Pernyataan for…of dapat digunakan dengan objek iterable berikut:

1. Array (Array)
2. String (String)
3. Objek Map
4. Objek Set
5. Objek arguments (objek yang diteruskan sebagai argumen fungsi)
6. Objek NodeList (koleksi elemen HTML)

Catatan: Anda tidak dapat menerapkannya langsung ke literal objek (kami akan menjelaskan solusi sementara nanti).

3. Perbedaan dan Perbandingan dengan Sintaks Loop Lain

3.1 Perbedaan Antara for…of dan for…in

Contoh: Menggunakan for…in

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

Catatan Penting:
Karena for…in juga dapat mendaftarkan properti dari rantai prototipe, Anda harus berhati-hati—terutama saat melooping melalui objek.

3.2 Perbedaan Antara for…of dan forEach

Contoh: Menggunakan forEach

const arr = [1, 2, 3];
arr.forEach(num => {
  console.log(num);
});

Catatan Penting:
Karena forEach tidak dapat menghentikan loop lebih awal, pernyataan for…of direkomendasikan ketika alur kontrol penting.

4. Contoh Praktis dan Teknik Lanjutan

4.1 Memfilter Array

Contoh berikut mengoutput hanya angka genap.

const numbers = [1, 2, 3, 4, 5];
for (const num of numbers) {
  if (num % 2 === 0) console.log(num); // Output only even numbers
}

Keluaran:

2  
4

4.2 Mendapatkan Kunci dan Nilai dari Map

Contoh ini menunjukkan cara mengambil kunci dan nilai menggunakan objek Map.

const map = new Map([
  ['name', 'Taro'],
  ['age', 25]
]);
for (const [key, value] of map) {
  console.log(`${key}: ${value}`);
}

Keluaran:

name: Taro  
age: 25

4.3 Menggabungkan dengan Pemrosesan Asinkron

Berikut adalah contoh penanganan operasi asinkron dengan pernyataan for…of.

const urls = ['url1', 'url2', 'url3'];

async function fetchData() {
  for (const url of urls) {
    const response = await fetch(url);
    const data = await response.json();
    console.log(data);
  }
}
fetchData();

Dalam contoh ini, setiap permintaan API dieksekusi secara berurutan, sehingga Anda dapat mengambil data sambil mempertahankan urutan eksekusi.

5. Catatan dan Pemecahan Masalah

5.1 Saat Anda Mendapatkan Kesalahan dengan Objek

Pernyataan for…of tidak dapat digunakan dengan literal objek. Sebagai gantinya, gunakan Object.entries().

Contoh: Memproses dengan Object.entries()

const obj = { a: 1, b: 2 };
for (const [key, value] of Object.entries(obj)) {
  console.log(key, value);
}

Output:

a 1  
b 2

Dengan pendekatan ini, Anda dapat dengan efisien mengiterasi kunci dan nilai sebuah objek.

5.2 Pertimbangan Kinerja

Pernyataan for…of umumnya memberikan kinerja yang cukup untuk kasus penggunaan tipikal, tetapi Anda harus berhati-hati saat bekerja dengan dataset yang besar. Jika diperlukan, pertimbangkan menggunakan loop for berbasis indeks atau loop while.

Contoh: Loop for berbasis indeks

const largeArray = Array(1000000).fill(1);
for (let i = 0; i < largeArray.length; i++) {
  // Performance-focused processing
  console.log(largeArray[i]);
}

5.3 Menambahkan Penanganan Kesalahan

Saat menggabungkan pemrosesan asynchronous dengan pernyataan for…of, pastikan untuk menyertakan penanganan kesalahan yang tepat.

Contoh: Menangani kesalahan dengan try…catch

const urls = ['url1', 'url2', 'url3'];

async function fetchData() {
  for (const url of urls) {
    try {
      const response = await fetch(url);
      const data = await response.json();
      console.log(data);
    } catch (error) {
      console.error('An error occurred:', error);
    }
  }
}
fetchData();

6. Bagian FAQ

Q1: Apakah pernyataan for…of berfungsi di semua browser?

A1:
Pernyataan for…of diperkenalkan pada ES6 (ECMAScript 2015). Pernyataan ini didukung di browser modern, tetapi tidak berfungsi di Internet Explorer.

Browser yang Didukung:

• Google Chrome 38 atau lebih baru
• Firefox 36 atau lebih baru
• Safari 7.1 atau lebih baru
• Edge 12 atau lebih baru

Jika Anda perlu mendukung browser yang lebih lama, gunakan Babel untuk mentranspilasi kode Anda atau pilih sintaks loop lain.

Q2: Bagaimana saya dapat mendapatkan indeks saat menggunakan for…of?

A2:
Dengan for…of, Anda tidak dapat mengakses indeks secara langsung, tetapi Anda dapat menggunakan metode entries() untuk mengambil sekaligus indeks dan nilai.

Contoh:

const fruits = ['Apple', 'Banana', 'Orange'];
for (const [index, fruit] of fruits.entries()) {
  console.log(index, fruit);
}

Output:

0 Apple  
1 Banana  
2 Orange

Q3: Bisakah saya menggunakan for…of dengan literal objek?

A3:
Tidak. Pernyataan for…of hanya untuk objek yang dapat diiterasi. Literal objek tidak dapat diiterasi, tetapi Anda dapat mengiterasi kunci dan nilai menggunakan Object.entries().

Contoh:

const obj = { a: 1, b: 2 };
for (const [key, value] of Object.entries(obj)) {
  console.log(key, value);
}

Output:

a 1  
b 2

Q4: Bisakah saya menggunakan for…of dengan operasi asynchronous?

A4:
Ya. Anda dapat menggunakannya bersama async/await.

Contoh:

const urls = ['url1', 'url2', 'url3'];

async function fetchData() {
  for (const url of urls) {
    const response = await fetch(url);
    const data = await response.json();
    console.log(data);
  }
}
fetchData();

Q5: Apa perbedaan antara for…of dan forEach?

A5:
Tabel di bawah merangkum perbedaannya.

7. Ringkasan

Dalam artikel ini, kami membahas poin-poin kunci berikut tentang pernyataan for…of JavaScript.

• Cara memahami sintaks dasar dan contoh penggunaan serta menerapkannya untuk mengiterasi array dan string
• Perbedaan dan kasus penggunaan terbaik dibandingkan dengan sintaks loop lain seperti for…in dan forEach
• Contoh lanjutan termasuk objek Map dan Set, serta menggabungkannya dengan pemrosesan asynchronous
• Bagian FAQ praktis untuk menyelesaikan pertanyaan umum

7.1 Manfaat Pernyataan for…of

• Sederhana dan sangat mudah dibaca
• Dukungan fleksibel untuk objek yang dapat diiterasi
• Kontrol loop yang mudah karena mendukung break dan continue

8. Apa yang Harus Dipelajari Selanjutnya

Setelah Anda menguasai pernyataan for…of, sebaiknya pelajari fitur-fitur berikut sebagai langkah selanjutnya.

1. Spread Syntax (…)

• Fitur berguna untuk memperluas dan menggabungkan array dan objek.

1. Penugasan Destrukturisasi

• Teknik untuk dengan mudah mengekstrak nilai dari array dan objek.

1. Promises dan async/await secara lebih rinci

• Pelajari cara efisien untuk menulis kode asinkron.

Dengan menggabungkan fitur-fitur ini, Anda akan dapat membangun program JavaScript yang lebih advanced.

Pikiran Akhir

Artikel ini memberikan panduan lengkap tentang pernyataan for…of JavaScript, mencakup segalanya mulai dari dasar hingga kasus penggunaan praktis untuk pengembangan nyata.

Contoh tindakan untuk langkah selanjutnya Anda:

• Implementasikan pernyataan for…of dalam kode Anda sendiri dan bereksperimen dengannya.
• Coba proses array, Map, dan Set untuk memperdalam pemahaman Anda.
• Tantang diri Anda dengan fitur ES6 yang lebih advanced untuk meningkatkan keterampilan Anda.