langan While Pada Javascript

Tutorial Perulangan Pada Javascript Perulangan Array

Loop atau perulangan array pada javascript dilakukan untuk melakukan tugas berulang berdasarkan suatu kondisinya. Pada artikel kali ini kita akan membahas secara lengkap mengenai perulangan array pada javascript yang dimana perulangan array dapat mempermudah untuk memanggil dan menampilkan data.

Mengenal Looping Pada Javascript

Setiap bahasa pemrograman pastinya memiliki fungsi tersebut, tanpa adanya looping maka akan sangat sulit untuk menuliskan sebuah program, fungsi looping sendiri digunakan untuk mengeksekusi suatu baris script atau kode secara berulang sesuai dengan kondisi yang kita buat. Dalam javascript dikenal dengan fungsi loop yaitu for, while, do while dan loop dengan array pada javascript.

Baca Juga: Belajar Pemrograman Javascript Lengkap

Ketika kita akan mencetak kalimat secara berulang-ulang dengan contoh Belajar Looping Array Pada Javascript sebanyak 10 kali. Tentunya kita harus menuliskan sebanyak 10 kali dengan menuliskan fungsi document.write() sebanyak 10 kali:

document.write("<p>Belajar Looping Array Pada Javascript</p>");
document.write("<p>Belajar Looping Array Pada Javascript</p>");
document.write("<p>Belajar Looping Array Pada Javascript</p>");
document.write("<p>Belajar Looping Array Pada Javascript</p>");
document.write("<p>Belajar Looping Array Pada Javascript</p>");
document.write("<p>Belajar Looping Array Pada Javascript</p>");
document.write("<p>Belajar Looping Array Pada Javascript</p>");
document.write("<p>Belajar Looping Array Pada Javascript</p>");
document.write("<p>Belajar Looping Array Pada Javascript</p>");
document.write("<p>Belajar Looping Array Pada Javascript</p>");

Apakah kita boleh untuk menuliskan seperti sintak diatas? boleh-boleh saja. tetapi ketika harus membuat 1000 atau 10.000 bahkan lebih maka kita akan dibuat kerepotan untuk membuatnya.

Dengan menggunakan perulagan tentunya akan sangat membantu ketika kita mengeksekusi kode program dengan jumlah yang kita inginkan.

Terdapat 6 bentuk perulangan pada pemrograman javascript dan secara umum, perulangan dibagi menjadi dua bagian.

Yaitu: counted loop dan uncounted loop. Berikut merupakan perbedaannya.

  • Counted Loop merupakan perulangan yang jelas dan tentunya sudah kita tentukan sendiri banyak perulangannya.
  • Sedangkan Uncounted Loop, merupakan perulangan yang tidak jelas berapa kali harus melakukan perulangan.

Perulangan yang termasuk kedalam Counted Loop:

  • Perulangan For
  • Perulangan Foreach
  • Perulangan Repeat
  • Perulangan Array

Perulangan yang termasuk kedalam Uncounted Loop:

  • Perulangan While
  • Perulangan Do/ While

Baik kita akan bahas satu persatu secara lengkap, silahkan simak tutorial dibawah ini.

Perulangan For Pada Javascript

Perulangan for merupakan perulangan yang termasuk dalam bagian counted loop, karena perulangan for sudah jelas berapa kali akan melakukan perulangan.

Berikut ini pseudo-code perulangan for.

for([inisialisasi]; [kondisi]; [eksekusi iterasi]) {
     // blok kode
}
  • Inisialisasi merupakan saat pertama kali untuk mendeteksi sebuah nilai awal, dimana nilai awal tersebut akan berubah selama belum memenuhi syarat dan kondisi.
  • Kondisi berfungsi untuk mengecek perubahan yang terjadi setiap kali melakukan eksekusi iterasi perulangan dengan menggunakan suatu operator perbandingan.
  • Eksekusi Iterasi merupakan suatu proses terakhir setiap kali terjadi eksekusi iterasi, ini biasa digunakan untuk proses penambahan (increment) atau suatu pengurangan (decrement).

