Tutorial Javascript Tahap 8 : Bentuk Perulangan

Tutorial Javascript Tahap 8 : Bentuk Perulangan

Javascript menjadi bahasa pemrograman yang sangat relevan dan esensial dalam pengembangan web modern. Dengan kemampuannya yang kuat dalam memanipulasi elemen-elemen HTML dan CSS, belajar Javascript menjadi langkah penting bagi para pengembang web. Salah satu konsep dasar yang harus dikuasai dalam Javascript adalah perulangan. Perulangan memungkinkan eksekusi kode yang sama berulang kali, memudahkan penanganan tugas-tugas berulang. Dalam artikel ini, kita akan menggali lebih dalam mengenai 5 macam bentuk perulangan pada Javascript, memberikan pemahaman mendalam bagi para pembelajar untuk mengoptimalkan penggunaan perulangan dalam skrip mereka

2 Jenis Perulangan Pada Javascript

Ada lima macam bentuk perulangan yang memegang peran krusial dalam dunia pemrograman Javascript. Dalam konteks umum, perulangan ini dapat dikategorikan menjadi dua jenis utama, yaitu counted loop (perulangan berhitung) dan uncounted loop (perulangan tanpa hitungan yang pasti).

Counted loop merupakan bentuk perulangan yang memiliki jumlah iterasi yang jelas dan pasti. Artinya, kita sudah mengetahui seberapa banyak perulangan akan dieksekusi sebelumnya. Contoh paling sederhana dari counted loop adalah menggunakan pernyataan for, di mana kita dapat menentukan awal, kondisi pengulangan, dan langkah increment atau decrement secara eksplisit.

Di sisi lain, uncounted loop adalah jenis perulangan yang tidak memiliki jumlah iterasi yang pasti atau tidak jelas berapa kali perulangan akan diulang. Program akan terus melibatkan perulangan ini selama kondisi tertentu terpenuhi. Sebagai contoh, penggunaan pernyataan while atau do-while dapat memberikan fleksibilitas yang dibutuhkan untuk situasi di mana kita tidak tahu seberapa banyak kali suatu aksi harus diulang hingga suatu kondisi tertentu tercapai.

Pemahaman mendalam tentang perbedaan antara counted loop dan uncounted loop menjadi kunci untuk menentukan pendekatan yang tepat dalam menangani situasi tertentu dalam pengembangan aplikasi menggunakan Javascript. Dengan memahami karakteristik masing-masing jenis perulangan, pengembang dapat mengoptimalkan penggunaannya sesuai dengan kebutuhan proyek dan menghasilkan kode yang lebih efisien dan efektif.

Baca Juga : Tutorial Lainya

Bentuk-bentuk perulangan dalam javascript

 - Perulangan For

Dalam dunia pengembangan web menggunakan Javascript, salah satu konsep yang mendapat sorotan adalah perulangan for, yang merupakannya bagian penting dari counted loop. Counted loop adalah jenis perulangan di mana jumlah iterasinya sudah diketahui sebelumnya. Untuk memahami konsep perulangan for secara menyeluruh, mari kita telaah langkah-langkah eksekusinya yang tergambar dalam flowchart.

Pertama, perulangan for dimulai dengan tahap inisialisasi variabel, seperti yang terlihat pada contoh berikut:

```javascript
for (let i = 0; i < 10; i++) {
    document.write("<p>Perulangan ke-" + i + "</p>");
}
```

Di sini, variabel `i` diinisialisasi dengan nilai 0. Kondisi `i < 10` menentukan batasan iterasi, dan langkah increment `i++` menunjukkan bahwa nilai `i` akan bertambah satu setiap kali perulangan dijalankan.

Variabel `i` berperan sebagai wadah penyimpanan nilai hitungan selama perulangan. Melalui langkah increment, nilai ini diperbarui setiap iterasi, memungkinkan kontrol yang tepat terhadap alur program.

Perulangan for memberikan kejelasan tentang berapa kali eksekusi akan dilakukan. Kontrol yang eksplisit terhadap variabel hitungan menjadikan perulangan for pilihan ideal ketika jumlah iterasi sudah diketahui dengan pasti.

