for Loop

Mencetak nomor antrean 1 sampai 100 dengan menyalin-tempel console.log seratus kali jelas bukan cara yang sehat. Kebutuhan seperti ini — lakukan pekerjaan yang sama berkali-kali dengan sedikit perubahan di setiap putaran — muncul di mana-mana: mencetak daftar, menjumlahkan transaksi, atau memproses item satu per satu. Struktur yang menyelesaikannya disebut loop, dan bentuk yang paling sering dipakai untuk jumlah putaran yang sudah pasti adalah for.

Chapter ini membedah anatomi for yang terdiri atas tiga bagian, menjalankan contoh yang menggabungkan tiga variasinya — penghitung naik, pembacaan array lewat index, dan penghitung mundur — lalu menutup dengan kesalahan klasik off-by-one yang membuat loop membaca satu elemen lebih banyak.

Anatomi for: Init, Condition, Update #

Statement for menggabungkan tiga bagian dalam satu baris, dipisahkan titik koma:

Satu catatan penting tentang init: variabel yang dideklarasikan di bagian ini hanya terlihat di dalam loop. Setelah condition bernilai false dan eksekusi keluar, nama nomor tidak lagi dikenal — batas blok yang sudah kita buktikan di chapter let, const, dan var. Karena itu nama penghitung boleh dipakai ulang di loop lain tanpa menimbulkan konflik, dan konvensi penamaannya pun pendek: i, j, k — huruf i singkatan dari index.

Alurnya tetap: engine menjalankan init, memeriksa condition, menjalankan blok bila true, menjalankan update, lalu kembali memeriksa condition — dan seterusnya sampai condition bernilai false. Karena pemeriksaan dilakukan sebelum blok, blok bisa saja tidak pernah dijalankan sama sekali bila condition langsung false.

Dua tanda titik koma di header bukan hiasan — ketiganya wajib, meskipun isinya boleh kosong. Bentuk for (;;) yang tanpa ketiga bagian sah menurut JavaScript dan berarti “putar selamanya”; kita akan melihat pola serupa di chapter Best Practices, lengkap dengan syarat pintu keluarnya. Untuk pekerjaan sehari-hari, tulis ketiga bagian secara eksplisit agar niat loop-nya terbaca.

Bila bagian condition berhenti di tengah jalan, putaran berikutnya tidak dilakukan dan program berlanjut normal:

let saldo = 20;
for (let biaya = 10; saldo >= biaya; biaya = biaya + 10) {
  saldo = saldo - biaya;
  console.log("Bayar", biaya, "- sisa saldo", saldo);
}
console.log("Loop selesai, saldo akhir:", saldo);

Output yang Dihasilkan:

Bayar 10 - sisa saldo 10
Loop selesai, saldo akhir: 10

Pada putaran kedua, saldo >= biaya menjadi 10 >= 20 yang bernilai false, sehingga blok tidak dijalankan lagi — bukan error, melainkan kondisi berhenti yang normal.

Langkah yang Bisa Diatur Bebas #

Bagian update tidak wajib melangkah satu angka. Assignment operator seperti += dari section Operators memungkinkan langkah dua, lima, atau berapa pun:

for (let genap = 2; genap <= 10; genap += 2) {
  console.log("bilangan genap:", genap);
}

Output yang Dihasilkan:

bilangan genap: 2
bilangan genap: 4
bilangan genap: 6
bilangan genap: 8
bilangan genap: 10

Engine tetap menjalankan alur yang sama — init sekali, lalu pemeriksaan dan update bergantian — hanya nilai loncatannya berbeda. Arahnya pun bebas: genap -= 2 menurunkan nilai, sehingga kombinasi init besar dan update negatif menghasilkan hitungan mundur berloncat dua. Dari sini terlihat bahwa for sebenarnya adalah mesin angka berurutan: selama bagian init, condition, dan update disusun benar, urutan angka apa pun bisa dihasilkan.

Satu langkah yang harus dihindari adalah langkah nol: bila update tidak pernah mengubah nilai penghitung — misalnya i += 0 — condition tidak pernah berubah dan loop tidak berhenti. Kesalahan ini jarang ditulis sengaja, tetapi sering muncul saat mengedit i++ menjadi i * 2 tanpa sengaja menghapus operasinya; periksa kembali arah dan besar langkah setiap mengubah bagian update.

Contoh Lengkap: Tiga Variasi for #

Berkas berikut memuat ketiga variasi yang paling berguna: penghitung naik untuk nomor antrean, pembacaan array lewat index, dan penghitung mundur untuk hitungan peluncuran:

// cetak-daftar.js
// Tiga wajah for: penghitung naik, iterasi array lewat index, dan penghitung mundur.

// --- 1. for dengan penghitung naik: nomor antrean 1 sampai 5 ---
for (let nomor = 1; nomor <= 5; nomor++) {
  console.log("Nomor antrean", nomor);
}

