Alur Eksekusi Berulang

Kenapa ini penting

Bayangkan kamu harus mengirim pesan ulang tahun ke 500 pelanggan, menghitung total dari 1.000 transaksi, atau menampilkan 50 produk di halaman toko. Menulis instruksi yang sama 500 kali jelas tidak masuk akal. Perulangan (loop) membuat komputer mengulang satu blok kode berkali-kali sampai kondisi tertentu terpenuhi. Inilah salah satu kekuatan terbesar komputer: mengerjakan hal membosankan berulang-ulang dengan cepat dan tanpa lelah. Di modul ini kamu belajar for, while, do...while, cara mengendalikan loop dengan break dan continue, serta for...of dan for...in untuk menjelajahi isi array dan object.

Konsep inti

Loop for: jumlah putaran sudah diketahui

for (inisialisasi; kondisi; update) {
  // badan loop
}

1. Inisialisasi dijalankan sekali di awal, misalnya let i = 0.
2. Kondisi dicek sebelum setiap putaran. Kalau false, loop berhenti.
3. Badan loop dijalankan.
4. Update dijalankan setelah setiap putaran, misalnya i++.
5. Kembali ke langkah 2.

Analogi: lari keliling lapangan 10 kali. Kamu mulai dari putaran 1, cek "sudah 10 belum?", lari satu putaran, tambah hitungan, cek lagi.

Konvensi: variabel penghitung bernama i, dan dimulai dari 0 karena index array juga dimulai dari 0.

Loop while: ulang selama kondisi benar

while (kondisi) {
  // badan loop
}

Cocok ketika jumlah putaran tidak diketahui di awal. Contohnya "terus menabung sampai saldo mencapai target" atau "terus tanya password sampai benar". Pastikan ada sesuatu di dalam loop yang pada akhirnya membuat kondisi menjadi false. Kalau tidak, terjadi infinite loop (loop tanpa akhir) yang membuat program atau tab browser macet.

Loop do...while: minimal jalan sekali

do {
  // badan loop
} while (kondisi);

Badan loop dijalankan dulu, baru kondisinya dicek. Jadi badan loop dijamin jalan minimal sekali. Cocok untuk menu interaktif: tampilkan menu dulu, lalu ulang selama pengguna belum memilih "keluar".

break dan continue

• break: hentikan loop sepenuhnya saat ini juga. Contoh: berhenti mencari begitu barang ditemukan.
• continue: lewati sisa putaran saat ini, lalu lanjut ke putaran berikutnya. Contoh: lewati data yang tidak valid.

for...of: iterasi nilai

for (const item of daftar) mengambil nilai setiap elemen dari sesuatu yang iterable: array, string, Map, Set. Ini cara paling bersih untuk menjelajahi array ketika kamu tidak butuh index. Kalau butuh index juga, gunakan for (const [i, item] of daftar.entries()).

for...in: iterasi key object

for (const key in obj) mengambil nama properti (key) dari sebuah object. Cocok untuk object biasa.

Jangan pakai for...in untuk array. Key yang dihasilkan berupa string ("0", "1", ...), urutannya tidak dijamin untuk semua kasus, dan bisa ikut membawa properti tambahan. Untuk array, pakai for...of atau for biasa.

Untuk object, alternatif modern yang sering dipakai adalah Object.keys(obj), Object.values(obj), dan Object.entries(obj) yang dikombinasikan dengan for...of.

Contoh kode

// for: cetak 1 sampai 5
for (let i = 1; i <= 5; i++) {
  console.log("Putaran ke-" + i);
}
// → Putaran ke-1 ... Putaran ke-5

// for: total dari array menggunakan index
const belanja = [12000, 8500, 30000];
let total = 0;
for (let i = 0; i < belanja.length; i++) {
  total += belanja[i];
}
console.log("Total:", total); // → Total: 50500

// for mundur
for (let i = 3; i > 0; i--) {
  console.log(i);
}
console.log("Mulai!");
// → 3, 2, 1, Mulai!

// while: berapa bulan untuk mencapai target tabungan?
let tabungan = 0;
let bulan = 0;
const target = 1000000;
while (tabungan < target) {
  tabungan += 150000;
  bulan++;
}
console.log(`Butuh ${bulan} bulan, tabungan: ${tabungan}`);
// → Butuh 7 bulan, tabungan: 1050000

// do...while: jalan minimal sekali walau kondisi sudah false
let x = 10;
do {
  console.log("Dijalankan sekali, x =", x); // → Dijalankan sekali, x = 10
  x++;
} while (x < 5);

break, continue, for...of, dan for...in:

