Perulangan JavaScript: Cara Kerja For, While, For...of, dan forEach

Perulangan (loop) di JavaScript adalah cara menjalankan satu blok kode berkali-kali secara otomatis, tanpa harus menyalin-tempel baris yang sama. Kalau kamu punya daftar 100 nama dan ingin mencetak semuanya, kamu tidak menulis console.log sebanyak 100 kali, kamu menulisnya sekali di dalam loop, lalu JavaScript mengulanginya untukmu. Perulangan adalah salah satu konsep paling menghemat waktu di dunia pemrograman, dan hampir mustahil membuat aplikasi nyata tanpanya.

Di panduan ini kamu akan belajar semua bentuk perulangan yang paling sering dipakai di JavaScript: for klasik, while, for...of, dan forEach. Kita bahas satu per satu dengan contoh kode berkomentar bahasa Indonesia, sebuah visualisasi interaktif yang bisa kamu jalankan langkah demi langkah, perbedaan kapan memakai yang mana, sampai jebakan-jebakan yang paling sering bikin pemula pusing.

Apa Itu Perulangan di JavaScript?

Perulangan adalah struktur kontrol yang menyuruh komputer mengerjakan sesuatu berulang kali selama sebuah syarat masih terpenuhi. Bayangkan kamu seorang guru yang memanggil absen: kamu membaca nama dari daftar satu per satu, dari atas ke bawah, sampai daftar habis. “Membaca satu nama” adalah blok kode, dan “sampai daftar habis” adalah syaratnya. Itulah inti sebuah loop.

Setiap kali loop menjalankan blok kodenya satu kali, kita menyebutnya satu iterasi. Kalau sebuah loop berjalan lima kali, artinya ada lima iterasi. Tanpa loop, program kita akan penuh dengan pengulangan manual seperti ini:

// Tanpa loop, melelahkan dan mudah salah
console.log("Iterasi ke-1")
console.log("Iterasi ke-2")
console.log("Iterasi ke-3")
console.log("Iterasi ke-4")
console.log("Iterasi ke-5")

Dengan loop, lima baris di atas cukup ditulis sekali. Kita akan lihat caranya sebentar lagi. Kalau kamu masih benar-benar baru dengan JavaScript, ada baiknya baca dulu panduan apa itu JavaScript supaya paham konsep dasar variabel dan array yang jadi bahan utama semua contoh di bawah.

For Loop: Perulangan yang Paling Umum

for adalah bentuk perulangan paling klasik dan paling sering kamu temui. Kelebihannya: seluruh “aturan main” loop ditulis rapi dalam satu baris. Strukturnya terdiri dari tiga bagian yang dipisah titik koma:

// for (inisialisasi; kondisi; perubahan) { ... }
for (let i = 1; i <= 5; i++) {
  console.log(`Iterasi ke-${i}`)
}
// Output: Iterasi ke-1, ke-2, ke-3, ke-4, ke-5

Mari kita bedah ketiga bagian di dalam kurung, karena inilah kunci memahami for:

1. Inisialisasi (let i = 1), dijalankan satu kali di awal. Di sini kita membuat variabel penghitung (disebut counter), biasanya diberi nama i.
2. Kondisi (i <= 5), dicek sebelum setiap iterasi. Selama hasilnya true, loop lanjut. Begitu false, loop berhenti.
3. Perubahan (i++), dijalankan di akhir setiap iterasi. i++ artinya “tambah i sebanyak 1”. Ini yang membuat counter bergerak maju hingga akhirnya kondisi jadi false.

for sangat cocok saat kamu tahu persis berapa kali harus mengulang, atau saat kamu butuh akses ke nomor indeks. Contoh paling umum adalah meloop sebuah array memakai indeksnya:

const bahasa = ["React", "Vue", "Svelte"]

for (let i = 0; i < bahasa.length; i++) {
  console.log(`${i + 1}. ${bahasa[i]}`)
}
// 1. React
// 2. Vue
// 3. Svelte

Perhatikan kita mulai dari i = 0, bukan i = 1. Itu karena indeks array di JavaScript selalu mulai dari 0, elemen pertama adalah bahasa[0]. Kita juga memakai i < bahasa.length supaya loop otomatis menyesuaikan berapa pun panjang arraynya.

While Loop: Mengulang Selama Syarat Terpenuhi

while lebih sederhana daripada for: ia hanya butuh satu hal, yaitu kondisi. Selama kondisinya true, blok kode terus diulang. while cocok dipakai ketika kamu tidak tahu pasti berapa kali loop harus berjalan, yang kamu tahu hanyalah kapan ia harus berhenti.

let mundur = 3

while (mundur > 0) {
  console.log(mundur)
  mundur--   // kurangi 1 setiap iterasi
}
console.log("Mulai!")
// Output: 3, 2, 1, Mulai!

Bedanya dengan for: di sini kamu bertanggung jawab sendiri untuk membuat variabel (let mundur = 3) dan mengubahnya di dalam loop (mundur--). Kalau kamu lupa mengubahnya, kondisinya tidak akan pernah jadi false, dan kamu mendapat masalah yang serius berikut ini.