Contoh kode perulangan for, dimana kita akan mencoba menampilkan angka 1 sampai dengan 20 tanpa melakukan penulisan secara manual.

<html>
<head>
     <script type="text/javascript">
          for(var i = 1; i <= 20; i++) {
	       console.log(i);
	  }
     </script>
</head>
</html>

Dari script diatas ketika kita mencoba untuk mengimlementasikannya pada console browser maka harus nya kita melihat angka mulai dari 1 sampai angka 20.

Contoh lainnya penggunaan let pada for bentuk kodenya seperti berikut ini:

for(let i = 0; i < 20; i++){
    document.write("<p>Looping ke-" + i + "</p>")
}

Yang harus kita perhatikan adalah kondisi yang berada didalam kurung setelah kata for.

Kondisi tersebut akan menentukan beberapa point berikut ini:

  • Perhitungan akan dimulai dari angka 0 (i = 0);
  • Sampai berapakah banyak hitungan? i < 20;.
  • Lalu disetiap perulangan i akan bertambah 1 nilai (increment).

Contoh lainnya jika kita ingin melakukan looping yang lebih komplek, sangat disarankan untuk memakai sintak seperti berikut ini. Sintaks terebut membutuhkan parameter iterator (perhitungan), kondisi dan increnment berikut penulisan scriptnya.

var count;
document.write("Looping dimulai!" + "<br />");
         
for(count = 0; count < 20; count++){
 document.write("Current Count : " + count );
 document.write("<br />");
}
         
document.write("Looping selesai!");

Variabel i pada perulangan for digunakan untuk menyimpan nilai perhitungan. Jadi setiap perhitungan yang dilakukan nilai i akan selalu bertambah satu nilai. Karena kita sudah menentukan pada bagian i++.

Lalu bagimana membuat looping mundur atau berkurang, caranya sangat mudah kita tinggal isi nilai counter dengan nilai terbesar, misalnya kita akan menghitung mulai dari 20 sampai dengan 0. Maka nilai counter, kita akan isi dengan nilai 20.

Lalu pada bagian kondisi perbandingannya, kita berikan counter > 0. Yang artinya ketika nilai conter lebih besar dari 0 maka akan terus melakukan perulangan.

Kita akan menggunakan konsep Decrement dimana dikurangi (-1) nilai counter pada setiap perulangannya (counter–).

for(let i = 20; i > 0; i--){
    document.write("<p>Looping ke-" + i + "</p>")
}

Selanjutnya masuk kepada pembahasan mengenai perulangan foreach.

Perulangan Foreach Pada Javascript

Perulangan yang paling aman untuk melakukan pengolahan data array menurut penulis adalah dengan menggunakan foreach, karena proses indexing dilakukan secara otomatis tanpa perlu menentukan key didalam iterasi.

Perulangan foreach biasanya digunakan untuk mencetak item didalam array. Perulangan ini termasuk juga kedalam counted loop, karena jumla perulangan akan ditentukan dari panjang array yang tersedia.

Terdapat dua cara untuk menggunakan perulangan foreach pada pemrograman javascript.

  • Menggunakan for dengan operator in.
  • Menggunakan method forEach().

Contohnya.

<html>
<head>
	<script type="text/javascript">
		var arr = ['Honda', 'Kawasaki', 'Yamaha', 'Suzuki'];

		arr.forEach(function(nilai) {
			console.log(nilai);
		});
	</script>
</head>
</html>

Penggalan kode diatas tentunya akan menampilkan daftar data yang terdapat didalam array yang sudah dilakukan pendeklarasian., lalu jika kita ingin melihat key pada nilai-nilai didalam array tersebut kita dapat menambahkan satu variabel setelah varabel nilai, kode seperti dibawah ini.

<html>
<head>
	<script type="text/javascript">
		var arr = ['Honda', 'Kawasaki', 'Yamaha', 'Suzuki'];

		arr.forEach(function(elemen, kunci) {
			console.log('Jenis motor ' + produksi + ' adalah ' + motor);
		});
	</script>
</head>
</html>

Contoh lainnya dari bentuk perulangan dengan foreach adalah seperti berikut:

