Tutorial Looping JavaScript: For, While, dan Do While

Looping adalah teknik untuk menjalankan blok kode berulang kali. Dalam JavaScript, looping sangat berguna untuk:

• Mengulang data array
• Menampilkan daftar elemen HTML
• Menghitung angka
• Membuat animasi sederhana
• Mengelola logika program yang berulang

Dengan memahami looping javascript, kamu bisa menulis program lebih efisien dibanding menulis kode berulang satu per satu.

Baca juga: Tutorial If Else JavaScript: Logika Percabangan Lengkap

Jenis Looping di JavaScript

JavaScript memiliki beberapa tipe perulangan dasar:

• For Loop – digunakan saat jumlah iterasi sudah diketahui
• While Loop – digunakan saat kondisi tertentu terpenuhi
• Do While Loop – mirip while, tapi minimal dieksekusi sekali

Kita akan bahas satu per satu.

For Loop

for loop adalah loop paling umum. Sintaksnya:

for (inisialisasi; kondisi; increment/decrement) {
    // kode yang dijalankan tiap iterasi
}Code language: JavaScript (javascript)

Contoh sederhana

for (let i = 1; i <= 5; i++) {
    console.log("Perulangan ke-" + i);
}Code language: JavaScript (javascript)

Hasil:

Perulangan ke-1
Perulangan ke-2
Perulangan ke-3
Perulangan ke-4
Perulangan ke-5

Nested For Loop

Digunakan saat ada perulangan di dalam perulangan, contohnya menampilkan tabel 5×5:

for (let i = 1; i <= 5; i++) {

    let baris = "";

    for (let j = 1; j <= 5; j++) {
        baris += "* ";
    }

    console.log(baris);
}Code language: JavaScript (javascript)

Hasil:

* * * * * 
* * * * * 
* * * * * 
* * * * * 
* * * * * 

While Loop

while loop dieksekusi selama kondisi bernilai true. Sintaks:

while (kondisi) {
    // kode dijalankan selama kondisi true
}Code language: JavaScript (javascript)

Contoh sederhana:

let i = 1;
while (i <= 5) {
    console.log("Perulangan ke-" + i);
    i++;
}Code language: JavaScript (javascript)

Hasil:

Perulangan ke-1
Perulangan ke-2
Perulangan ke-3
Perulangan ke-4
Perulangan ke-5

Catatan: Jangan lupa menambah increment (i++) agar loop tidak berjalan tanpa henti.

Do While Loop

do while loop dijalankan minimal satu kali, walaupun kondisi awal false. Sintaks:

do {
    // kode dijalankan minimal satu kali
} while (kondisi);Code language: JavaScript (javascript)

Contoh sederhana:

let i = 1;
do {
    console.log("Perulangan ke-" + i);
    i++;
} while (i <= 5);Code language: JavaScript (javascript)

Hasil:

Perulangan ke-1
Perulangan ke-2
Perulangan ke-3
Perulangan ke-4
Perulangan ke-5

Iterasi Array dengan Loop

Loop sering dipakai untuk menelusuri array.

Contoh data array yang akan digunakan.

let buah = ["Apel", "Jeruk", "Mangga"];Code language: JavaScript (javascript)

Contoh For Loop dengan Array

for (let i = 0; i < buah.length; i++) {
    console.log("Buah ke-" + (i+1) + ": " + buah[i]);
}Code language: JavaScript (javascript)

Contoh While Loop dengan Array

let i = 0;
while (i < buah.length) {
    console.log("Buah ke-" + (i+1) + ": " + buah[i]);
    i++;
}Code language: JavaScript (javascript)

Contoh Do While Loop dengan Array

let i = 0;
do {
    console.log("Buah ke-" + (i+1) + ": " + buah[i]);
    i++;
} while (i < buah.length);Code language: JavaScript (javascript)

Break dan Continue

• break → menghentikan loop sebelum selesai
• continue → melewati iterasi saat ini dan lanjut ke iterasi berikutnya

Contoh Break

for (let i = 1; i <= 10; i++) {
    if (i === 5) break;
    console.log(i);
}Code language: JavaScript (javascript)

Hasil: 1, 2, 3, 4

Contoh Continue

for (let i = 1; i <= 5; i++) {
    if (i === 3) continue;
    console.log(i);
}Code language: JavaScript (javascript)

Hasil: 1, 2, 4, 5

Nested Loop untuk Game atau Matriks

Nested loop digunakan untuk:

• Membuat papan permainan
• Matriks angka
• Menampilkan pola

Contoh Matriks Angka 3×3

for (let i = 1; i <= 3; i++) {
    let baris = "";
    for (let j = 1; j <= 3; j++) {
        baris += (i*j) + " ";
    }
    console.log(baris);
}Code language: JavaScript (javascript)

Hasil:

1 2 3
2 4 6
3 6 9

Best Practice Looping di JavaScript

• Hindari infinite loop → selalu pastikan kondisi bisa menjadi false
• Gunakan let atau const untuk deklarasi variabel
• Gunakan break atau continue saat logika lebih efisien
• Gunakan nested loop dengan hati-hati → kompleksitas meningkat
• Untuk array modern, pertimbangkan for...of atau forEach

Kesimpulan

Looping merupakan salah satu konsep paling penting dalam JavaScript karena memungkinkan kita menjalankan kode secara berulang tanpa perlu menulis baris yang sama berkali-kali. Dengan memahami berbagai jenis looping JavaScript seperti for loop, while loop, dan do while loop, kamu bisa membuat kode yang lebih efisien, rapi, dan mudah dikembangkan.

• For Loop cocok digunakan ketika jumlah iterasi sudah pasti, seperti menampilkan daftar item atau menghitung angka dengan batas tertentu.
• While Loop lebih fleksibel karena bekerja berdasarkan kondisi, sehingga baik untuk logika yang terus berjalan sampai syarat tertentu terpenuhi.
• Do While Loop memastikan blok kode berjalan minimal sekali, sehingga ideal untuk validasi data atau proses yang membutuhkan eksekusi pertama sebelum pengecekan kondisi.

Kombinasi looping dengan array, nested loop, serta penggunaan break dan continue juga membuat perulangan lebih dinamis dalam berbagai skenario seperti filtering data, membuat tabel, pola visual, dan pengelolaan logika program yang lebih kompleks.

Dengan menguasai seluruh jenis perulangan ini, kamu memiliki fondasi kuat untuk melanjutkan ke materi JavaScript berikutnya seperti function, DOM manipulation, ataupun algoritma yang lebih kompleks. Teruslah berlatih dengan contoh kasus nyata agar pemahaman kamu semakin matang.