Ada juga varian bernama do...while yang menjalankan blok kode minimal satu kali dulu, baru mengecek kondisinya. Ini lebih jarang dipakai, tapi berguna saat kamu ingin sesuatu dieksekusi paling tidak sekali:

let angka = 10

do {
  console.log(angka)   // tetap tercetak sekali walau kondisi langsung false
  angka++
} while (angka < 5)
// Output: 10

For…of dan forEach: Cara Modern Meloop Array

Meloop array dengan for klasik dan indeks itu berhasil, tapi agak berisik, kamu harus mengurus i, length, dan array[i] sendiri. JavaScript modern punya dua cara yang jauh lebih bersih khusus untuk array: for...of dan forEach.

for...of langsung memberimu setiap elemen array satu per satu, tanpa perlu memikirkan indeks sama sekali:

const bahasa = ["React", "Vue", "Svelte"]

for (const item of bahasa) {
  console.log(item)   // langsung dapat nilainya
}
// React, lalu Vue, lalu Svelte

Sementara forEach adalah sebuah method array yang menerima sebuah fungsi, lalu menjalankan fungsi itu untuk setiap elemen. Fungsi ini otomatis diberi dua hal: elemennya dan indeksnya.

const bahasa = ["React", "Vue", "Svelte"]

bahasa.forEach((item, index) => {
  console.log(`${index + 1}. ${item}`)
})
// 1. React
// 2. Vue
// 3. Svelte

Kalau kamu belum familiar dengan penulisan (item, index) => { ... }, itu namanya arrow function, cara ringkas menulis fungsi yang sangat umum di JavaScript modern. Cara berpikir “jalankan fungsi ini untuk setiap elemen” inilah yang juga jadi dasar method array lain seperti map dan filter, yang akan kamu pakai terus-menerus terutama saat belajar React dari nol untuk menampilkan daftar data ke layar.

Coba Sendiri: Visualisasi Perulangan Langkah demi Langkah

Teori saja sering bikin loop terasa abstrak. Di bawah ini kamu bisa memilih jenis loop, lalu menekan tombol untuk menjalankannya satu iterasi setiap kali, perhatikan bagaimana counter bertambah, kondisi dicek, elemen array disorot, dan output muncul di console. Ini cara terbaik untuk benar-benar “melihat” apa yang terjadi di dalam loop:

for (let i = 0; i < 4; i++) {
  console.log(bahasa[i])
}

Setelah bermain dengan visualisasi di atas, kamu bisa lanjut mengerjakan materi perulangan interaktif di Hyper Sheets yang membahas setiap jenis loop dengan latihan bertahap langsung di browser, tanpa perlu setup apa pun.

Perbedaan For, While, For…of, dan forEach

Ini bagian yang paling sering ditanyakan: kalau semuanya bisa mengulang, kapan harus pakai yang mana? Jawaban singkatnya, keempatnya punya “titik manis” masing-masing. Berikut perbandingannya:

Beberapa panduan praktis untuk memilih:

• Butuh nomor indeks atau mengulang sejumlah kali yang pasti? Pakai for.
• Loop harus berhenti berdasarkan kondisi, bukan hitungan (misal “sampai input pengguna benar”)? Pakai while.
• Cuma ingin membaca setiap elemen array dengan kode paling bersih? Pakai for...of.
• Ingin gaya fungsional yang ekspresif dan tidak butuh menghentikan loop di tengah jalan? Pakai forEach.

Break dan Continue: Mengendalikan Jalannya Loop

Kadang kamu tidak ingin loop berjalan sampai habis. Dua kata kunci ini memberimu kendali penuh:

• break, langsung keluar dari loop, menghentikan seluruh sisa iterasi.
• continue, melewati iterasi saat ini saja, lalu lanjut ke iterasi berikutnya.

// break, berhenti begitu ketemu angka 3
for (let i = 1; i <= 10; i++) {
  if (i === 3) break
  console.log(i)
}
// Output: 1, 2

// continue, lewati angka genap, cetak yang ganjil saja
for (let i = 1; i <= 6; i++) {
  if (i % 2 === 0) continue
  console.log(i)
}
// Output: 1, 3, 5

break sangat berguna saat kamu mencari satu hal di dalam daftar, begitu ketemu, tidak ada gunanya melanjutkan. continue berguna saat kamu ingin melewati item tertentu tanpa keluar dari loop sepenuhnya.

Kesalahan Umum Pemula Saat Menulis Loop

Loop terlihat sederhana, tapi ada beberapa jebakan klasik yang hampir semua pemula pernah alami. Mengenalinya lebih awal akan menghemat banyak waktu debugging.

1. Off-by-one error (salah satu langkah). Ini kesalahan paling terkenal. Karena indeks mulai dari 0, elemen terakhir array adalah arr[arr.length - 1], bukan arr[arr.length]. Menulis i <= arr.length (harusnya i < arr.length) akan membuat loop mencoba mengakses satu elemen yang tidak ada dan menghasilkan undefined.

const buah = ["apel", "mangga", "jeruk"]

