path: root/files/id/web/javascript/guide/loops_and_iteration/index.html

---
title: Loops and iteration
slug: Web/JavaScript/Panduan/Loops_and_iteration
translation_of: Web/JavaScript/Guide/Loops_and_iteration
---
<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Control_flow_and_error_handling", "Web/JavaScript/Guide/Functions")}}</div>

<p class="summary"><span id="result_box" lang="id"><span>Loop menawarkan cara cepat dan mudah untuk melakukan sesuatu secara berulang-ulang.</span> <span>Bab tentang <a href="/id/docs/Web/JavaScript/Guide">Panduan JavaScript</a> ini memperkenalkan berbagai pernyataan iterasi</span></span><span lang="id"><span> berbeda yang tersedia untuk JavaScript.</span></span></p>

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

<pre class="brush: js">var langkah;
for (langkah= 0; langkah&lt; 5; langkah++) {
  // berlari 5 kali, dengan nilai langkah 0 sampai 4.
  console.log('<span class="short_text" id="result_box" lang="id"><span>Berjalan ke timur satu langkah</span></span>');
}
</pre>

<p><span id="result_box" lang="id"><span>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).</span> <span>Berbagai mekanisme loop menawarkan berbagai cara untuk menentukan titik awal dan akhir perulangan.</span> <span>Ada berbagai situasi yang lebih mudah dikerjakan oleh sebuah tipe loop dibandingkan tipe (loop) yang lain.</span></span></p>

<p><span id="result_box" lang="id"><span>Pernyataan untuk loop yang disediakan dalam JavaScript adalah:</span></span></p>

<ul>
 <li>{{anch("for statement")}}</li>
 <li>{{anch("do...while statement")}}</li>
 <li>{{anch("while statement")}}</li>
 <li>{{anch("labeled statement")}}</li>
 <li>{{anch("break statement")}}</li>
 <li>{{anch("continue statement")}}</li>
 <li>{{anch("for...in statement")}}</li>
 <li>{{anch("for...of statement")}}</li>
</ul>

<h2 id="for_statement"><code>for</code> statement</h2>

<p>Sebuah {{jsxref("statements/for","for loop")}} <span id="result_box" lang="id"><span>mengulang hingga kondisi yang ditentukan evaluasinya menjadi salah/false.</span> <span><code> for</code> loop pada Javascript serupa dengan <code> for </code>loop pada Java dan C</span></span><span lang="id"><span>.</span> <span>Sebuah statement (pernyataan) <code>for </code>  terlihat sebagai berikut:</span></span></p>

<pre class="syntaxbox">for ([initialExpression]; [condition];
[incrementExpression]) statement
</pre>

<p>Ketika sebuah <code>for</code> loop dieksekusi, <span class="short_text" id="result_box" lang="id"><span>Berikut ini akan terjadi:</span></span></p>

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

<h3 id="Contoh"><strong>Contoh</strong></h3>

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

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

&lt;script&gt;
function howMany(selectObject) {
  var numberSelected = 0;
  for (var i = 0; i &lt; 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));
});
&lt;/script&gt;

</pre>

<h2 id="do...while_statement"><code>do...while</code> statement</h2>

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

<pre class="syntaxbox">do
  statement
while (condition);
</pre>

<p><code>statement</code> di jalankan lebih dulu sebelum kondisi diperiksa. Untuk menjalankan banyak statements, gunakan statement blok (<code>{ ... }</code>) untuk membuat grup dari statement tersebut. Jika <code>condition</code> 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 <code>do...while</code>.</p>

<h3 id="Contoh_2"><strong>Contoh</strong></h3>

<p>Dalam contoh berikut, perulangan <code>do</code> di iterasi sekali dan di iterasi kembali sampai i tidak lagi kurang dari 5. </p>

<pre class="brush: js">var i = 0;
do {
  i += 1;
  console.log(i);
} while (i &lt; 5);</pre>

<h2 id="while_statement"><code>while</code> statement</h2>

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

<pre class="syntaxbox">while (condition)
  statement
</pre>

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

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

<p>Untuk mengeksekusi banyak statement, gunakan blok statement ({ ... }) untuk mengelompokan banyak statement tersebut.</p>

<h3 id="Contoh_1"><strong>Contoh 1</strong></h3>

<p>Beikut perulangan <code>while</code> mengiterasi <code>n</code> selama n kurang dari tiga:</p>

<pre class="brush: js">var n = 0;
var x = 0;
while (n &lt; 3) {
  n++;
  x += n;
}
</pre>

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

<ul>
 <li>Setelah lewat awal: <code>n</code> = 1 dan <code>x</code> = 1</li>
 <li>Setelah lewat kedua: <code>n</code> = 2 dan <code>x</code> = 3</li>
 <li>Setelah lewat ketiga: <code>n</code> = 3 dan <code>x</code> = 6</li>
</ul>

<p>Setelah melewati perulangan yang ketiga , kondisinya <code>n &lt; 3</code> tidak lagi bernilai true/benar, jadi perulangan di hentikan.</p>

