Pengertian Perulangan For, While, dan Do While Pada Javascript

Perulangan adalah proses menjalankan kode secara berulang selama kondisi tertentu masih terpenuhi. Dalam Javascript, perulangan sangat berguna untuk mengolah data, menampilkan daftar, menghitung angka, dan menjalankan proses yang sama tanpa menulis kode berkali-kali.

Dengan perulangan, kode menjadi lebih singkat, rapi, dan mudah dikelola. Javascript memiliki beberapa jenis perulangan. Tiga jenis yang paling sering digunakan adalah for, while, dan do while.

Apa Itu Perulangan Dalam Javascript?

Perulangan dalam Javascript adalah struktur program yang digunakan untuk mengulang satu atau beberapa perintah. Perulangan akan terus berjalan selama kondisi yang diberikan bernilai benar.

Contoh sederhana, kita ingin menampilkan angka 1 sampai 5. Tanpa perulangan, kita harus menulis kode seperti ini:

document.write("Angka 1<br>");
document.write("Angka 2<br>");
document.write("Angka 3<br>");
document.write("Angka 4<br>");
document.write("Angka 5<br>");

Kode di atas bisa berjalan. Namun cara tersebut tidak efektif. Jika angka yang ditampilkan sampai 100, maka kode akan terlalu panjang. Karena itu, kita membutuhkan perulangan.

Jenis-Jenis Perulangan Javascript

Javascript memiliki beberapa jenis perulangan. Pada artikel ini, kita akan membahas tiga perulangan dasar yang wajib dipahami oleh pemula.

For, digunakan ketika jumlah perulangan sudah jelas.
While, digunakan ketika perulangan bergantung pada kondisi.
Do while, digunakan ketika kode harus dijalankan minimal satu kali.

1. Perulangan For Pada Javascript

Perulangan for digunakan saat kita sudah mengetahui berapa kali kode akan dijalankan. Perulangan ini paling sering digunakan untuk menghitung angka atau membaca data dalam array.

Struktur Dasar For

for (nilai_awal; kondisi; perubahan) {
  // kode yang akan diulang
}

Keterangan:

nilai_awal adalah nilai pertama sebelum perulangan dimulai.
kondisi adalah syarat agar perulangan tetap berjalan.
perubahan adalah proses perubahan nilai setiap perulangan selesai.

Contoh Perulangan For

for (let i = 1; i <= 5; i++) {
  document.write("Angka ke-" + i + "<br>");
}

Hasil dari kode di atas:

Angka ke-1<br>
Angka ke-2<br>
Angka ke-3<br>
Angka ke-4<br>
Angka ke-5<br>

Pada contoh tersebut, nilai i dimulai dari 1. Selama nilai i kurang dari atau sama dengan 5, kode di dalam perulangan akan dijalankan. Setelah itu nilai i akan bertambah satu.

2. Perulangan While Pada Javascript

Perulangan while digunakan untuk menjalankan kode selama kondisi masih bernilai benar. Perulangan ini cocok digunakan ketika jumlah pengulangan belum pasti.

Struktur Dasar While

while (kondisi) {
  // kode yang akan diulang
}

Contoh Perulangan While

let angka = 1;

while (angka <= 5) {
  document.write("Nilai angka: " + angka + "<br>");
  angka++;
}

Hasil dari kode di atas:

Nilai angka: 1<br>
Nilai angka: 2<br>
Nilai angka: 3<br>
Nilai angka: 4<br>
Nilai angka: 5<br>

Pada contoh tersebut, variabel angka dimulai dari 1. Perulangan akan terus berjalan selama nilai angka kurang dari atau sama dengan 5. Baris angka++ berfungsi untuk menambah nilai angka agar perulangan tidak berjalan tanpa henti.

3. Perulangan Do While Pada Javascript

Perulangan do while hampir sama dengan while. Perbedaannya, perulangan do while akan menjalankan kode terlebih dahulu, lalu memeriksa kondisi setelahnya.

