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:
for
statement
Sebuah 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 daricondition
false (salah),for
loop akan dihentikan. Jika ekspresicondition
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 <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 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 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 danx
= 1 - Setelah lewat kedua:
n
= 2 danx
= 3 - Setelah lewat ketiga:
n
= 3 danx
= 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 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 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 didalamwhile
,do-while
,for
, atauswitch
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 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 statementwhile
,do-while
, ataufor
dan melanjutkan eksekusi dari perulangan iterasi selanjutnya. Berbeda dengan statementbreak
,continue
tidak mengakhiri eksekusi dari perulangan sepenuhnya. Pada sebuah perulanganwhile
, dia lompat kembali pada kondisinya. Pada sebuah perulanganfor
, Dia melompat ke ekpresi penambahan keincrement-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 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 Array
,statement for...in akan mengembalikan nilai nama property yang di tetapkan pengguna dalam penambahan numerik indek. Jadi lebih baik menggunakan tradisional perulangan 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 for...of
membuat sebuah iterasi perulangan diatas iterable objects (termasuk Array
, Map
, Set
, 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 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
}