Dengan pemahaman mendalam terhadap perulangan for, pengembang Javascript dapat mengoptimalkan penggunaannya untuk manajemen efisien alur program, terutama dalam situasi yang memerlukan pendekatan berhitung yang terdefinisi dengan baik. Sehingga, tidak hanya teknis mekanisme perulangan yang terlibat, namun juga penerapannya dalam konteks pengembangan web yang nyata.

Baca Juga : Pengenalan JavaScript

 - Perulangan While

Perulangan while dalam Javascript memainkan peran yang dinamis, dapat berfungsi sebagai uncounted loop atau counted loop tergantung pada kebutuhan pengembangan. Sebagai perulangan uncounted loop, perulangan while menjalankan blok kode selama kondisi yang diberikan bernilai true, tanpa memerlukan pengetahuan sebelumnya tentang berapa kali iterasi akan dilakukan.

Namun, fleksibilitas perulangan while tidak berhenti di situ. Perulangan ini dapat dengan mudah diubah menjadi counted loop dengan memasukkan suatu counter di dalamnya, memberikan kontrol yang lebih eksplisit terhadap jumlah iterasi yang diinginkan. Contoh implementasinya dapat dilihat pada potongan kode berikut:

```javascript
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");
```

 

Dalam contoh ini, perulangan while berjalan selama pengguna ingin mengulang, dan setiap iterasi dihitung menggunakan variabel counter. Jika pengguna memilih untuk tidak melanjutkan perulangan, variabel ulangi diatur ke false, mengakhiri perulangan, dan hasil akhirnya ditampilkan dengan jumlah iterasi yang telah dilakukan.

Memahami perulangan while membuka pintu untuk pemanfaatan fleksibel perulangan uncounted dan counted loop, memberikan keunggulan adaptabilitas dalam penanganan situasi berulang dalam pengembangan aplikasi Javascript.

 

 - Perulangan do/while

Perulangan do/while dalam Javascript memang mirip dengan perulangan while, namun memiliki perbedaan kunci dalam urutan eksekusi. Perulangan do/while akan menjalankan blok kode setidaknya satu kali sebelum mengecek kondisi yang terdapat di dalam kurung while.

Bentuk umum dari perulangan do/while adalah sebagai berikut:

```javascript
do {
    // blok kode yang akan diulang
} while (<kondisi>);
```

Perbedaan utama terletak pada urutan pengecekan kondisi. Dalam perulangan do/while, blok kode akan diulang sekali tanpa memperhatikan kondisi. Setelah satu iterasi selesai, barulah kondisi di dalam kurung while diperiksa. Jika kondisi tersebut true, perulangan akan dilanjutkan; jika false, perulangan akan berhenti.

Jadi, perbedaan inti antara perulangan do/while dan while adalah lokasi pengecekan kondisi. Perulangan do/while mengecek kondisi di belakang (setelah melakukan setidaknya satu iterasi), sementara perulangan while memeriksa kondisi di awal sebelum melakukan iterasi pertama.

Pemahaman akan perbedaan ini penting untuk pengembang Javascript, karena hal ini memengaruhi cara mereka merancang dan mengimplementasikan perulangan tergantung pada kebutuhan dan logika program yang sedang dibangun.

 

 - Perulangan Foreach di Javascript:

Perulangan foreach dalam Javascript menjadi pilihan efisien untuk mengeksekusi operasi pada setiap item di dalam array. Berbeda dengan beberapa perulangan lainnya, perulangan foreach termasuk dalam kategori counted loop, di mana jumlah perulangannya ditentukan oleh panjang atau jumlah elemen dalam array yang sedang diiterasi.

Ada dua pendekatan umum dalam menggunakan perulangan foreach di Javascript:

1. Menggunakan for dengan Operator in:

   Dalam pendekatan ini, perulangan foreach dapat diterapkan dengan menggunakan pernyataan for bersama dengan operator in. Contoh implementasinya adalah sebagai berikut:

 ```javascript
   let myArray = [1, 2, 3, 4, 5];



   for (let index in myArray) {
       console.log("Item ke-" + index + ": " + myArray[index]);
   }
   ``` 

   Dengan cara ini, kita dapat dengan mudah mengakses indeks dan nilai setiap item dalam array.

 

