Perulangan Pada JavaScript

View Categories

Perulangan Pada JavaScript

Pengulangan atau loop adalah teknik untuk mengeksekusi kumpulan coding secara berulang-ulang.

Contoh di bawah ini memperlihatkan baris coding yang serupa tapi ditulis berulang-ulang dalam beberapa baris.

text += cars[0] + "<br>";
text += cars[1] + "<br>";
text += cars[2] + "<br>";
text += cars[3] + "<br>";
text += cars[4] + "<br>";
text += cars[5] + "<br>";

Contoh di atas dapat disederhanakan dengan membuat pengulangan seperti pada contoh di bawah ini.

var i;
for (i = 0; i < cars.length; i++) {
  text += cars[i] + "<br>";
}

Jalankan Contoh

Referensi Perulangan JavaScript

Penulisan For Loop

Format penulisan for loop seperti di bawah ini.

for (statement 1; statement 2; statement 3) {
  // code block to be executed
}

Statement 1 (perintah 1) dieksekusi sekali pada saat loop dimulai. Statemen 2 (perintah 2) memeriksa kondisi yang menentukan apakah loop dilanjutkan atau dihentikan. Statemen 3 (perintah 3) dieksekusi pada setiap loop. Di dalam for loop terdapat kumpulan perintah (code block) yang akan dieksekusi berulang-ulang oleh loop.

for (i = 0; i < 5; i++) {
  text += "The number is " + i + "<br>";
}

Jalankan Contoh

Perhatikan contoh di atas. Perintah 1 (i = 0) memberikan nilai 0 kepada variable i, hanya dieksekusi sekali pada saat loop dimulai. Perintah 2 (i < 5) memeriksa nilai i, apabila i lebih kecil dari 5 maka loop dilanjutkan, apabila i lebih besar atau sama dengan 5 maka loop dihentikan. Perintah 3 (i++) dieksekusi setiap kali loop dieksekusi.

Perintah 1

Perintah 1 normalnya digunakan untuk inisialisasi variable yang diperlukan pada loop. Pada perintah 1 kita dapat inisialisasi banyak variable sekaligus dipisahkan dengan koma.

for (i = 0, len = cars.length, text = ""; i < len; i++) {
  text += cars[i] + "<br>";
}

Jalankan Contoh

Perintah 1 tidak wajib, sifatnya opsional dan dapat dihilangkan.

var i = 2;
var len = cars.length;
var text = "";
for (; i < len; i++) {
  text += cars[i] + "<br>";
}

Jalankan Contoh

Perintah 2

Perintah 2 memeriksa kondisi untuk menentukan apakah loop dilanjutkan atau tidak. Apabila perintah 2 menghasilkan nilai boolean true maka loop dilanjutkan. Apabila perintah 2 menghasilkan nilai boolean false maka loop dihentikan. Perintah 2 sifatnya opsional dan bisa dihilangkan. Apabila perintah 2 tidak diberikan maka loop akan dieksekusi selamanya.

Perintah 3

Perintah 3 normalnya digunakan untuk melakukan operasi penambahan atau pengurangan pada suatu variable. Perintah 3 juga bisa dihilangkan (sifatnya opsional) apabila proses penambahan atau pengurangan tersebut dilakukan di dalam loop.

var i = 0;
var len = cars.length;
for (; i < len; ) {
  text += cars[i] + "<br>";
  i++;
}

Jalankan Contoh

For in loop

For in loop adalah pengulangan for khusus untuk object. Pengulangan akan dieksekusi untuk setiap properti yang ada dalam object tersebut.

var person = {fname:"John", lname:"Doe", age:25};

var text = "";
var x;
for (x in person) {
  text += person[x];
}

Jalankan Contoh

For of loop

For of loop adalah pengulangan for khusus untuk array. Pengulangan akan dieksekusi untuk setiap elemen dalam array.

var cars = ["BMW", "Volvo", "Mini"];
var x;

for (x of cars) {
  document.write(x + "<br >");
}

Jalankan Contoh

For of loop juga dapat dipakai pada string. Pengulangan akan dieksekusi untuk setiap karakter dalam string tersebut.

var txt = "JavaScript";
var x;

for (x of txt) {
  document.write(x + "<br >");
}

Jalankan Contoh

Tutorial sebelumnya : Kondisi Dengan Switch
Tutorial setelahnya : Perulangan While JavaScript
Semua Tutorial JavaScript : Tutorial JavaScript 

Tinggalkan Balasan