--- title: Loops and iteration slug: Web/JavaScript/Guide/Loops_and_iteration translation_of: Web/JavaScript/Guide/Loops_and_iteration original_slug: Web/JavaScript/Panduan/Loops_and_iteration ---

{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Control_flow_and_error_handling", "Web/JavaScript/Guide/Functions")}}

Loop menawarkan cara cepat dan mudah untuk melakukan sesuatu secara berulang-ulang. Bab tentang Panduan JavaScript ini memperkenalkan berbagai pernyataan iterasi berbeda yang tersedia untuk JavaScript.

Anda dapat menganggap loop sebagai versi permainan terkomputerisasi di mana Anda menyuruh seseorang untuk mengambil langkah X menuju satu arah lalu langkah Y ke arah yang lain; Sebagai contoh, gagasan "Pergilah lima langkah ke timur" dapat di ekspresikan dengan cara berikut sebagai sebuah loop (pengulangan):

var langkah;
for (langkah= 0; langkah< 5; langkah++) {
  // berlari 5 kali, dengan nilai langkah 0 sampai 4.
  console.log('Berjalan ke timur satu langkah');
}

Ada beberapa jenis loop yang berbeda, namun pada dasarnya semuanya melakukan hal yang sama, mereka mengulangi sebuah aksi beberapa kali (dan sebenarnya memungkinkan bahwa dapat saja menjadi nol). Berbagai mekanisme loop menawarkan berbagai cara untuk menentukan titik awal dan akhir perulangan. Ada berbagai situasi yang lebih mudah dikerjakan oleh sebuah tipe loop dibandingkan tipe (loop) yang lain.

Pernyataan untuk loop yang disediakan dalam JavaScript adalah:

{{anch("for statement")}}
{{anch("do...while statement")}}
{{anch("while statement")}}
{{anch("labeled statement")}}
{{anch("break statement")}}
{{anch("continue statement")}}
{{anch("for...in statement")}}
{{anch("for...of statement")}}

`for` statement

Sebuah {{jsxref("statements/for","for loop")}} mengulang hingga kondisi yang ditentukan evaluasinya menjadi salah/false. for loop pada Javascript serupa dengan for loop pada Java dan C. Sebuah statement (pernyataan) for terlihat sebagai berikut:

for ([initialExpression]; [condition];
[incrementExpression]) statement

Ketika sebuah for loop dieksekusi, Berikut ini akan terjadi:

Ekspresi yang menginisialisasi yaitu initialExpression, Jika ada, maka akan di eksekusi. Ekspresi ini biasanya menginisialisasi satu atau lebih penghitung loop, tetapi sintaksnya memperbolehkan ekspresi dengan tingkat kerumitan apapun. Ekspresi ini juga bisa mendeklarasikan variabel.
Ekpresi condition di evaluasi. JIka value dari kondisi adalah true (benar), maka statement loop akan dieksekusi. Jika value dari condition false (salah), for loop akan dihentikan. Jika ekspresi condition dihilangkan sama sekali, kondisinya diasumsikan benar.
Mengeksekusi Statement . Untuk mengeksekusi berbagai pernyataan, gunakanlah sebuah blok pernyataan ({ ... }) untuk mengelompokkan pernyataan-pernyataan tersebut.
Jika ada, ekspresi baru incrementExpression di eksekusi.
Kontrol kembali ke langkah ke-2.

Contoh

function (fungsi) berikut memuat sebuah statement for yang menghitung angka dari opsi yang terpilih dalam sebuah daftar scrolling (sebuah elemen {{HTMLElement("select")}} yang memperbolehkan berbagai pilihan). Statement for mendeklarasikan variable i dan menginisialisasinya ke nol. Ia memeriksa bahwa i lebih kecil dari nomor dari opsi dalam elemen <select> , menampilkan statement if yang berhasil, dan menaikan i satu setelah masing-masing lolos melewati loop.

<form name="selectForm">
  <p>
    <label for="musicTypes">Choose some music types, then click the button below:</label>
    <select id="musicTypes" name="musicTypes" multiple="multiple">
      <option selected="selected">R&B</option>
      <option>Jazz</option>
      <option>Blues</option>
      <option>New Age</option>
      <option>Classical</option>
      <option>Opera</option>
    </select>
  </p>
  <p><input id="btn" type="button" value="How many are selected?" /></p>
</form>

<script>
function howMany(selectObject) {
  var numberSelected = 0;
  for (var i = 0; i < selectObject.options.length; i++) {
    if (selectObject.options[i].selected) {
      numberSelected++;
    }
  }
  return numberSelected;
}

var btn = document.getElementById('btn');
btn.addEventListener('click', function() {
  alert('Number of options selected: ' + howMany(document.selectForm.musicTypes));
});
</script>

`do...while` statement

Pernyataan/statement {{jsxref("statements/do...while", "do...while")}} terus di ulangi sampai evaluasi kondisi bernilai false/salah. Sebuah do...while statement terlihat sebagai berikut:

do
  statement
while (condition);

statement di jalankan lebih dulu sebelum kondisi diperiksa. Untuk menjalankan banyak statements, gunakan statement blok ({ ... }) untuk membuat grup dari statement tersebut. Jika condition bernilai benar, maka statement akan dijalankan kembali. Kondisi diperiksa pada setiap akhir eksekusi. Ketika kondisi bernilai salah, eksekusi berhenti dan kontrol akan melewati pernyataan yang mengikuti do...while.

Contoh

Dalam contoh berikut, perulangan do di iterasi sekali dan di iterasi kembali sampai i tidak lagi kurang dari 5.

var i = 0;
do {
  i += 1;
  console.log(i);
} while (i < 5);

`while` statement

Sebuah statement {{jsxref("statements/while","while")}} di eksekusi pernyataan pernyataannya asalkan memenuhi syarat kondisinya yang bernilai true/benar. Sebuah statement while terlihat sebagai berikut:

while (condition)
  statement

Jika kondisi bernilai false/salah, statement dengan perulangan berhenti di eksekusi dan kontrol akan melewati statement yang mengikuti perulangan tersebut.

Kondisi terjadi sebelum statement dalam perulangan di eksekusi. Jika kondisi bernilai true/benar, statement di eksekusi dan kondisi di uji kembali. Jika kondisi bernilai false/salah, eksekusi akan berhenti dan konrol lewat untuk statement yang mengikuti while.

Untuk mengeksekusi banyak statement, gunakan blok statement ({ ... }) untuk mengelompokan banyak statement tersebut.

Contoh 1

Beikut perulangan while mengiterasi n selama n kurang dari tiga:

var n = 0;
var x = 0;
while (n < 3) {
  n++;
  x += n;
}

Dengan setiap iterasi, perulangan akan menambahkan increments n dan menambahkan nilainya pada x. Karena itu, x dan n mengambil nilai nilai berikut:

Setelah lewat awal: n = 1 dan x = 1
Setelah lewat kedua: n = 2 dan x = 3
Setelah lewat ketiga: n = 3 dan x = 6

Setelah melewati perulangan yang ketiga , kondisinya n < 3 tidak lagi bernilai true/benar, jadi perulangan di hentikan.

Contoh 2

Hindari perulangan tanpa batas. Pastikan kondisi dalam perulangan mendapatkan kondisi yang bernilai false/salah untuk berhenti, jika tidak perulangan tidak akan pernah berhenti. Statements dalam while berikut di eksekusi berulang kali selamanya karena kondisi tidak pernah mendapatkan nilai false/salah:

while (true) {
  console.log('Hello, world!');
}

`labeled` statement

Sebuah {{jsxref("statements/label","label")}} menyediakan sebuah statement dengan pengenal yang memungkinkan Anda merujuknya di tempat lain dalam program Kamu. Untuk contohnya, Kamu dapat menggunakan label untuk mengidentifikasi pengulangan, lalu gunakan statement break atau continue untuk menunjukkan apakah suatu program harus memutuskan loop atau melanjutkan eksekusinya.

Sintak dari statement berlabel terlihat seperti berikut:

label :
   statement

Nilai dai sebuah label dapat berupa identifikasi JavaScript apa pun yang tidak dari kata kunci yang ada pada javascript. statement
yang Kamu identifikasi dengan label tersebut dapat berupa statement apa pun.

Contoh

Pada contoh ini, label markLoop mengidentifikasi sebuah perulangan while.

markLoop:
while (theMark == true) {
   doSomething();
}

`break` statement

Gunakan {{jsxref("statements/break","break")}} statement untuk menghentikan perulangan, switch, atau konjungsi dengan statement yang memakai label.

Ketika kamu menggunakan break tanpa sebuah label, Itu akan langsung mengakhiri lampiran yang ada didalam while, do-while, for, atau switch dengan segera dan kontrol pindah dari statement tersebut.
Ketika kamu menggunakan break pada sebuah label, Itu akan mengakhiri statement dari spesifik label.

Sintak dari statement break terlihat seperti ini:

break [label];

Bentuk pertama sintak mengakhiri perulangan atau switch; Bentuk kedua sintak mengakhiri statement dari spesifik label.

Contoh 1

Contoh berikut mengiterasi melewati elemen-elemen dalam array sampai menemukan indeks elemen yang bernilai dari theValue:

for (var i = 0; i < a.length; i++) {
  if (a[i] == theValue) {
    break;
  }
}

Contoh 2: Breaking pada sebuah label

var x = 0;
var z = 0;
labelCancelLoops: while (true) {
  console.log('Outer loops: ' + x);
  x += 1;
  z = 1;
  while (true) {
    console.log('Inner loops: ' + z);
    z += 1;
    if (z === 10 && x === 10) {
      break labelCancelLoops;
    } else if (z === 10) {
      break;
    }
  }
}

`continue` statement

Statement {{jsxref("statements/continue","continue")}} bisa digunakan untuk memulai lagi statement while, do-while, for, atau label.

Ketika kamu menggunakan continue tanpa sebuah label, itu akan menghentikan iterasi saat ini dari statement while, do-while, atau for dan melanjutkan eksekusi dari perulangan iterasi selanjutnya. Berbeda dengan statement break, continue tidak mengakhiri eksekusi dari perulangan sepenuhnya. Pada sebuah perulangan while, dia lompat kembali pada kondisinya. Pada sebuah perulangan for, Dia melompat ke ekpresi penambahan ke increment-expression.
Ketika kamu menggunakan continue dengan sebuah label, itu berlaku untuk pernyataan perulangan yang diidentifikasi dengan label tersebut.

Sintak statement continue terlihat sebagai berikut:

continue [label];

Contoh 1

Contoh berikut menunjukkan sebuah perulangan while dengan sebuah statement continue yang di eksekusi ketika niai dari i adalah tiga Jadi, n mengambil nilai satu, tiga, tujuh dan dua belas.

var i = 0;
var n = 0;
while (i < 5) {
  i++;
  if (i == 3) {
    continue;
  }
  n += i;
}

Contoh 2

Sebuah statement yang berlabel checkiandj berisikan sebuah statement berlabel checkj. Jika ada continue , Programnya akan menghentikan iterasi saat ini dari checkj dan memulai iterasi selanjutnya. Setiap kali continue ditemui, checkj di iterasi kembali sampai kondisinya bernilai false/salah. Ketika bernilai false/salah, Sisa dari statement checkiandj sudah selesai, dan checkiandj di iterasi kembali sampai kondisi bernilai salah false. Ketika bernilai salah false , program melanjutkan pada statement yang mengikuti checkiandj.

JIka continue dipunyai label dari checkiandj, program akan terus berlanjut ke bagian atas dari statement checkiandj .

checkiandj:
  while (i < 4) {
    console.log(i);
    i += 1;
    checkj:
      while (j > 4) {
        console.log(j);
        j -= 1;
        if ((j % 2) == 0) {
          continue checkj;
        }
        console.log(j + ' is odd.');
      }
      console.log('i = ' + i);
      console.log('j = ' + j);
  }

`for...in` statement

Statement {{jsxref("statements/for...in","for...in")}} mengiterasi sebuah variabel spesifik diatas properti enumerable dari sebuah objek. Untuk setiap properti yang berbeda, JavaScript mengeksekusi pernyataan pernyataan yang spesifik. Sebuah statement for...in terlihat sebagai berikut:

for (variable in object) {
  statements
}

Contoh

Function/fungsi berikut mengambil argumentnya dari sebuah objek dan nama objek. Lalu dia di iterasi diatas semua property objek dan mengembalikan sebuah string yang mendaftarkan nama properti dan nilainya.

function dump_props(obj, obj_name) {
  var result = '';
  for (var i in obj) {
    result += obj_name + '.' + i + ' = ' + obj[i] + '<br>';
  }
  result += '<hr>';
  return result;
}

Untuk sebuah objek car dengan property make dan model, result/hasil akan menjadi:

car.make = Ford
car.model = Mustang

Arrays

Meskipun mungkin menggunakan ini sebagai cara untuk melakukan iterasi di atas elemen {{jsxref("Array")}},statement for...in akan mengembalikan nilai nama property yang di tetapkan pengguna dalam penambahan numerik indek. Jadi lebih baik menggunakan tradisional perulangan {{jsxref("statements/for","for")}} dengan sebuah numerik indek ketika mengiterasi diatas array, karena statement for...in mengiterasi diatas nama properti yang di tetapkan pengguna pada penambahan elemen array, Jika kamu merubah array, seperti menambahkan properti atau metode.

`for...of` statement

Statement {{jsxref("statements/for...of","for...of")}} membuat sebuah iterasi perulangan diatas iterable objects (termasuk {{jsxref("Array")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, {{jsxref("functions/arguments","arguments")}} object dan seterusnya), menjalankan hubungan iterasi khusus dengan statement yang akan dieksekusi untuk setiap nilai properti yang berbeda.

for (variable of object) {
  statement
}

Contoh berikut menampilkan perbedaan diantara sebuah perulangan for...of dan sebuah perulangan {{jsxref("statements/for...in","for...in")}}. Ketika for...in mengiterasi diatas nama-nama properti, for...of mengiterasi diatas nilai-nilai properti:

let arr = [3, 5, 7];
arr.foo = 'hello';

for (let i in arr) {
   console.log(i); // logs "0", "1", "2", "foo"
}

for (let i of arr) {
   console.log(i); // logs 3, 5, 7
}

{{PreviousNext("Web/JavaScript/Guide/Control_flow_and_error_handling", "Web/JavaScript/Guide/Functions")}}

for statement

Contoh

do...while statement

Contoh

while statement

Contoh 1

Contoh 2

labeled statement

Contoh

break statement

Contoh 1

Contoh 2: Breaking pada sebuah label

continue statement

Contoh 1

Contoh 2

for...in statement

Contoh

Arrays

for...of statement

`for` statement

`do...while` statement

`while` statement

`labeled` statement

`break` statement

`continue` statement

`for...in` statement

`for...of` statement