Contoh For Of pada JavaScript

Berikut ini adalah contoh penggunaan for...of pada JavaScript dan penerapannya dengan HTML

// Contoh penggunaan for...of dalam JavaScript
const arr = [1, 2, 3, 4, 5];

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

<!-- Contoh penerapan for...of dengan HTML -->
<ul id="list"></ul>

<script>
  const arr = ['apel', 'jeruk', 'mangga', 'pisang'];

  const list = document.getElementById('list');
  for (const fruit of arr) {
    const li = document.createElement('li');
    li.textContent = fruit;
    list.appendChild(li);
  }
</script>

Dalam contoh di atas, kita menggunakan for...of untuk melakukan iterasi pada array arr. Setiap elemen dalam array akan diakses satu per satu dan dapat digunakan dalam blok pernyataan for...of.

Output:

See the Pen Contoh For Of pada JavaScript by WebbizID (@De-Orchids) on CodePen.

Pada contoh pertama, kita menggunakan console.log untuk mencetak setiap elemen dari array arr ke konsol.

Pada contoh kedua, kita menggunakan for...of untuk mengiterasi array arr dan membuat elemen <li> dalam elemen <ul> dengan id “list” di dalam dokumen HTML. Setiap elemen dalam array akan ditambahkan sebagai teks konten dari elemen <li>.

Dengan menggunakan for...of, kita dapat dengan mudah mengakses setiap elemen dalam array atau objek yang dapat diiterasi dan melakukan operasi yang diperlukan pada setiap elemen tersebut.

Penerapan for...of dengan HTML memungkinkan kita untuk secara dinamis membuat elemen HTML berdasarkan data yang ada dalam array atau objek yang diiterasi.

Dengan demikian, kita dapat menggunakan for...of dalam JavaScript dan mengaplikasikannya dengan HTML untuk melakukan iterasi pada array atau objek yang dapat diiterasi dan melakukan operasi yang diperlukan pada setiap elemen.