// break: berhenti saat ketemu
const stokBarang = ["pensil", "buku", "penggaris", "spidol"];
for (const barang of stokBarang) {
  if (barang === "penggaris") {
    console.log("Ketemu:", barang); // → Ketemu: penggaris
    break;
  }
  console.log("Cek:", barang);
}
// → Cek: pensil
// → Cek: buku
// → Ketemu: penggaris

// continue: lewati nilai tidak valid
const nilaiUjian = [80, -5, 95, 200, 70];
let jumlahValid = 0;
for (const n of nilaiUjian) {
  if (n < 0 || n > 100) continue; // lewati
  jumlahValid++;
}
console.log("Nilai valid:", jumlahValid); // → Nilai valid: 3

// for...of pada string dan dengan index
for (const huruf of "JS") console.log(huruf); // → J, S
for (const [i, buah] of ["apel", "jeruk"].entries()) {
  console.log(i, buah);
}
// → 0 apel
// → 1 jeruk

// for...in pada object
const siswa = { nama: "Lina", kelas: "XI", nilai: 88 };
for (const key in siswa) {
  console.log(`${key}: ${siswa[key]}`);
}
// → nama: Lina
// → kelas: XI
// → nilai: 88

// Alternatif modern: Object.entries + for...of
for (const [key, value] of Object.entries(siswa)) {
  console.log(key, "=", value);
}

// Kenapa for...in tidak cocok untuk array: key-nya string
for (const i in ["a", "b"]) {
  console.log(i, typeof i); // → 0 string, lalu 1 string
}

Kesalahan umum

1. Infinite loop. Lupa i++ atau kondisi yang tidak pernah false, misalnya while (true) tanpa break. Kalau terminal macet, tekan Ctrl+C. Di browser, tutup tab-nya.
2. Off-by-one error. Memakai i <= arr.length sehingga mengakses satu elemen di luar array (undefined). Untuk array, kondisinya i < arr.length.
3. Memakai for...in untuk array. Index-nya berupa string, sehingga i + 1 menjadi "01". Pakai for...of atau for biasa.
4. Memakai const di loop for klasik. for (const i = 0; i < 5; i++) error saat i++. Gunakan let. (Di for...of dan for...in, const justru dianjurkan.)
5. Mengubah array saat sedang di-loop. Menghapus elemen di tengah loop bisa membuat elemen terlewati. Buat array baru sebagai hasil, atau loop mundur.

Latihan

1. Mudah, Cetak tabel perkalian 7 dari 7 × 1 sampai 7 × 10.
2. Sedang, Dari array [3, 8, 12, 5, 20, 7], hitung jumlah angka genap dan cari angka terbesar memakai satu loop for...of.
3. Menantang, Buat program FizzBuzz untuk angka 1-20: cetak "Fizz" untuk kelipatan 3, "Buzz" untuk kelipatan 5, "FizzBuzz" untuk kelipatan keduanya, dan angka itu sendiri untuk lainnya. Lalu buat juga pola segitiga bintang 5 baris dengan loop bersarang:

*
**
***
****
*****

for (let i = 1; i <= 10; i++) {
  console.log(`7 x ${i} = ${7 * i}`);
}
// → 7 x 1 = 7 ... 7 x 10 = 70

const angka = [3, 8, 12, 5, 20, 7];
let jumlahGenap = 0;
let terbesar = angka[0];
for (const n of angka) {
  if (n % 2 === 0) jumlahGenap += n;
  if (n > terbesar) terbesar = n;
}
console.log(jumlahGenap, terbesar); // → 40 20

for (let i = 1; i <= 20; i++) {
  if (i % 15 === 0) console.log("FizzBuzz");
  else if (i % 3 === 0) console.log("Fizz");
  else if (i % 5 === 0) console.log("Buzz");
  else console.log(i);
}
// → 1, 2, Fizz, 4, Buzz, Fizz, 7, 8, Fizz, Buzz, 11, Fizz, 13, 14, FizzBuzz, ...

// Segitiga bintang dengan loop bersarang
for (let baris = 1; baris <= 5; baris++) {
  let teks = "";
  for (let k = 0; k < baris; k++) {
    teks += "*";
  }
  console.log(teks);
}
// Alternatif singkat: console.log("*".repeat(baris));

Ringkasan

• for dipakai saat jumlah putaran jelas. while saat jumlahnya tergantung kondisi. do...while untuk loop yang harus jalan minimal sekali.
• break menghentikan loop sepenuhnya. continue melewati putaran saat ini.
• for...of mengambil nilai dari array/string. for...in mengambil key dari object.
• Jangan pakai for...in untuk array, dan waspadai infinite loop serta off-by-one.
• Object.entries(obj) + for...of adalah cara modern menjelajahi key dan value object.