For Loop JavaScript: Sintaks, Contoh, Break dan Continue

For Loop Klasik

Saat kamu tahu berapa kali sesuatu ingin diulang, loop for adalah alatnya. Loop ini mengemas tiga bagian perulangan berhitung, yaitu awal, akhir, dan langkah, ke dalam satu baris header.

for (let i = 0; i < 5; i++) {
    console.log("iteration", i);
}

Lima iterasi, lima baris output. Cara membaca header-nya:

• let i = 0 berjalan sekali, sebelum loop dimulai. Bagian ini menyiapkan counter.
• i < 5 dicek sebelum setiap iterasi. Kalau true, isi loop dijalankan. Kalau false, loop berakhir.
• i++ berjalan setelah setiap iterasi, tepat sebelum kondisinya dicek lagi.

Ketiga bagian dipisahkan dengan titik koma, bukan koma. Ketiganya opsional, tetapi jarang dihilangkan, karena biasanya kamu akan memakai while saja.

Bagaimana Bagian-Bagiannya Bekerja Sama

Menelusuri satu loop secara manual membantu memahami urutannya:

for (let i = 1; i <= 3; i++) {
    console.log("body runs with i =", i);
}
console.log("loop is done");

Langkah demi langkah:

1. let i = 1: counter dibuat dan diisi 1.
2. Cek i <= 3: true, jadi isi loop dijalankan. Cetak 1.
3. Jalankan i++: i sekarang 2.
4. Cek i <= 3: true. Cetak 2.
5. Jalankan i++: i sekarang 3.
6. Cek i <= 3: true. Cetak 3.
7. Jalankan i++: i sekarang 4.
8. Cek i <= 3: false. Keluar.

Langkah update berjalan setelah isi loop, bukan sebelumnya. Bagian inilah yang sering menjebak orang.

Perulangan pada Array Berdasarkan Index

Tugas paling umum loop for adalah menelusuri array. Counter-nya sekaligus berfungsi sebagai index:

const fruits = ["apple", "banana", "cherry", "date"];

for (let i = 0; i < fruits.length; i++) {
    console.log(i, fruits[i]);
}

Beberapa hal yang perlu diperhatikan:

• Index array dimulai dari nol. Elemen pertama ada di index 0, yang terakhir di length - 1.
• Kondisinya i < fruits.length, bukan i <= fruits.length. Memakai <= akan berjalan satu langkah melewati ujung array dan mencetak undefined.
• i dideklarasikan dengan let, jadi scope-nya hanya di dalam loop. Di luar loop, variabel itu tidak ada.

Kalau kamu hanya butuh nilainya dan tidak butuh index-nya, for...of lebih singkat dan jelas. Kita akan membahasnya di dokumentasinya sendiri.

break: Berhenti Lebih Awal

break langsung keluar dari loop. Berguna saat kamu sudah menemukan apa yang dicari dan tidak perlu melanjutkan:

const numbers = [3, 7, 1, 9, 4, 2];

for (let i = 0; i < numbers.length; i++) {
    if (numbers[i] > 5) {
        console.log("found one:", numbers[i], "at index", i);
        break;
    }
}

Begitu break berjalan, kendali melompat melewati kurung kurawal penutup loop. Langkah update tidak berjalan, kondisinya tidak dicek lagi: loop-nya selesai begitu saja.

continue: Lewati Iterasi Ini

continue melewati sisa iterasi saat ini dan langsung ke langkah update. Loop tetap berjalan; hanya putaran saat ini yang tidak diselesaikan.

for (let i = 0; i < 10; i++) {
    if (i % 2 === 0) {
        continue;
    }
    console.log(i, "is odd");
}

Angka genap terkena continue dan melewati console.log. Hanya angka ganjil yang dicetak. continue praktis saat kamu ingin menyaring iterasi tertentu tanpa harus membungkus sisa isi loop di dalam if.

Langkah Selain +1

Langkah update hanyalah sebuah ekspresi. Tidak harus i++. Hitung kelipatan dua:

for (let i = 0; i < 20; i += 2) {
    console.log(i);
}

Hitung mundur:

for (let i = 5; i > 0; i--) {
    console.log(i);
}
console.log("liftoff");

Telusuri array dari belakang, yang kadang berguna saat kamu menghapus item sambil berjalan:

const items = ["a", "b", "c", "d"];

for (let i = items.length - 1; i >= 0; i--) {
    console.log(i, items[i]);
}

Apa pun yang kamu pilih, aturannya sama: kondisi dan update harus bekerja sama agar kondisinya akhirnya bernilai false. Kalau tidak, loop-nya berjalan selamanya. for (let i = 0; i < 10; i--) adalah infinite loop, karena i bergerak ke arah yang salah.

For Loop Bersarang

Kamu bisa menaruh loop for di dalam loop lain. Loop dalam berjalan sampai selesai untuk setiap iterasi loop luar.

for (let row = 1; row <= 3; row++) {
    for (let col = 1; col <= 3; col++) {
        console.log(`row ${row}, col ${col}`);
    }
}

Sembilan baris output: tiga iterasi luar, masing-masing dengan tiga iterasi dalam. Beri setiap counter nama yang bermakna (row/col, i/j), jangan memakai ulang variabel yang sama.

Satu hal yang perlu diwaspadai: break dan continue hanya memengaruhi loop paling dalam. Keluar dari loop dalam tidak menghentikan loop luar. Kalau kamu butuh itu, pasang sebuah flag dan cek di loop luar, atau pindahkan pekerjaan bersarangnya ke sebuah fungsi lalu return dari sana.

Jebakan Umum

Beberapa hal yang sering menyulitkan pemula:

Error selisih satu (off-by-one). i <= arr.length berjalan satu langkah terlalu jauh; i < arr.length - 1 berhenti satu langkah terlalu cepat. Bentuk standarnya adalah i < arr.length.

Lupa langkah update. Kalau kamu tidak menulis i++ (atau yang setara), counter-nya tidak pernah berubah dan loop-nya berjalan selamanya:

for (let i = 0; i < 10; ) {
    console.log(i); // never ends
}

Memakai var untuk counter. var memiliki scope fungsi, jadi counter-nya bocor keluar dari loop dan bisa menimbulkan kejutan di closure. Tetap pakai let.

Mengubah array sambil melakukan iterasi. Menghapus item akan menggeser index dan kamu akan melewatkan elemen. Kalau perlu menghapus item, lakukan perulangan dari belakang, atau buat array baru dengan filter.

Kapan Memakai Alternatif Lain

Loop for klasik selalu tersedia, tetapi JavaScript punya pilihan yang lebih singkat untuk kasus umum:

• Melakukan iterasi pada nilai-nilai array: for (const item of array) lebih rapi.
• Mengubah array: array.map(fn) mengembalikan array baru.
• Menyaring: array.filter(fn).
• Menjumlahkan atau meringkas: array.reduce(fn, start).
• Sekadar melakukan sesuatu untuk setiap elemen: array.forEach(fn).

Pakai for klasik saat kamu benar-benar butuh index-nya, perlu melewati atau berhenti di tengah jalan, atau butuh langkah yang tidak standar seperti hitung mundur atau kelipatan dua.

Berikutnya: While Loop

Loop for unggul saat kamu tahu rentangnya sejak awal. Saat kamu tidak tahu, yaitu saat kamu ingin terus berjalan sampai suatu kondisi berubah, while dan do...while lebih cocok. Itu topik halaman berikutnya.