2. Menggunakan Method forEach():

   Pendekatan kedua melibatkan penggunaan method forEach() yang disediakan oleh objek array. Contoh penggunaannya sebagai berikut:

```javascript
   let myArray = [1, 2, 3, 4, 5];



   myArray.forEach(function(item, index) {
       console.log("Item ke-" + index + ": " + item);
   });
   ```

   Dengan menggunakan method forEach(), kita dapat memberikan fungsi callback untuk menangani setiap item dalam array, membuat kode lebih terstruktur dan mudah dibaca.

Pemilihan antara kedua pendekatan ini dapat disesuaikan dengan kebutuhan dan preferensi pengembang. Perulangan foreach memberikan kemudahan dan kejelasan dalam menangani array, memudahkan proses pengolahan data dalam skrip Javascript.

 

 - Perulangan dengan Method repeat

Perulangan dengan menggunakan method atau fungsi `repeat()` adalah salah satu cara yang efisien untuk mengulang teks (string) dalam konteks counted loop. Berbeda dengan perulangan for yang lebih umum, fungsi `repeat()` dirancang khusus untuk tujuan pengulangan string dengan sintaks yang lebih ringkas.

Secara konseptual, dapat dianggap bahwa penggunaan fungsi `repeat()` merupakan versi singkat dari perulangan for. Sebagai contoh perbandingan, pertimbangkan dua pendekatan berikut:

 

1. Menggunakan Perulangan For:

```javascript
   for (let i = 0; i < 100; i++){
       document.write("Ulangi kalimat ini!");
   }
   ```

 

2. Menggunakan Method `repeat()`:

```javascript
   document.write("Ulangi kalimat ini! ".repeat(100));
   ```

Dalam kedua contoh tersebut, efeknya adalah menghasilkan teks "Ulangi kalimat ini!" sebanyak 100 kali. Namun, penggunaan `repeat()` memberikan sintaks yang lebih ringkas dan bersih, terutama ketika jumlah iterasi cukup besar.

 

Pemilihan antara perulangan for dan fungsi `repeat()` bergantung pada konteks dan kebutuhan spesifik suatu skrip. Fungsi `repeat()` dapat menjadi alternatif yang elegan untuk menghemat penulisan kode, terutama dalam skenario di mana pengulangan string menjadi fokus utama dari tugas yang dijalankan.

 

 - Perulangan Bersarang (Nested Loop)

Pada pemrograman Javascript, kita memiliki kemampuan untuk membuat perulangan di dalam blok perulangan yang lain, yang dikenal sebagai nested loop atau perulangan bersarang. Konsep ini memungkinkan kita untuk menggabungkan iterasi dari satu loop dengan iterasi dari loop lainnya, menciptakan pola pengulangan yang lebih kompleks.

Contoh penggunaan nested loop dapat dilihat pada potongan kode berikut:

```javascript
for (let i = 0; i < 10; i++) {
    for (let j = 0; j < 10; j++) {
        document.write("<p>Perulangan ke " + i + "," + j + "</p>");
    }
}
```

Dalam contoh ini, terdapat dua perulangan, di mana iterasi dari perulangan luar (`i`) akan mengulang sebanyak 10 kali, dan di setiap iterasi tersebut, perulangan dalam (`j`) akan dijalankan juga sebanyak 10 kali. Hasilnya adalah penulisan pesan dengan pola "Perulangan ke i,j" sebanyak 100 kali, menggambarkan cara nested loop bekerja.

 

Penggunaan nested loop seringkali ditemukan dalam kasus-kasus di mana kita perlu menangani data multidimensional atau menciptakan pola pengulangan yang lebih kompleks. Pemahaman yang baik terhadap nested loop memungkinkan pengembang untuk merancang solusi yang lebih efisien dan terstruktur dalam menangani tugas-tugas pengulangan yang kompleks.

Published on February 14, 2024
Last updated on June 18, 2025