Baiklah pada tutorial ini kita akan membahas jenis perulangan dan contoh perulangan yang ada di JavaScript.
Konsep perulangan di JavaScript tidak jauh berbeda degan bahasa pemrograman yang umum dipelajari seperti c, php dan java.
Pengertian Perulangan
Looping atau yang lebih dikenal dengan perulangan adalah suatu metode dalam pemrograman untuk meng eksekusi suatu berintah yang sama terus-menerus hingga kondisi tertentu terpenuhi.
Sebagai contoh kita ingin menampilkan tulisan “Belajar JavaScript Indonetsource” sebanyak 5 kali. Maka perintah tersebut akan berhenti jika tulisan tersebut telah tampil sebanyak 5 kali.
Kenapa Looping Diperlukan
Ketika programmer membuat program looping maka akan menjadikan script yang harus ditulis sebanyak puluhan atau ratusan baris menjadi hanya beberapa baris saja. Menggunakan looping berarti membuat sesuatu yang dapat menghasilkan banyak output dengan minimal script.
Perulangan for JavaScript
Perulangan for dibuat untuk menghasilkan output secara berulang dimana jumlah output terebut sudah diketahui. Sebagai contoh jika ingin menanmpilkan “Belajar JavaScript Indonetsource” sebanyak 5 kali maka kita dapat menggunakan for seperti contoh di bawah ini:
1. Contoh perulangan for menampilkan output 5 kali
<!DOCTYPE html>
<html lang="en">
<head>
<title>Perulangan For JavaScript</title>
</head>
<body>
<h2>Perulangan For JavaScript</h2>
<script>
for (let i = 0; i < 5; i++) {
document.write("<p> Tutorial Belajar JavaScript Indonetsource<p>");
}
</script>
</body>
</html>
Keterangan
- i = 0 adalah variabel yang akan menjadi permulaan perulangan for dijalankan. “i=0” berarti perulangan yang dibuat dimulai dari 0.
- i < 5 adalah batas akhir program dijalankan. Nilai tertinggi i<5 adalah 4. Sehingga program akan terhenti saat perulangan telah berlangsung dari 0 hingga 4.
Hasil running program:
2. Memberi number/urutan untuk hasil perulangan
Perulangan pada contoh 1 bisa diberi number atau urutan dengan menambahkan script seperti di bawah ini:
var number = 1;
for (let i = 0; i < 5; i++) {
document.write("<p> "+ number++ +".Tutorial Belajar JavaScript Indonetsource<p>");
}
output :
1.Tutorial Belajar JavaScript Indonetsource
2.Tutorial Belajar JavaScript Indonetsource
3.Tutorial Belajar JavaScript Indonetsource
4.Tutorial Belajar JavaScript Indonetsource
5.Tutorial Belajar JavaScript Indonetsource
3. Membuat urutan terbesar ke terkecil.
Selain memberi number dan mengurutkan dari urutan kecil ke besar (ascending) di JavaScript kita juga membuat urutan perulangan dari besar ke kecil (descending).
var number = 5;
for (let i = 5; i > 0; i--) {
document.write("<p> " + number-- + ".Tutorial Belajar JavaScript Indonetsource<p>");
}
output :
5.Tutorial Belajar JavaScript Indonetsource
4.Tutorial Belajar JavaScript Indonetsource
3.Tutorial Belajar JavaScript Indonetsource
2.Tutorial Belajar JavaScript Indonetsource
1.Tutorial Belajar JavaScript Indonetsource
4. Menampilkan bilangan ganjil dengan for di JavaScript
Ini adalah salah satu contoh studi kasus. Dimana jika ingin menampilkan bilangan ganjil kita dapat membuatnya menggunakan script di bawah ini:
for (let i = 0; i < 10; i++) {
if (i % 2 !== 0) {
document.write("<p> " + i + ". Adalah Bilangan Ganjil<p>");
}
}
output :
1. Adalah Bilangan Ganjil
3. Adalah Bilangan Ganjil
5. Adalah Bilangan Ganjil
7. Adalah Bilangan Ganjil
9. Adalah Bilangan Ganjil
5. Menampilkan bilangan genap dengan perulangan for JavaScript
Untuk menampilkan bilangan genap modifikasi lagi program mejadi script ini.
for (let i = 1; i < 10; i++) {
if (i % 2 == 0) {
document.write("<p> " + i + ". Adalah Bilangan Genap<p>");
}
}
output
2. Adalah Bilangan Genap
4. Adalah Bilangan Genap
6. Adalah Bilangan Genap
8. Adalah Bilangan Genap
Perulangan While
Dengan menggunakan perulangan while maka blok program akan terus di eksekusi selama nilainya true.
1. Contoh perulangan while JavaScript
Selama bilangan kecil dari 5 dan dimulai dari 0 maka program akan terus berjalan.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Perulangan For JavaScript</title>
</head>
<body>
<h2>Perulangan while JavaScript</h2>
<script>
let i = 0;
while (i < 5) {
document.write("<p>Urutan " + i++ + " <p>");
}
</script>
</body>
</html>
output :
Urutan 0
Urutan 1
Urutan 2
Urutan 3
Urutan 4
2. Looping array dengan while
Array dapat di looping dengan perulangan while seperti contoh di bawah ini :
let i = 0;
let mobil = ['Fortuner','Avanza','Pajero Sprot','C-RV'];
while (i < mobil.length) {
let data=(mobil[i]);
i++;
document.write("<p>"+ data + "<p>");
}
Keterangan
- Untuk dapat mengetahui sampai di mana nilai where akan bernilai
truediperlukanarray.length. array.lengthmenghitung jumlah isi array. Pada cotoh di atas length (isi) array mobil adalah 4.
output :
Fortuner
Avanza
Pajero
Sprot
C-RV
Perulangan forEach() JavaScript
JavaScript forEach() atau juga disebut method foreach adalah satu jenis perulangan yang digunakan untuk melakukan looping terhadap array. Jadi selain bisa menggunakan for dan while, untuk melakukan looping array kita juga bisa mengunakan forEach().
<!DOCTYPE html>
<html lang="en">
<head>
<title>Perulangan ForEach() JavaScript</title>
</head>
<body>
<h2>Perulangan forEach() JavaScript</h2>
<script>
// array siswa
var siswa = ["Ani", "Budi", "Citra", "Doni", "Eko", "Fitri"];
// menampilkan array siswa dengan method foreach
siswa.forEach(function (siswa) {
document.write("<p>" + siswa + "</p>");
});
</script>
</body>
</html>
output :
Method forEach menjadikan perulangan yang di buat tidak bisa di skip atau break. Hal inilah yang menjadikan perulangan foreach() berbeda dengan while dan for.
Tutorial lanjutan
Menggunakan Percabangan If Else dan Switch Case di JavaScript