Belajar Javascript #7 – Perulangan dalam Javascript

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:

  1. Menggunakan for dengan operator in;
  2. 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 :

contoh perulangan javascript

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 :

contoh perulangan javascript

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 :

contoh perulangan javascript

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

Tinggalkan Balasan

Ads Blocker Image Powered by Code Help Pro

Pemblokir Iklan Terdeteksi!!!

Kami mendeteksi bahwa Anda menggunakan ekstensi untuk memblokir iklan. Silahkan menonaktifkan pemblokir iklan ini. Lalu refresh halaman ini untuk membuka konten ini !!!

Scroll to Top