var languages = ["Javascript", "PHP", "Python", "Typescript"];

for(i in languages){
    document.write(i+". "+ languages[i] + "<br/>");
}

Selanjutnya kita akan bahas, perulangan repet pada pemrograman javascript

Perulangan Repeat Pada Javascript

Perulangan dengan menggunakan metode repeat atau fungsi repeat() termasuk kedalam perulangan counted loop. Fungsi tersebut khusus digunakan untuk mengulang sebuah teks (string), perulangan ini dapat dikatakan sebagai cara singkat dari perulangan for.

Contoh:

Apabila kita menggunakan for, maka sintak yang kita tulis seperti berikut:

for( let i = 0; i < 10; i++){
    document.write("Belajar Loop Javascript!");
}

Lalu ketika kita menggunakan fungsi repeat():

document.write("Belajar Loop Javascript".repeat(10));

Maka ketika kita menggunakan script tersebut hasilnya akan sama, seperti kita menggunakan script for yaitu dengan mengulangi kalimat “Belajar Loop Javascript” sebanya 10 kali.

Perulangan Array Pada Javascript

Terdapat beberapa cara untuk membuat pengulangan array pada javascript, tetapi mungkin akan sulit untuk memilih cara yang tepat, Terdapat beberapa cara untuk looping array pada javascript yaitu dengan metode foreach dan collection library serta dapat menggunakan each helper method. Yang harus kita pahami adalah objek pada javascript hanyalah sebuah array khusus dan kalian dapat mengulangi anggotanya.

Pada bagian ini kalian akan mempelajari berbagai cara untuk mengulangi (look) larik pada javascript termasuk penggunaan larik objek asosiatif untuk menemukan nilai yang diinginkan.

Dasar Perulangan Array Pada Javascript

Javascript untuk loop berulang terdapat pada setiap item didalam array, Array pada pemrograman javascript berbasis 0 (nol), yang berarti item pertama direferensikan dengan nilai indek ke 0 (nol).

Referensi item dalam suatu array dilakukan dengan indeks numerik, mulai dengan nilai 0 hingga diakhiri dengan panjang array dikurangi dengan nilai 1. Berikut merupakan contoh scirpt yang digunakan untuk mengakses anggota dalam array.

