🔁 Looping (Perulangan) dalam JavaScript

Selamat datang di materi perulangan JavaScript! Perulangan, atau looping, adalah konsep fundamental dalam pemrograman yang memungkinkan kita menjalankan blok kode yang sama berulang kali. Ini sangat berguna ketika kita perlu melakukan tugas yang repetitif, seperti menampilkan daftar item, memproses data dalam jumlah besar, atau mengulang animasi hingga kondisi tertentu terpenuhi.
Tanpa looping, kita harus menulis kode yang sama berkali-kali, yang tentu saja tidak efisien dan sulit dikelola. Dengan looping, kode kita menjadi lebih ringkas, mudah dibaca, dan tentunya lebih powerful! Ada beberapa jenis perulangan di JavaScript, dan kita akan membahas yang paling umum digunakan.

⚙️ Struktur Umum Looping

// 1. for loop
for (inisialisasi; kondisi; iterasi) {
  // Blok kode yang akan diulang
  // selama 'kondisi' bernilai true
}

// 2. while loop
// Inisialisasi variabel (jika ada) di luar loop
while (kondisi) {
  // Blok kode yang akan diulang
  // selama 'kondisi' bernilai true
  // Penting: pastikan ada perubahan pada variabel kondisi di dalam loop!
  // (misalnya, increment/decrement atau perubahan status)
}

// 3. do...while loop
// Inisialisasi variabel (jika ada) di luar loop
do {
  // Blok kode yang akan diulang
  // Blok ini akan dijalankan setidaknya satu kali
  // Penting: pastikan ada perubahan pada variabel kondisi di dalam loop!
} while (kondisi); // Kondisi dicek setelah blok kode dijalankan

Penjelasan dari struktur di atas sebagai berikut:

for loop: Jenis loop ini ideal ketika kamu sudah tahu berapa kali perulangan akan dilakukan.
- inisialisasi: Ekspresi ini dijalankan sekali sebelum loop dimulai. Biasanya digunakan untuk mendeklarasikan dan menginisialisasi variabel counter (misalnya, let i = 0).
- kondisi: Ekspresi ini dievaluasi sebelum setiap iterasi. Jika bernilai true, blok kode dalam loop akan dijalankan. Jika false, loop akan berhenti.
- iterasi: Ekspresi ini dijalankan setelah setiap iterasi. Biasanya digunakan untuk memperbarui variabel counter (misalnya, i++ atau i--).
while loop: Loop ini akan terus berjalan selama kondisi yang ditentukan bernilai true. Kondisi diperiksa *sebelum* blok kode dijalankan. Jika kondisi awalnya sudah false, blok kode tidak akan pernah dijalankan. Sangat penting untuk memastikan bahwa ada sesuatu di dalam loop yang pada akhirnya akan membuat kondisi menjadi false, jika tidak, kamu akan membuat *infinite loop* (perulangan tak terbatas)!
do...while loop: Mirip dengan while loop, tetapi perbedaannya adalah blok kode di dalam do...while akan dijalankan *setidaknya satu kali* sebelum kondisi diperiksa. Setelah itu, loop akan berlanjut selama kondisi bernilai true.

Selain itu, ada juga loop for...in untuk iterasi properti objek dan for...of untuk iterasi item dalam objek iterable (seperti Array, String, Map, Set). Namun, untuk dasar ini kita fokus pada tiga jenis di atas.

💻 Contoh Kode:

index.html

