Pada artikel sebelumnya kita telah mengenal bentuk percabangan pada Javascript. Pada pembahasan kali ini kita akan belajar mengenal bentuk perulangan pada Javascript beserta contoh kode program nya.
Perulangan atau Loop pada javascript digunakan untuk mengeksekusi kode yang berulang-ulang berdasarkan suatu kondisi. Loop atau perulang pada umumnya tersedia pada semua bahasa pemrograman meskipun implementasi dan sintaks berbeda-beda.
Perulangan atau Loop ini merupakan syarat bahasa pemrograman agar mampu menangani proses-proses secara dinamis. Oleh sebab itu, Loop atau perulang pada umumnya tersedia pada semua bahasa pemrograman, namun pada implementasi dan sintaksnya berbeda-beda
Bentuk perulangan di Javascript
Ada lima macam bentuk perulangan di Javascript, namun secara umum, perulangan ini dibagi lagi menjadi dua, yaitu: counted loop dan uncounted loop. Adapun perbedaan dari 2 jenis perulangan ini adalah sebagai berikut :
Counted Loop merupakan perulangan yang jelas dan sudah tentu banyak perulangannya. Perulangan yang termasuk dalam Counted Loop:
- Perulangan For
- Foreach
- Repeat
Sedangkan Uncounted Loop, merupakan perulangan yang tidak jelas berapa kali ia harus mengulang. Perulangan Uncounted Loop adalah sebagai berikut :
- Perulangan While
- Do/While
Untuk lebih jelas, kita akan bahas lebih dalam mengenai 5 macam bentuk perulangan tersebut.
Perulangan For
Perulangan for merupakan perulangan yang termasuk dalam Counted loop, karena sudah jelas berapa kali ia akan mengulang.
Berikut ini pseudo-code perulang for :
for([inisialisasi]; [kondisi]; [eksekusi iterasi]) {
// blok kode
}
Inisialisasi adalah saat pertama kali kita mendeklarasi sebuah nilai awal, dimana nilai awal akan berubah selama belum memenuhi syarat kondisi.
Kondisi berfungsi untuk mengecek perubahan yang terjadi setiap kali terjadi eksekusi iterasi perulangan dengan menggunakan operator perbandingan.
Eksekusi Iterasi merupakan proses akhir setiap kali terjadi eksekusi iterasi, biasanya digunakan untuk proses penambahan (increment) atau pengurangan (decrement).
Contoh kode program perulangan for pada Javascript :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Perulangan For</title>
</head>
<body>
<script>
for(let i = 0; i < 5; i++){
document.write("<p>Perulangan ke-" + i + "</p>")
}
for(counter = 0; counter < 10; counter+=2){
document.write("<p>Perulangan ke-"+counter+"</p>");
}
</script>
</body>
</html>
Penjelasan Program :
Perhatikan kondisi setelah kata for yang ada di dalam kurung. Kondisi ini akan menentukan:
- Hitungan akan dimulai dari 0 (i = 0);
- Menentukan batas perhitungan? Sampai i < 5;
- Setiap perulangan i akan bertambah +1 (i++).
Variabel i pada perulangan for berfungsi untuk menyimpan nilai hitungan. Jadi setiap perulangan dilakukan nilai i akan selalu bertambah satu. Karena kita menentukannya di bagian i++. nama variabelnya harus selalu i. Kita juga bisa menggunakan nama lain.
Misalnya :
for(counter = 0; counter < 10; counter+=2){
document.write("<p>Perulangan ke-"+counter+"</p>");
Pada contoh tersebut, kita melakukan perulangan dimulai dari nol 0. Lalu di setiap perulangan nilai variabel couter akan ditambah 2 (counter+=2).
Berdasarkan contoh program perulangan for pada Javascript tersebut, maka hasilnya terlihat seperti gambar dibawah ini :
Perulangan Foreach
Perulangan counted loop yang selanjutnya yaitu perulangan foreach. Jenis perulangan ini biasanya digunakan untuk mencetak item di dalam array. Selain itu, jumlah perulangannya akan ditentukan oleh panjang dari array.
Ada dua cara menggunakan perulangan foreach di Javascript:
- Menggunakan for dengan operator in;
- Mengguunakan method forEach().
Method forEach() memiliki parameter berupa fungsi callback. kita juga bisa menggunakan arrow function seperti contoh program perulangan foreach pada Javascript berikut ini :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Perulangan Foreach</title>
</head>
<body>
<script>
//array seperti
var Buah = ["apel", "nanas", "jeruk", "pisang"];
// tampilkan semua hari dengan menggunakan method foreach
Buah.forEach((Buah) => {
document.write("<p>" + Buah + "</p>");
});
</script>
</body>
</html>
Pada kode program diatas akan menampilkan daftar data yang sudah di deklarasikan didalam array. Maka hasilnya akan terlihat seperti gambar dibawah ini :
Perulangan dengan Method repeat()
Perulangan dengan method atau fungsi repeat() digunakan untuk mengulang sebuah teks (string) atau bisa juga digunakan dengan perulangan for.
Contoh Perulangan method dengan fungsi repeat() pada javascript.,
<!DOCTYPE html>
<html lang="en">
<head>
<title>Method repeat</title>
</head>
<body>
<script>
document.write("Ulangi kalimat ini! ".repeat(100));
</script>
</body>
</html>
Pada kode program diatas akan menampilkan kalimat secara berulang, Maka hasilnya akan terlihat seperti gambar dibawah ini :
Perulangan While
Adapun jenis perulangan uncounted loop yaitu perulangan while. Namun perulangan ini juga bisa menjadi perulangan yang counted loop jika kita memberikan counter di dalamnya.
while(kondisi) {
// blok kode
}Tidak seperti for yang mengharuskan mendeskripsikan kebutuhan terlebih dahulu, fungsi perulangan while disini hanya memberikan opsi kondisi,
Adapun contoh perulangan while pada Javascript adalah berikut ini…
<!DOCTYPE html>
<html lang="en">
<head>
<title>Perulangan While</title>
</head>
<body>
<script>
var ulangi = confirm("Apakah anda mau mengulang?");
var counter = 0;
while(ulangi){
counter++;
ulangi = confirm("Apakah anda mau mengulang?");
}
document.write("Perulangan sudah dilakukan sebanyak "+ counter +" kali");
</script>
</body>
</html>
Berdasarkan kode program diatas, maka hasilnya akan terlihat seperti gambar dibawah ini :
Perulangan Do/While
Sama seperti perulangan while, bentuk perulangan ini akan melakukan perulangan sebanyak 1 kali terlebih dahulu, lalu mengecek kondisi yang ada di dalam kurung while.
Berikut ini pseudo-code Perulangan do/while :
do {
// blok kode yang akan diulang
} while (<kondisi>);
Contoh perulangan do/while javascript :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Perulangan DoWhile</title>
</head>
<body>
<script>
var ulangi = confirm("Apakah anda mau mengulang?");;
var counter = 0;
do {
counter++;
ulangi = confirm("Apakah anda mau mengulang?");
} while(ulangi)
document.write("Perulangan sudah dilakukan sebanyak "+ counter +" kali");
</script>
</body>
</html>
Berdasarkan kode program diatas, maka hasilnya akan terlihat seperti gambar dibawah ini :
Pada kode program diatas, sama seperti contoh pada perulangan while. Pada saat perulangan pertama, cobalah untuk membatalkan perulangannya dengan memilih Cancel. Jadi perbedaanya: Perulangan do/while akan mengecek kondisi di belakang (sesudah mengulang), sedangkan while akan mencek kondisi di depan atau awal (sbelum mengulang).
Begitulah cara melakukan loop atau perulangan pada javascript. silahkan gunakan diantara lima macam bentuk perulangan tersebut sesuai dengan kebutuhan sesuai pada contoh kode yang telah diberikan. Baca juga artikel selanjutnya yaitu Belajar Javascript #8 Struktur Data Array pada Javascript