// SALAH, iterasi terakhir mengakses buah[3] yang tidak ada
for (let i = 0; i <= buah.length; i++) {
  console.log(buah[i])   // apel, mangga, jeruk, undefined
}

// BENAR, pakai < bukan <=
for (let i = 0; i < buah.length; i++) {
  console.log(buah[i])   // apel, mangga, jeruk
}

2. Lupa mengubah counter di while. Seperti sudah diperingatkan di atas, lupa i++ atau mundur-- di dalam while menghasilkan infinite loop yang membekukan browser.

3. Memakai forEach lalu berharap bisa break. forEach tidak mengenal break. Kalau butuh berhenti di tengah, ganti ke for...of.

4. Membuat array baru padahal ada method yang lebih tepat. Kalau tujuanmu mengubah setiap elemen jadi array baru, map lebih cocok daripada forEach + push manual. Loop bukan selalu jawaban terbaik, tapi memahaminya dulu membuatmu paham apa yang method-method itu lakukan di balik layar.

FAQ Seputar Perulangan JavaScript

Apa itu perulangan dalam JavaScript?

Perulangan (loop) adalah cara menjalankan blok kode yang sama berkali-kali secara otomatis, tanpa menulis ulang barisnya. Setiap kali blok itu dijalankan disebut satu iterasi. Perulangan dipakai untuk hal seperti mencetak semua item dalam daftar, menjumlahkan angka, atau mengulang aksi sampai sebuah kondisi terpenuhi. JavaScript menyediakan beberapa bentuk: for, while, do...while, for...of, dan method forEach.

Apa perbedaan for dan while?

Keduanya sama-sama mengulang, tapi for menaruh inisialisasi, kondisi, dan perubahan counter dalam satu baris, cocok saat jumlah iterasi sudah diketahui. while hanya butuh kondisi dan cocok saat kamu tidak tahu pasti berapa kali loop berjalan, tapi tahu kapan ia harus berhenti. Secara teknis keduanya bisa saling menggantikan, hanya soal mana yang lebih rapi untuk situasimu.

Kapan harus pakai for…of dan kapan forEach?

Pakai for...of kalau kamu ingin bisa memakai break atau continue untuk menghentikan atau melewati iterasi, atau saat meloop selain array (misalnya string atau Map). Pakai forEach kalau kamu ingin gaya penulisan yang lebih fungsional dan ekspresif, tidak butuh menghentikan loop di tengah, dan sedang bekerja dengan array. Keduanya sama-sama bersih; for...of lebih fleksibel, forEach lebih ringkas.

Apa itu infinite loop dan bagaimana menghindarinya?

Infinite loop adalah perulangan yang tidak pernah berhenti karena kondisinya selalu true. Ini bisa membekukan atau meng-crash browser. Penyebab paling umum adalah lupa mengubah variabel counter di dalam while (misal lupa i++), sehingga kondisi tidak pernah menjadi false. Untuk menghindarinya, selalu pastikan ada baris di dalam loop yang membawa kondisi menuju false di setiap iterasi.

Kenapa loop array biasanya dimulai dari 0?

Karena di JavaScript, indeks array dimulai dari 0, bukan 1. Elemen pertama adalah arr[0], elemen kedua arr[1], dan seterusnya. Maka loop untuk membaca seluruh array biasanya dimulai dari i = 0 dan berjalan selama i < arr.length. Memakai <= bukannya < adalah kesalahan klasik yang membuat loop mengakses satu indeks berlebih yang bernilai undefined.

Apakah map dan filter termasuk perulangan?

Secara konsep ya, map, filter, dan reduce semuanya “berjalan melalui” setiap elemen array persis seperti loop. Bedanya, mereka lebih spesifik: map menghasilkan array baru dengan setiap elemen diubah, filter menghasilkan array berisi elemen yang lolos syarat. Mereka sering menggantikan loop manual di kode modern. Tapi memahami for dan forEach dulu akan membuatmu paham apa yang sebenarnya method-method itu lakukan di balik layar.

Langkah Selanjutnya

Setelah nyaman dengan perulangan, konsep berikut adalah lanjutan yang paling masuk akal:

1. Array methods, map, filter, find, dan reduce adalah “loop yang lebih pintar” yang akan kamu pakai setiap hari. Pelajari fondasinya di panduan JavaScript lengkap.
2. Fungsi dan arrow function, karena forEach, map, dan teman-temannya semua menerima fungsi sebagai argumen, menguasai fungsi membuat semuanya klik.
3. React, begitu kamu bisa meloop array untuk menghasilkan elemen, kamu siap belajar React dari nol, yang inti kerjanya adalah mengubah array data menjadi daftar komponen di layar.

Perulangan adalah salah satu konsep pertama yang membuat kode terasa benar-benar “hidup”, dari mengetik lima baris manual menjadi satu loop yang bisa menangani lima atau lima juta item dengan kode yang sama. Praktikkan dengan menjalankan visualisasi di atas berulang kali, coba ubah-ubah jenis loopnya, dan tulis loop-mu sendiri di console browser. Di situlah pemahaman sejati terbentuk.