<h3 id="Contoh_2_2"><strong>Contoh 2</strong></h3>

<p>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 <code>while</code> berikut di eksekusi berulang kali selamanya karena kondisi tidak pernah mendapatkan nilai false/salah:</p>

<pre class="brush: js">while (true) {
  console.log('Hello, world!');
}</pre>

<h2 id="labeled_statement"><code>labeled</code> statement</h2>

<p>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 <code>break</code> atau <code>continue</code> untuk menunjukkan apakah suatu program harus memutuskan loop atau melanjutkan eksekusinya.</p>

<p>Sintak dari statement berlabel terlihat seperti berikut:</p>

<pre class="syntaxbox">label :
   statement
</pre>

<p>Nilai dai sebuah <code><em>label</em></code> dapat berupa identifikasi JavaScript apa pun yang tidak dari kata  kunci yang ada pada javascript. <code><em>statement</em></code><br>
 yang Kamu identifikasi dengan label tersebut dapat berupa statement apa pun.</p>

<h3 id="Contoh_3"><strong>Contoh</strong></h3>

<p>Pada contoh ini, label <code>markLoop</code> mengidentifikasi sebuah perulangan <code>while</code>.</p>

<pre class="brush: js">markLoop:
while (theMark == true) {
   doSomething();
}</pre>

<h2 id="break_statement"><code>break</code> statement</h2>

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

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

<p>Sintak dari statement <code>break</code> terlihat seperti ini:</p>

<pre class="syntaxbox">break [<em>label</em>];
</pre>

<p>Bentuk pertama sintak mengakhiri perulangan atau <code>switch</code>; Bentuk kedua sintak mengakhiri statement dari spesifik label.</p>

<h3 id="Contoh_1_2"><strong>Contoh</strong> <strong>1</strong></h3>

<p>Contoh berikut mengiterasi melewati elemen-elemen dalam array sampai menemukan indeks elemen  yang bernilai dari <code>theValue</code>:</p>

<pre class="brush: js">for (var i = 0; i &lt; a.length; i++) {
  if (a[i] == theValue) {
    break;
  }
}</pre>

<h3 id="Contoh_2_Breaking_pada_sebuah_label"><strong>Contoh 2: </strong>Breaking pada sebuah label</h3>

<pre class="brush: js">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 &amp;&amp; x === 10) {
      break labelCancelLoops;
    } else if (z === 10) {
      break;
    }
  }
}
</pre>

<h2 id="continue_statement"><code>continue</code> statement</h2>

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

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

<p>Sintak statement <code>continue</code> terlihat sebagai berikut:</p>

<pre class="syntaxbox">continue [<em>label</em>];
</pre>

<h3 id="Contoh_1_3"><strong>Contoh 1</strong></h3>

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

<pre class="brush: js">var i = 0;
var n = 0;
while (i &lt; 5) {
  i++;
  if (i == 3) {
    continue;
  }
  n += i;
}
</pre>

<h3 id="Contoh_2_3"><strong>Contoh 2</strong></h3>

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

<p>JIka <code>continue</code> dipunyai label dari <code>checkiandj</code>, program akan terus berlanjut ke bagian atas dari statement <code>checkiandj</code> .</p>

<pre class="brush: js">checkiandj:
  while (i &lt; 4) {
    console.log(i);
    i += 1;
    checkj:
      while (j &gt; 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);
  }</pre>

<h2 id="for...in_statement"><code>for...in</code> statement</h2>

<p>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 <code>for...in</code> terlihat sebagai berikut:</p>

<pre class="syntaxbox">for (variable in object) {
  statements
}
</pre>

<h3 id="Contoh_4"><strong>Contoh</strong></h3>

<p>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.</p>

<pre class="brush: js">function dump_props(obj, obj_name) {
  var result = '';
  for (var i in obj) {
    result += obj_name + '.' + i + ' = ' + obj[i] + '&lt;br&gt;';
  }
  result += '&lt;hr&gt;';
  return result;
}
</pre>

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

<pre class="brush: js">car.make = Ford
car.model = Mustang
</pre>

<h3 id="Arrays"><strong>Arrays</strong></h3>

<p>Meskipun mungkin menggunakan ini sebagai cara untuk melakukan iterasi di atas elemen {{jsxref("Array")}},statement <strong>for...in</strong> 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  <strong>for...in</strong> mengiterasi diatas nama properti yang di tetapkan pengguna pada penambahan elemen array, Jika kamu merubah array, seperti menambahkan properti atau metode. </p>

<h2 id="for...of_statement"><code>for...of</code> statement</h2>

<p>Statement {{jsxref("statements/for...of","for...of")}} membuat sebuah iterasi perulangan diatas <a href="/en-US/docs/Web/JavaScript/Guide/iterable">iterable objects</a> (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.</p>

<pre class="syntaxbox">for (<em>variable</em> of <em>object</em>) {
  <em>statement
</em>}</pre>

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

<pre class="brush:js">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
}
</pre>

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