Mengulang suatu proses merupakan tindakan yang banyak dijumpai dalam pemrograman. Pada semua bahasa pemrograman, perulangan proses ditangani dengan suatu mekanisme yang disebut loop. Dengan menggunakan loop, suatu proses yang berulang misalnya menampilkan tulisan yang sama seratus kali pada layar dapat diimpelementasikan dengan kode program yang pendek.
Pengulangan atau disebut sebagai looping adalah instruksi khusus dalam bahasa pemrograman dan algoritma yang digunakan untuk mengulang beberapa perintah sesuai dengan jumlah yang telah ditentukan. tujuannya adalah untuk mempermudah pengerjaan program dan untuk mempersingkat instruksi program. dengan pengulangan instruksi program yang seharunya ditulis dengan jumlah baris yang banyak bisa dipersingkat.
Sebagai contoh jika kita ingin menampilkan tulisan “Tutorial Javascript” di suatu halaman website sebanyak 10 kali menggunakan JavaScript, mungkin kita bisa menuliskannya dengan fungsi document.write() sebanyak 10 kali seperti ini :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Perulangan Manual</title>
</head>
<body>
<script>
document.write("<p>Tutorial Javascript</p>");
document.write("<p>Tutorial Javascript</p>");
document.write("<p>Tutorial Javascript</p>");
document.write("<p>Tutorial Javascript</p>");
document.write("<p>Tutorial Javascript</p>");
document.write("<p>Tutorial Javascript</p>");
document.write("<p>Tutorial Javascript</p>");
document.write("<p>Tutorial Javascript</p>");
document.write("<p>Tutorial Javascript</p>");
document.write("<p>Tutorial Javascript</p>");
</script>
</body>
</html>
Hasilnya :
Menampilkan kalimat berulang seperti di atas boleh-boleh saja, tetapi bagaimana kalau mau menampilkan sebanyak 1000 kali, pastinya akan capek dalam mengetikan sintaknya. Solusinya kita bisa menggunakan perulangan/Looping. Perulangan/looping akan membantu kita mengeksekusi kode yang berulang-ulang, berapapun yang kita mau.
Ada lima macam bentuk perulangan di JavaScript. Secara umum perulangan ini dibagi dua, yaitu counted loop dan uncounted loop.
Perbedaanya:
- Counted Loop merupakan perulangan yang jelas dan sudah tentu banyak perulangannya.
- Sedangkan Uncounted Loop, merupakan perulangan yang tidak jelas berapa kali ia harus mengulang.
Perulangan yang termasuk dalam Counted Loop:
- Perulangan For
- Perulangan Foreach
- Perulangan Repeat
Perulangan yang termasuk dalam Uncounted Loop:
- Perulangan While
- Perulangan Do-While
1. Perulangan For di JavaScript
Perulangan for merupakan perulangan yang termasuk dalam couted loop, karena sudah jelas berapa kali ia akan mengulang.
Flowchart perulangan for :
Bentuknya kodenya seperti ini :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Perulangan Manual</title>
</head>
<body>
<script>
for(let A = 1; A <= 10; A++)
{
document.write("<p>Perulangan ke-" + A + "</p>");
}
</script>
</body>
</html>
Yang perlu diperhatikan adalah kondisi yang ada di dalam kurung setelah kata for.
Kondisi ini akan menentukan :
-
- Hitungan akan dimulai dari 1 (A=1)
- Hitungannya akan sampai A <= 10
- Lalu di setiap perulangan A akan bertambah +1 (A++).
Variabel A pada perulangan for berfungsi untuk menyimpan nilai hitungan. Jadi setiap perulangan dilakukan, nilai A akan selalu bertambah satu, karena kita menentukannya di bagian A++.
Hasilnya seperti berikut :
Nama variabelnya tidak harus selalu A dan penaikan control loopnya tidak selalu harus +1 (A++) kita juga bisa menggunakan nama lain dan control loop yang berbeda, misalnya :
for(counter = 0; counter < 20; 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).
Hasilnya :
Perulangan bisa juga dimulai dari angka yang lebih besar sampai yang ke paling kecil, Ini biasanya kita buat saat ingin menghitung mundur.
Caranya kita tinggal isi nilai variabel counter dengan nilai terbesarnya, misalnya kita akan mulai hitungan dari 10 sampai ke 1, maka nilai variabel counter kita isi awalnya dengan 10. Lalu di kondisi perbandingannya, kita berikan variabel counter > 0. Artinya perulangan akan dilakukan selama nilai variabel counter lebih besar dari 0, lalu kita kurangi (-1) nilai variabel counter di setiap perulangan (counter–).
<!DOCTYPE html>
<html lang="en">
<head>
<title>Perulangan For JavaScript</title>
</head>
<body>
<script>
for(counter = 10; counter > 0; counter--)
{
document.write("<p>Perulangan ke-"+counter+"</p>");
}
</script>
</body>
</html>
Hasilnya :
Perulangan tidak sampai nol (0), karena kondisi yang kita berikan counter > 0. Apabila counter bernilai 0, maka kondisi ini akan menjadi false. Kecuali kita menggunakan operator lebih besar sama dengan (>=), maka jika counter bernilai 0 kondisi akan menjadi true.
2. Perulangan While di Javascript
Perulangan while merupakan perulangan yang termasuk dalam perulangan uncounted loop. Perulangan while juga dapat menjadi perulangan yang counted loop dengan memberikan counter di dalamnya.
Berikut contohnya :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Perulangan While JavaScript</title>
</head>
<body>
<script>
var ulangi = confirm("Apakah anda mau mengulang?");
var counter = 0;
while(ulangi)
{
var jawab = confirm("Apakah anda mau mengulang?");
counter++;
if(jawab == false)
{
ulangi = false;
}
}
document.write("Perulangan sudah dilakukan sebanyak "+ counter +" kali");
</script>
</body>
</html>
Bisa disederhanakan menjadi :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Perulangan While JavaScript</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>
Hasilnya :
Perulangan akan terjadi selama variabel ulangi bernilai true yang berada pada blok kode while :
while(ulangi)
{
counter++;
ulangi = confirm("Apakah anda mau mengulang?");
}
Lalu kita menggunakan fungsi confirm() untuk menampilkan dialog konfirmasi.Selama kita memilih OK pada dialog konfirmasi, maka variabel ulangi akan terus bernilai true. Tapi kalau kita pilih Cancel, maka variabel ulangi akan bernilai false. Saat variabel ulangi bernilai false, maka perulangan akan dihentikan.
3. Perulangan Do-While di JavaScript
Perulangan do-while sama seperti perulangan while, perbedaanya perulangan do-while akan melakukan perulangan sebanyak 1 kali terlebih dahulu, lalu mengecek kondisi yang ada di dalam kurung while.
Bentuknya seperti ini :
do
{
// blok kode yang akan diulang
}
while (kondisi);
Jadi perbedaanya perulangan do-while akan mengecek kondisi di belakang (sesudah mengulang), sedangkan while akan mencek kondisi di depan atau awal (sbelum mengulang).
Berikut contohnya :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Perulangan Do-While JavaScript</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>
Contoh tersebut sama seperti contoh pada perulangan while, namu ada sedikit perbedaan. Saat perulangan pertama, cobalah untuk membatalkan perulangannya dengan memilih Cancel.
Maka hasilnya :
Dari hasilnya tampak bahwa walaupun tombol cancel ditekan maka proses perulangan/looping akan tetap diproses 1 kali.
4. Perulangan Foreach di JavaScript
Perulangan foreach biasanya digunakan untuk mencetak item di dalam array. Perulangan ini termasuk dalam perulangan counted loop, karena jumlah perulangannya akan ditentukan oleh panjang dari array.
Ada dua cara menggunakan perulangan foreach di Javascript :
-
- Menggunakan for dengan operator in
- Menggunakan method forEach()
Contoh:
Berikut ini bentuk perulangan “foreach” tanpa menggunakan operator in :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Perulangan Do-While JavaScript</title>
</head>
<body>
<script>
var bahasa = ["Javascript", "HTML", "CSS", "PHP", "Python"];
for(i = 0; i < bahasa.length; i++)
{
document.write("<p>"+i+". "+ bahasa[i] + "</p>");
}
</script>
</body>
</html>
Perulangan ini dapat dibuat lebih sederhana lagi dengan menggunakan operator in seperti ini :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Perulangan Do-While JavaScript</title>
</head>
<body>
<script>
var bahasa = ["Javascript", "HTML", "CSS", "PHP", "Python"];
for(i in bahasa)
{
document.write("<p>"+i+". "+ bahasa[i] + "</p>");
}
</script>
</body>
</html>
Hasilnya :
Cara kedua membuat perulangan foreach ialah dengan menggunakan method forEach() dari array.
Contoh :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Perulangan Do-While JavaScript</title>
</head>
<body>
<script>
// kita punya array seperti berikut
var hari = ["Senin", "Selasa", "Rabu", "Kamis", "Jum'at", "Sabtu", "Minggu"];
// Kemudian kita tampilkan semua hari dengan menggunakan method forEach
hari.forEach(function(namahari)
{
document.write("<p>" + namahari + "</p>");
}
);
</script>
</body>
</html>
Method forEach() memiliki parameter berupa fungsi callback. Sebenarnya kita juga bisa menggunakan arrow function seperti ini :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Perulangan Foreach JavaScript</title>
</head>
<body>
<script>
// kita punya array seperti berikut
var hari = ["Senin", "Selasa", "Rabu", "Kamis", "Jum'at", "Sabtu", "Minggu"];
// Kemudian kita tampilkan semua hari dengan menggunakan method foreach
hari.forEach(
(namahari) => {
document.write("<p>" + namahari + "</p>");
}
);
</script>
</body>
</html>
Hasilnya :
Penjelasan tentang arrow function, akan dibahas pada tutorial selanjutnya tentang Fungsi di Javascript.
5. Perulangan dengan method repeat()
Perulangan dengen method atau fungsi repeat() termasuk dalam perulangan counted loop. Fungsi ini khusus digunakan untuk mengulang sebuah teks/string. Bisa dikatakan ini merupakan bentuk singkat dari perulangan for.
Contoh :
Apabila kita menggunakan perulangan for :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Perulangan For JavaScript</title>
</head>
<body>
<script>
for(let A = 1; A <= 10; A++)
{
document.write("<p>Hello world !</p>");
}
</script>
</body>
</html>
Apabila kita menggunakan fungsi repeat() :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Perulangan Repeat JavaScript</title>
</head>
<body>
<script>
document.write("<p>Hello world !</p>".repeat(10));
</script>
</body>
</html>
Hasilnya :
Pada sintak di atas tampak bahwa fungsi repeat() berisi parameter jumlah berapa kali proses looping yang akan dilakukan.
Demikianlah materi tentang perulangan/looping pada JavaScript, selain kelima bentuk perulangan di atas kita bisa meggabungkan perulangan yang sejenis atau berbeda menjadi perulangan di dalam perulangang, yang biasa disebut perulangan bersarang (nested loop).
Perulangan Bersarang (Nested Loop)
Di dalam blok perulangan, kita juga dapat membuat perulangan. Ini disebut dengan nested loop atau perulangan bersarang atau perulangan di dalam perualangan.
Berikut contohnya :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Perulangan Nested Loop JavaScript</title>
</head>
<body>
<script>
for(let A = 0; A < 5; A++)
{
for(let B = 0; B < 5; B++)
{
document.write("<p>Perulangan ke " + A + "," + B + "</p>");
}
}
</script>
</body>
</html>
Hasilnya :
Pada perulangan tersebut, kita menggunakan dua perulangan for. Perulangan pertama menggunakan variabel A sebagai counter-nya, sedangkan perulangan kedua menggunakan variabel B sebagai counter-nya.
Contoh lain :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Perulangan Nested Loop JavaScript</title>
</head>
<body>
<script>
var ulangi = confirm("apakah anda ingin mengulang?");
var jumlah = 0;
while (ulangi)
{
jumlah++;
var bintang = "*".repeat(jumlah) + "<br>";
document.write("<p>"+jumlah + ": " + bintang+"</p>");
ulangi = confirm("apakah anda ingin mengulang?");
}
</script>
</body>
</html>
Hasilnya :
Kedepannya kita akan banyak menggunakan perulangan bersarang saat bekerja dengan array dua dimensi.
Perlu diperhatikan, semakin banyak perulangan maka komputer akan semakin lama memprosesnya. Tentu ini akan membuat website atau aplikasi kita berjalan lambat. Karena itu gunakanlah perulangan dengan bijak dan efektif.
Demikian tutorial tentang perulangan(looping) pada JavaScript, semoga bermanfaat.
Referensi :
- https://www.petanikode.com/javascript-perulangan/
Be the first to comment