Artinya, kode dalam perulangan do while akan tetap berjalan minimal satu kali, meskipun kondisi bernilai salah.

Struktur Dasar Do While

do {
  // kode yang akan diulang
} while (kondisi);

Contoh Perulangan Do While

let nomor = 1;

do {
  document.write("Nomor: " + nomor + "<br>");
  nomor++;
} while (nomor <= 5);

Hasil dari kode di atas:

Nomor: 1<br>
Nomor: 2<br>
Nomor: 3<br>
Nomor: 4<br>
Nomor: 5<br>

Contoh Do While Dengan Kondisi Salah

let nilai = 10;

do {
  document.write("Nilai tetap ditampilkan<br>");
} while (nilai < 5);

Pada contoh di atas, kondisi nilai < 5 bernilai salah. Namun teks tetap ditampilkan satu kali karena do while menjalankan kode terlebih dahulu sebelum memeriksa kondisi.

Perbedaan For, While, dan Do While

Setiap jenis perulangan memiliki fungsi yang berbeda. Agar lebih mudah dipahami, perhatikan penjelasan berikut.

Jenis Perulangan	Kapan Digunakan	Ciri Utama
For	Ketika jumlah perulangan sudah jelas	Nilai awal, kondisi, dan perubahan ditulis dalam satu baris
While	Ketika jumlah perulangan belum pasti	Kondisi diperiksa sebelum kode dijalankan
Do while	Ketika kode harus dijalankan minimal satu kali	Kondisi diperiksa setelah kode dijalankan

Contoh Perulangan Dengan Array

Perulangan juga sering digunakan untuk membaca data dalam array. Array adalah tipe data yang dapat menyimpan banyak nilai dalam satu variabel.

let bahasa = ["HTML", "CSS", "Javascript", "PHP"];

for (let i = 0; i < bahasa.length; i++) {
  document.write(bahasa[i] + "<br>");
}

Hasilnya:

HTML<br>
CSS<br>
Javascript<br>
PHP<br>

Pada contoh di atas, perulangan digunakan untuk menampilkan semua data yang ada di dalam array bahasa.

Contoh Lengkap Perulangan Javascript Dalam HTML

Berikut contoh penggunaan perulangan Javascript di dalam file HTML.

<!DOCTYPE html>
<html>
<head>
  <title>Belajar Perulangan Javascript</title>
</head>
<body>

  <h2>Contoh Perulangan Javascript</h2>
  <div id="hasil"></div>

  <script>
    let hasil = "";
    
    for (let i = 1; i <= 5; i++) {
      hasil += "Belajar Javascript ke-" + i + "<br>";
    }

    document.getElementById("hasil").innerHTML = hasil;
  </script>

</body>
</html>

Pada contoh tersebut, Javascript membuat teks berulang lalu menampilkannya ke dalam elemen HTML yang memiliki id hasil.

Kesalahan Umum Saat Menggunakan Perulangan

Pemula sering mengalami kesalahan saat belajar perulangan. Salah satu kesalahan paling umum adalah lupa menambahkan perubahan nilai. Hal ini dapat menyebabkan perulangan berjalan tanpa henti.

Contoh kesalahan:

let i = 1;

while (i <= 5) {
  document.write(i + "<br>");
}

Kode di atas berbahaya karena nilai i tidak pernah berubah. Akibatnya, kondisi selalu benar dan perulangan tidak akan berhenti.

Perbaikannya:

let i = 1;

while (i <= 5) {
  document.write(i + "<br>");
  i++;
}

Kesimpulan

Perulangan dalam Javascript digunakan untuk menjalankan kode secara berulang. Ada tiga jenis perulangan dasar yang penting dipahami, yaitu for, while, dan do while.

Perulangan for cocok digunakan ketika jumlah pengulangan sudah jelas. Perulangan while cocok digunakan ketika proses bergantung pada kondisi. Perulangan do while cocok digunakan ketika kode harus berjalan minimal satu kali.

Dengan memahami perulangan, kita dapat membuat program Javascript yang lebih efisien, rapi, dan mudah dikembangkan.