// --- 2. for untuk array: membaca tiap elemen lewat index ---
const namaPeserta = ["Siti", "Budi", "Rina"];
for (let i = 0; i < namaPeserta.length; i++) {
  console.log("Peserta ke-" + (i + 1) + ": " + namaPeserta[i]);
}

// --- 3. for mundur: hitungan peluncuran ---
for (let hitung = 3; hitung >= 1; hitung--) {
  console.log("Luncur dalam", hitung, "...");
}
console.log("Roket meluncur!");

Output yang Dihasilkan:

Nomor antrean 1
Nomor antrean 2
Nomor antrean 3
Nomor antrean 4
Nomor antrean 5
Peserta ke-1: Siti
Peserta ke-2: Budi
Peserta ke-3: Rina
Luncur dalam 3 ...
Luncur dalam 2 ...
Luncur dalam 1 ...
Roket meluncur!

Mari kita telaah apa yang terjadi pada baris-baris kode di atas:

1. Baris 5 (for (let nomor = 1; nomor <= 5; nomor++)): init membuat nomor bernilai 1 sekali saja; condition memeriksa nomor <= 5 sebelum tiap putaran; update menaikkan nomor satu angka setelah tiap putaran. Hasilnya lima baris antrean berurutan.
2. Baris 10 (const namaPeserta = [...]): array literal sederhana dengan tiga elemen. Index array dimulai dari 0, jadi "Siti" ada di index 0 dan "Rina" di index 2.
3. Baris 11 (for (let i = 0; i < namaPeserta.length; i++)): pola baku untuk array — mulai dari index 0, berhenti ketika i mencapai panjang array. Properti namaPeserta.length bernilai 3, sehingga nilai i terakhir yang lolos adalah 2.
4. Baris 12 (console.log("Peserta ke-" + (i + 1) + ": " + namaPeserta[i])): namaPeserta[i] membaca elemen pada posisi i, sedangkan i + 1 dipakai murni untuk tampilan karena nomor peserta dimulai dari 1. Tanda kurung (i + 1) wajib — tanpanya, 1 akan digabung sebagai teks sebelum dijumlahkan.
5. Baris 16 (for (let hitung = 3; hitung >= 1; hitung--)): variasi mundur. Init mulai dari angka besar, condition memeriksa >= 1, dan update menurunkan nilai dengan --. Blok berjalan tiga kali: 3, 2, 1.
6. Baris 19 (console.log("Roket meluncur!")): baris ini di luar loop ketiga, sehingga berjalan tepat satu kali setelah hitungan selesai.

Pola Baku Membaca Array dengan Index #

Pola for (let i = 0; i < daftar.length; i++) adalah cetakan yang akan terus kita pakai: mulai 0, bandingkan dengan length memakai <, naikkan satu per satu. Di dalam blok, daftar[i] merujuk elemen saat itu. Dua peran angka di sini mudah tertukar: i adalah posisi di memori (dimulai dari 0), sedangkan nomor peserta yang dicetak adalah urutan untuk manusia (dimulai dari 1) — makanya tampilannya i + 1. Kita belum membahas array secara lengkap — pembahasan penuhnya menunggu section Arrays — tetapi array literal, index, dan length cukup untuk kebutuhan loop di chapter ini.

Potongan berikut memperlihatkan keluaran yang muncul bila batasnya keliru:

const warna = ["merah", "putih"];
for (let i = 0; i <= warna.length; i++) {
  console.log(warna[i]);
}

Output yang Dihasilkan:

merah
putih
undefined

Menghitung Mundur dan Kapan for Tepat Dipakai #

Variasi mundur berlaku juga untuk array: for (let i = daftar.length - 1; i >= 0; i--) membaca elemen dari belakang ke depan. Aturannya sama — init, condition, dan update tinggal dibalik arahnya.

for paling tepat ketika jumlah putaran sudah diketahui atau bisa dihitung dari data (misalnya length). Empat pola berikut menutupi hampir semua kebutuhan di tingkat ini — pegang keempatnya, dan bentuk lain tinggal variasi:

Untuk kasus yang jumlah putarannya tidak bisa dipastikan di depan — “ulangi sampai tebakannya benar” — kita memerlukan loop yang berorientasi kondisi: while dan do-while, topik chapter berikutnya.

// cetak-daftar.js
// Tiga wajah for: penghitung naik, iterasi array lewat index, dan penghitung mundur.

// --- 1. for dengan penghitung naik: nomor antrean 1 sampai 5 ---
for (let nomor = 1; nomor <= 5; nomor++) {
  console.log("Nomor antrean", nomor);
}

// --- 2. for untuk array: membaca tiap elemen lewat index ---
const namaPeserta = ["Siti", "Budi", "Rina"];
for (let i = 0; i < namaPeserta.length; i++) {
  console.log("Peserta ke-" + (i + 1) + ": " + namaPeserta[i]);
}

// --- 3. for mundur: hitungan peluncuran ---
for (let hitung = 3; hitung >= 1; hitung--) {
  console.log("Luncur dalam", hitung, "...");
}
console.log("Roket meluncur!");