BAB 7 — Looping dalam JavaScript: Mengulang dengan Cerdas dan Efisien

BAB 7 — Looping dalam JavaScript: Mengulang dengan Cerdas dan Efisien

Looping (pengulangan) adalah salah satu konsep paling penting dalam pemrograman. Dengan loop, JavaScript dapat menjalankan suatu blok kode berulang kali tanpa harus menuliskannya berkali-kali.

Dalam bab ini, kita membahas seluruh jenis loop fundamental dan modern dalam JavaScript, berikut praktik terbaik dan cara menghindari loop tak berujung (infinite loop).

1. Loop for — Pengulangan Terstruktur

for adalah loop paling umum dan sangat fleksibel.

Struktur dasar: 
for (inisialisasi; kondisi; perubahan) {
  // kode berulang
}

Contoh:

for (let i = 0; i < 5; i++) {
  console.log("Iterasi ke-", i);
}

Bagian penting:

  • inisialisasi → dijalankan sekali di awal
  • kondisi → dicek setiap iterasi
  • perubahan → dijalankan setiap kali loop selesai 1 putaran

Loop for biasanya dipakai ketika kita tahu jumlah iterasi yang pasti.

2. Loop while & do...while

A. while loop

Digunakan jika kondisi dicek sebelum menjalankan isi loop.

Struktur:

while (kondisi) {
  // kode akan berjalan selama kondisi true
}

Contoh:

let count = 1;

while (count <= 3) {
  console.log("Hitung:", count);
  count++;
}

B. do...while loop

Di sini, isi loop selalu dijalankan minimal sekali, lalu kondisi dicek setelahnya.

Struktur:

do {
  // minimal dijalankan sekali
} while (kondisi);

Contoh:

let angka = 0;

do {
  console.log("Nilai:", angka);
  angka++;
} while (angka < 3);

3. Loop for...of — Untuk Array & Iterable

for...of diperkenalkan di ES6 dan merupakan cara paling mudah untuk membaca isi array.

Contoh penggunaan pada array: 
const fruits = ["apple", "banana", "mango"];

for (const item of fruits) {
  console.log(item);
}

Bekerja pada tipe iterable lainnya:

  • string
  • Map
  • Set
  • NodeList (DOM)

Contoh pada string:

for (const char of "JS") {
  console.log(char);
}

for...of tidak cocok untuk objek biasa (non-iterable).

4. Loop for...in — Untuk Objek

Berbeda dengan for...of, loop for...in digunakan untuk mengiterasi property dalam objek.

Contoh:

const user = {
  name: "Andi",
  age: 20,
  city: "Bandung"
};

for (const key in user) {
  console.log(key, ":", user[key]);
}

Kegunaan:

  • menampilkan property objek
  • mengecek key tertentu

Catatan penting:

  • Urutan tidak selalu terjamin
  • Termasuk property yang inherited (kecuali pakai hasOwnProperty)

5. break dan continue

A. break — Menghentikan loop sepenuhnya

for (let i = 1; i <= 10; i++) {
  if (i === 5) break;
  console.log(i);
}

// output: 1 2 3 4

B. continue — Lewati iterasi saat ini

for (let i = 1; i <= 5; i++) {
  if (i === 3) continue;
  console.log(i);
}

// output: 1 2 4 5

6. Infinite Loop & Cara Menghindarinya

Loop tak berujung (infinite loop) terjadi ketika kondisi loop tidak pernah menjadi false.

Contoh infinite loop (berbahaya!)

while (true) {
  console.log("Tidak akan berhenti!");
}

Atau:

for (let i = 0; i < 5; ) {
  console.log(i);
  // i tidak berubah → loop selamanya
}

Cara Menghindari Infinite Loop

✔ Pastikan nilai kontrol berubah

Jika menggunakan i++, pastikan letaknya tepat.

✔ Gunakan kondisi yang jelas & dapat dicapai

while (x > 0) x--;

✔ Hindari perubahan variabel kontrol di dalam kondisi yang membingungkan

✔ Gunakan debugging (console.log) untuk melihat perubahan variabel

✔ Bagi kasus kompleks, gunakan break sebagai pengaman

Kapan Harus Menggunakan Loop Tertentu?

Jenis Loop Kapan digunakan
for jumlah iterasi jelas
while jumlah iterasi tidak pasti
do...while perlu dijalankan minimal sekali
for...of membaca array & iterable
for...in iterasi property objek
break keluar dari loop
continue skip iterasi tertentu

Related Posts