for (inisialisasi; kondisi; ekspresi akhir) { // kode yang akan dieksekusi}

Dari script diatas kita dapat melihat, pernyataan for loop menggunakan tiga buah ekspresi yaitu: inisialisasi, kondisi dan eksperesi akhir. Dibagian Eksperesi akhir tentunya dieksekusi pada akhir setiap loop. Biasa hal tersebut digunakan untuk menaikan indeks.

Berikut ini merupakan contoh penggunaan javascript untuk perulangan pada array.

let myArray = ["satu", "dua", "tiga", "empat"];
for(biarkan i = 0; i < myArray.length; i++){
    console.log(myArray[i]);
}

Jika kalian perlu untuk membuat perulangan dengan properti atau bidang tingkat kedua, kalian dapat menggunakan sarang untuk loop atau (nets for loop). Hal terbesar yang harus kalian lakukan adalah dengan mendeklarasikan variabel indeks secara terpisah.

let myArray = [{"child": ["satu", "dua", "tiga", "empat"]},
{"child": ["lima", "enam", "tujuh", "delapan"]}];
       for(let i = 0; i < myArray.length; i++){
            let childArray = myArray[i].child;
            for(let j = 0; j < childArray.length; j++){
                console.log(childArray[j]);
             }
        }/* Keluaran: satu dua tiga empat lima enam tujuh delapan * /

Jika kalian perlu untuk menghentikan looping array tersebut, kalian dapat menggunakan pernyataan break, atau dapat juga untuk mengatur indeks kepanjang array atau kedalam nilai yang membuat pernyataan tidak benar.

Contoh penerapannya seperti berikut:

var myArray = [...];
      for(let i = 0; i < myArray.length; i++){ 
             if([condition met]){ 
                    break; 
             } 
       console.log(myArray[i]);
}

Jika kalian menghilangkan pernyataan kondisi, kalian harus menggunakan break untuk mengakhiri perulangan for. Jika tidak, itu menciptakan loop tak terbatas karena kriterianya tidak pernah terpenuhi.

Perulangan While Pada Javascript

Perulangan while pada javascript merupakan perulangan yang termasuk kedalam perulangan uncounted loop. Perulangan while juga dapat menjadi perulangan yang counted loop dengan cara memberikan counter didalamnya.

berikut merupakan contoh pelangan pada while pada javascript.

while (condition) {
  // code block to be executed
}

Silahkan perhatikan contoh script dibawah ini, selama variabel i bernilai bernilai lebih kecil dari 10 (i < 10) maka perulangan akan terus dieksekusi.

while (i < 10) {
  text += "The number is " + i;
  i++;
}

Selanjutnya untuk contoh yang lebih komplek dari perulangan while javascript, silahkan simak kembali pembahasan berikut.

var ulangi = confirm("Belajar while pada javascript");
var counter = 0;

while(ulangi){
    var jawab = confirm("Belajar while pada javascript")
    counter++;
    if(jawab == false){
        ulangi = false;
    }
}

document.write("Perulangan sebanyak "+ counter +" kali");

Script diatas dapat kita sederhanakan menjadi:

var ulangi = confirm("Belajar while pada javascript");
var counter = 0;

while(ulangi){
    counter++;
    ulangi = confirm("Belajar while pada javascript");
}

document.write("Perulangan sebanyak "+ counter +" kali");

Silahkan perhatikan blok kode yang berikut:

while(ulangi){
    counter++;
    ulangi = confirm("Belajar while pada javascript");
}

Pada scipt diatas, perulangan akan terajadi selama variabel ulangi bernilai true. Selanjutnya kita menggunakan fungsi confirm() untuk menampilkan dialog konfirmasi. Selama kita memilih OK pada dialog konfirmasi, maka pada variabel ulangi akan bernilai true.

Tetapi jika kita memilih cancel, maka variabel ulangi akan bernilai false.

Saat ulangi bernilai false, maka perulangan akan dihentikan.

Perulangan Do/While Pada Javascript

Perulangan do/while pada javascript sama halnya seperti perulangan while. perbedaannya, pada perulangan do/while akan melakukan perulangan sebanyak 1kali pada pertama kalinya, lalu selanjunyanya mengecek kondisi yang terdapat didalam kurung.

Berikut merupakan contoh script dari do/while javascript.

do {
    //kalian atau perintah yang akan dilakukan perulangan
} while (<kondisi>);

Untuk memahami lebih detail mengenai perbedaan antara while dengan do/while yaitu:

Perulangan do/while akan mengecek terlebih dahulu kondisi dibagian belakang (sesudah mengulang).

Sedangkan untuk while akan mengecek kondisi dibagian depat atau awal (sebelum mengulang).

Berikut contoh script sederhana ketika kita mengunakan do/while.

do {
  text += "The number is " + i;
  i++;
}
while (i < 10);

Untuk contoh yang lebih komplek lagi maka dapat perhatikan script dibawah ini.

var ulangi = confirm("Belajar do/while pada javascript");;
var counter = 0;

do {
    counter++;
    ulangi = confirm("Belajar do/while pada javascript");
} while(ulangi)

document.write("Perulangan sebanyak "+ counter +" kali");

contoh tersebut hampir sama dengan contoh perulangan while, saat perulangan pertama, cobalah untuk membatalkan perulangannya dengan memilih cancel.

Baca Juga : Jenis Operator Pada Javascript

Kesimpulan

Intinya dalam suatu perulangan digunakan untuk melakukan pengulangan, ini tentunya merupakan hal dasar yang harus kalian pahami saat belajar dan membuat program ketika melibatkan javascript.

Terimakasih telah berkunjung dan membaca artikel ini mengenai perulangan array pada javascript, semoga artikel ini dapat bermanfaat bagi teman-teman yang membacanya.

By: Muhammad Rizal Supriadi

Leave a Comment

Your email address will not be published. Required fields are marked *