diff options
Diffstat (limited to 'files/id/web/javascript/guide/loops_and_iteration/index.html')
| -rw-r--r-- | files/id/web/javascript/guide/loops_and_iteration/index.html | 330 |
1 files changed, 330 insertions, 0 deletions
diff --git a/files/id/web/javascript/guide/loops_and_iteration/index.html b/files/id/web/javascript/guide/loops_and_iteration/index.html new file mode 100644 index 0000000000..7fbb416c43 --- /dev/null +++ b/files/id/web/javascript/guide/loops_and_iteration/index.html @@ -0,0 +1,330 @@ +--- +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< 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> <select></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"><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> + +</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 < 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 < 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 < 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 < 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 && 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 < 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 < 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); + }</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] + '<br>'; + } + result += '<hr>'; + 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> |