<!DOCTYPE html>
<html>
<head>
  <title>Contoh Looping JavaScript</title>
  <style>
    body { font-family: Arial, sans-serif; margin: 20px; }
    .output-item { border-bottom: 1px solid #eee; padding: 5px 0; }
  </style>
</head>
<body>
  <h1>Hasil Looping (Cek Juga Konsol Browser)</h1>
  <div id="outputDiv"></div>

  <script>
    const outputDiv = document.getElementById('outputDiv');

    // Contoh 1: for loop (Mencetak angka 1 sampai 5)
    outputDiv.innerHTML += '<h2>Contoh for loop:</h2>';
    console.log("--- Contoh for loop ---");
    for (let i = 1; i <= 5; i++) {
      let pesan = "Iterasi ke-" + i;
      console.log(pesan);
      outputDiv.innerHTML += `<div class="output-item">${pesan}</div>`;
    }

    // Contoh 2: while loop (Menggandakan angka selama kurang dari 30)
    outputDiv.innerHTML += '<h2>Contoh while loop:</h2>';
    console.log("--- Contoh while loop ---");
    let angka = 2;
    while (angka < 30) {
      let pesan = "Angka saat ini (while): " + angka;
      console.log(pesan);
      outputDiv.innerHTML += `<div class="output-item">${pesan}</div>`;
      angka *= 2; // Penting: update kondisi!
    }
    let pesanAkhirWhile = "Angka setelah loop (while): " + angka;
    console.log(pesanAkhirWhile);
    outputDiv.innerHTML += `<div class="output-item"><strong>${pesanAkhirWhile}</strong></div>`;

    // Contoh 3: do...while loop (Menjalankan setidaknya sekali)
    outputDiv.innerHTML += '<h2>Contoh do...while loop:</h2>';
    console.log("--- Contoh do...while loop ---");
    let counter = 5; // Meskipun kondisi (counter < 5) awalnya false
    do {
      let pesan = "Counter (do...while): " + counter;
      console.log(pesan);
      outputDiv.innerHTML += `<div class="output-item">${pesan}</div>`;
      counter++;
    } while (counter < 5); // Kondisi dicek di sini

    // Contoh 4: Looping array dengan for loop
    outputDiv.innerHTML += '<h2>Daftar Buah (for loop):</h2>';
    const buah = ["Apel", "Mangga", "Jeruk", "Pisang", "Anggur"];
    let listBuahHTML = '<ul>';
    for (let i = 0; i < buah.length; i++) {
      listBuahHTML += `<li>${buah[i]}</li>`;
      console.log("Buah:", buah[i]);
    }
    listBuahHTML += '</ul>';
    outputDiv.innerHTML += listBuahHTML;
  </script>
</body>
</html>

⚙️ Demo Interaktif:

Coba ubah kode di bawah ini untuk melihat bagaimana loop bekerja secara langsung! Kamu bisa mengganti batas atas perulangan atau teks yang ditampilkan.

<!DOCTYPE html>
<html>
<head>
  <title>Demo Looping Interaktif</title>
  <style>
    body { font-family: sans-serif; padding: 15px; background-color: #f9f9f9; color: #333; }
    #controls { margin-bottom: 15px; padding: 10px; background-color: #e9e9e9; border-radius: 5px;}
    label { margin-right: 5px; }
    input[type="number"], input[type="text"] { padding: 5px; border-radius: 3px; border: 1px solid #ccc; margin-right: 10px;}
    button { padding: 6px 12px; background-color: #007bff; color: white; border: none; border-radius: 3px; cursor: pointer; }
    button:hover { background-color: #0056b3; }
    #loopOutput { margin-top: 15px; border: 1px solid #ddd; padding: 10px; min-height: 100px; background-color: white; border-radius: 5px; }
    .item { margin-bottom: 5px; background-color: #f0f8ff; padding: 8px; border-radius: 3px; border-left: 3px solid #007bff;}
  </style>
</head>
<body>
  <h3>Pembuat Daftar Dinamis dengan Loop</h3>
  <div id="controls">
    <label for="jumlahItem">Jumlah Item:</label>
    <input type="number" id="jumlahItem" value="3" min="1" max="10">
    <label for="teksItem">Teks Item:</label>
    <input type="text" id="teksItem" value="Item">
    <button onclick="jalankanLoop()">Buat Daftar</button>
  </div>
  <div id="loopOutput">Hasil loop akan muncul di sini.</div>

if (isNaN(jumlah) || jumlah < 1 || jumlah > 10) {
        outputDiv.innerHTML = "<p style='color:red;'>Masukkan jumlah item antara 1 dan 10.</p>";
        return;
      }

outputDiv.innerHTML += "<p>Daftar item yang dibuat:</p>";
      for (let i = 1; i <= jumlah; i++) {
        let newItem = document.createElement("div");
        newItem.classList.add("item");
        newItem.textContent = teksDasar + " ke-" + i;
        outputDiv.appendChild(newItem);
      }
    }
  </script>
</body>
</html>

💡 Tips: Hati-hati dengan infinite loops (perulangan tak terbatas)! Selalu pastikan kondisi dalam while atau do...while loop pada akhirnya akan bernilai false, dan variabel iterasi pada for loop akan mencapai batasnya. Browser bisa hang atau bahkan crash loh jika terjebak dalam infinite loop!