Perulangan dalam JavaScript adalah konsep yang memungkinkan kita untuk menjalankan blok kode berulang kali sesuai dengan kondisi atau jumlah iterasi tertentu. Ini serupa dengan melakukan tugas yang sama secara berulang tanpa perlu menulis ulang kode yang sama. Ada tiga jenis perulangan yang umum digunakan: for, while, dan do-while.
Dalam tutorial ini, kami akan membahas perulangan dalam JavaScript, yang memungkinkan kita untuk menjalankan blok kode berulang kali. Kami akan menjelaskan penggunaan tiga jenis perulangan: for, while, dan do-while.
Perulangan for
Perulangan for digunakan ketika kita mengetahui berapa kali blok kode harus diulang. Pernyataan ini memiliki tiga bagian: inisialisasi, kondisi, dan perubahan.
Contoh Penggunaan Perulangan for:
1 2 3 | for (var i = 1; i <= 5; i++) { console.log("Iterasi ke-" + i); } |
Dalam contoh di atas, perulangan for akan menjalankan blok kode sebanyak lima kali, dimulai dari i = 1 hingga i <= 5. Setiap iterasi, nilai i akan bertambah 1.
Perulangan while
Perulangan while digunakan saat kita ingin menjalankan blok kode selama kondisi tertentu terpenuhi. Ini akan berlanjut selama kondisi tetap benar.
Contoh Penggunaan Perulangan while:
1 2 3 4 5 | var i = 1; while (i <= 5) { console.log("Iterasi ke-" + i); i++; } |
Dalam contoh di atas, perulangan while akan terus berjalan selama nilai i kurang dari atau sama dengan 5. Setiap iterasi, nilai i akan bertambah 1.
Perulangan do-while
Perulangan do-while mirip dengan while, namun blok kode akan dijalankan setidaknya sekali sebelum kondisi dievaluasi. Ini memastikan bahwa blok kode dijalankan minimal satu kali.
Contoh Penggunaan Perulangan do-while:
1 2 3 4 5 | var i = 1; do { console.log("Iterasi ke-" + i); i++; } while (i <= 5); |
Dalam contoh di atas, blok kode akan dijalankan setidaknya satu kali, dan kemudian perulangan do-while akan terus berjalan selama nilai i kurang dari atau sama dengan 5. Setiap iterasi, nilai i akan bertambah 1.
Contoh Penggunaan Perulangan
Untuk menerapkan perulangan pada halaman web, buatlah file dengan nama latihan_js_003.html, kemudian masukkan kode program berikut ini:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | <!DOCTYPE html> <html> <head> <title>Contoh Penerapan Perulangan</title> </head> <body> <h1>Perulangan Menggunakan for</h1> <ul id="daftarAngka1"></ul> <script> var daftarAngka1 = document.getElementById("daftarAngka1"); for (var i = 1; i <= 5; i++) { var listItem = document.createElement("li"); listItem.textContent = "Iterasi ke-" + i; daftarAngka1.appendChild(listItem); } </script> <h1>Perulangan Menggunakan while</h1> <ul id="daftarAngka2"></ul> <script> var daftarAngka2 = document.getElementById("daftarAngka2"); var i = 1; while (i <= 5) { var listItem = document.createElement("li"); listItem.textContent = "Iterasi ke-" + i; daftarAngka2.appendChild(listItem); i++; } </script> <h1>Perulangan Menggunakan do-while</h1> <ul id="daftarAngka3"></ul> <script> var daftarAngka3 = document.getElementById("daftarAngka3"); var i = 1; do { var listItem = document.createElement("li"); listItem.textContent = "Iterasi ke-" + i; daftarAngka3.appendChild(listItem); i++; } while (i <= 5); </script> </body> </html> |
Jika kita jalankan maka akan menghasilkan halaman seperti yang terlihat pada gambar berikut ini:
Perulangan adalah alat yang powerfull dalam pemrograman yang memungkinkan kita melakukan tugas-tugas berulang kali. Pilih jenis perulangan yang sesuai dengan kebutuhan kita : for ketika kit tahu berapa kali perlu diulang, while ketika kita ingin berulang hingga kondisi terpenuhi, dan do-while ketika kita ingin minimal satu iterasi.
Tutorial Lengkap Javascript Dari Dasar dapat dilihat pada Index Tutorial Javascript: Belajar Javascript dari Dasar.