Bayangkan kamu disuruh menampilkan angka 1 sampai 100. Menulis console.log seratus kali jelas melelahkan. Perulangan (loop) menyuruh komputer mengulang satu blok kode selama kondisi tertentu terpenuhi. Komputer tidak bosan, kamu yang hemat tenaga.

Setiap loop punya tiga bagian penting: titik mulai, kondisi berhenti, dan langkah perubahan. Kalau salah satunya keliru, loop bisa berhenti terlalu cepat atau malah tidak pernah berhenti.

for (let i = 1; i <= 5; i++) {
  console.log(i);
}
// 1
// 2
// 3
// 4
// 5

Baca langkah demi langkah:

1. let i = 1 dijalankan sekali di awal.
2. Kondisi i <= 5 dicek. Kalau true, blok dijalankan; kalau false, loop selesai.
3. Setelah blok selesai, i++ dijalankan, lalu kembali ke langkah 2.

Satu kali menjalankan blok disebut iterasi. Loop di atas punya 5 iterasi. Kamu juga bisa menghitung mundur (i--) atau melompat dua (i += 2).

for (let i = 10; i > 0; i -= 3) {
  console.log(i);
}
// 10 7 4 1 (satu per baris)

while hanya punya kondisi. Cocok saat kamu tidak tahu berapa kali harus mengulang, misalnya "ulangi sampai tabungan cukup".

let tabungan = 0;
let minggu = 0;
while (tabungan < 100000) {
  tabungan += 30000;
  minggu++;
}
console.log(minggu, tabungan); // 4 120000

Perhatikan: perubahan nilai (tabungan += 30000) harus ada di dalam blok. Kalau lupa, kondisinya tidak pernah berubah.

do...while menjalankan blok dulu, baru mengecek kondisi. Jadi blok pasti jalan minimal satu kali, bahkan kalau kondisinya sejak awal false.

let n = 10;
do {
  console.log("n =", n);
  n++;
} while (n < 5);
// n = 10   (tetap tercetak sekali)

Contoh nyata: menu aplikasi yang tampil dulu, lalu bertanya "mau ulang?".

ES6 menambahkan for...of untuk mengambil nilai dari iterable seperti array dan string. Kamu tidak perlu mengurus indeks.

const buah = ["apel", "mangga", "jeruk"];
for (const b of buah) {
  console.log(b);
}
// apel
// mangga
// jeruk

for (const huruf of "JS") {
  console.log(huruf);
}
// J
// S

for...in mengambil nama key (property) dari sebuah object.

const siswa = { nama: "Rani", kelas: 11, kota: "Bandung" };
for (const key in siswa) {
  console.log(key + ": " + siswa[key]);
}
// nama: Rani
// kelas: 11
// kota: Bandung

Jangan pakai for...in untuk array: hasilnya indeks berupa string ("0", "1", ...) dan bisa ikut membaca property tambahan. Untuk array, for...of atau for biasa lebih aman.

• break menghentikan loop sepenuhnya.
• continue melewati sisa blok dan lanjut ke iterasi berikutnya.

for (let i = 1; i <= 10; i++) {
  if (i % 2 === 0) continue; // lewati angka genap
  if (i > 7) break;          // berhenti setelah lewat 7
  console.log(i);
}
// 1 3 5 7 (satu per baris)

Analogi: continue itu skip satu lagu di playlist, break itu mematikan musiknya.

Pola paling sering dipakai dalam loop: siapkan satu variabel penampung sebelum loop, lalu perbarui di setiap iterasi.

const belanja = [15000, 23000, 7000];
let total = 0;               // 1. nilai awal
for (const harga of belanja) {
  total += harga;            // 2. kumpulkan
}
console.log(total);          // 3. pakai hasilnya -> 45000

Penampungnya bisa angka (total, hitungan), string (menyusun teks), atau array (mengumpulkan item yang lolos syarat).

FizzBuzz adalah soal klasik di wawancara kerja. Aturannya untuk angka 1 sampai n: kelipatan 3 jadi "Fizz", kelipatan 5 jadi "Buzz", kelipatan keduanya jadi "FizzBuzz", sisanya angka itu sendiri.

for (let i = 1; i <= 15; 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

Kuncinya ada di urutan: cek % 15 paling dulu. Kalau % 3 di atas, angka 15 akan berhenti di "Fizz" dan tidak pernah jadi "FizzBuzz". Ini persis pelajaran urutan if/else dari bab sebelumnya.

Infinite loop terjadi saat kondisi berhenti tidak pernah tercapai. Tab browser bisa hang dan kamu terpaksa menutupnya.

// JANGAN dijalankan
let i = 0;
while (i < 5) {
  console.log(i);
  // lupa i++ -> i selalu 0, loop tidak pernah selesai
}

Cara mencegahnya:

1. Pastikan ada perubahan nilai yang mendekatkan ke kondisi berhenti.
2. Cek arah perubahan: for (let i = 0; i < 5; i--) menghitung mundur, jadi tidak pernah mencapai 5.
3. Untuk while yang rawan, tambahkan batas pengaman, misalnya penghitung maksimal lalu break.

• Off-by-one. i < 5 dan i <= 5 berbeda satu iterasi. Untuk array, pakai i < arr.length.
• Lupa mengubah variabel kondisi di while, sehingga loop tidak pernah berhenti.
• Memakai for...in untuk array, padahal key-nya string dan property tambahan bisa ikut terbaca.
• Mendeklarasikan akumulator di dalam loop, sehingga nilainya kembali ke 0 setiap iterasi.
• Menukar break dan continue: break menghentikan semuanya, continue hanya melewati satu putaran.