Perulangan (Looping) dalam JavaScript - Perwira Learning Center

1. LATAR BELAKANG

Pada hari ini, saya mempelajari materi tentang Perulangan (Looping) dalam JavaScript. Materi ini merupakan kelanjutan dari konsep percabangan yang telah dipelajari sebelumnya. Dalam pemrograman nyata, kita sering menghadapi situasi di mana kita perlu melakukan tugas yang sama berulang kali. Bayangkan jika kita harus menulis kode yang sama 100 kali hanya untuk menampilkan angka 1 sampai 100 - itu sangat tidak efisien!

Sebagai siswa SMK yang sedang mengembangkan keterampilan algoritmik, saya memahami bahwa perulangan adalah konsep fundamental yang memungkinkan kita untuk mengeksekusi blok kode berulang kali tanpa harus menulisnya berkali-kali. Ini adalah salah satu konsep yang membedakan pemrograman dengan tugas manual.

2. ALAT DAN BAHAN

2.1 Perangkat Lunak

Visual Studio Code - dengan extension JavaScript Debugger
Node.js- untuk menjalankan kode perulangan kompleks
Google Chrome Performance Tools - untuk menganalisis performa loop
Console.table() - untuk visualisasi data hasil perulangan
GitHub Gist - untuk berbagi contoh kode perulangan

2.2 Perangkat Keras

Laptop - dengan konfigurasi optimal untuk coding

3. PEMBAHASAN

3.1 Konsep Dasar Perulangan

Pengertian Perulangan:

Perulangan (looping) adalah struktur kontrol dalam pemrograman yang memungkinkan eksekusi blok kode berulang kali selama kondisi tertentu terpenuhi. Ini seperti mesin produksi di pabrik - melakukan proses yang sama berulang-ulang untuk menghasilkan banyak produk.

Analogi Kehidupan Sehari-hari:

Membuat 100 roti:
1. Ambil adonan
2. Bentuk roti
3. Panggang
4. Ulangi langkah 1-3 sampai 100 roti selesai

Manfaat Perulangan dalam Algoritma:

Efisiensi kode - Menghindari penulisan kode berulang
Penanganan data kolektif - Memproses array, list, atau collection
Otomatisasi tugas - Menjalankan operasi berulang secara otomatis
Pemrosesan batch - Menangani data dalam jumlah besar

// Contoh: Tanpa perulangan vs dengan perulangan

// ❌ TANPA PERULANGAN (tidak efisien)
console.log("Angka 1");
console.log("Angka 2");
console.log("Angka 3");
console.log("Angka 4");
console.log("Angka 5");
// Bayangkan untuk 100 angka!

// ✅ DENGAN PERULANGAN (efisien)
for (let i = 1; i <= 5; i++) {
    console.log("Angka " + i);
}

3.2 For Loop

Looping dengan jumlah iterasi yang diketahui:

// Sintaks dasar for loop
for (inisialisasi; kondisi; iterasi) {
    // kode yang diulang
}

// Contoh 1: Menghitung 1 sampai 5
console.log("=== FOR LOOP: Hitung 1-5 ===");
for (let i = 1; i <= 5; i++) {
    console.log("Iterasi ke-" + i);
}

// Contoh 2: Menampilkan array
let buah = ["Apel", "Jeruk", "Mangga", "Pisang"];
console.log("\n=== DAFTAR BUAH ===");
for (let i = 0; i < buah.length; i++) {
    console.log((i + 1) + ". " + buah[i]);
}

// Contoh 3: Perulangan mundur
console.log("\n=== COUNTDOWN ===");
for (let i = 10; i >= 1; i--) {
    console.log(i + "...");
}
console.log("GO!");

// Contoh 4: Loop dengan increment lebih dari 1
console.log("\n=== BILANGAN GENAP 1-20 ===");
for (let i = 2; i <= 20; i += 2) {
    console.log(i);
}

3.3 While Loop

Looping selama kondisi true:

// Sintaks dasar while loop
while (kondisi) {
    // kode yang diulang selama kondisi true
}

// Contoh 1: Menebak angka
console.log("=== GAME TEBAK ANGKA ===");
let angkaRahasia = Math.floor(Math.random() * 10) + 1;
let tebakan;
let percobaan = 0;

while (tebakan !== angkaRahasia) {
    tebakan = parseInt(prompt("Tebak angka 1-10:"));
    percobaan++;
    
    if (tebakan < angkaRahasia) {
        console.log("Terlalu kecil!");
    } else if (tebakan > angkaRahasia) {
        console.log("Terlalu besar!");
    }
}

console.log(`Selamat! Angka ${angkaRahasia} berhasil ditebak dalam ${percobaan} percobaan.`);

// Contoh 2: Simulasi mesin ATM
console.log("\n=== SIMULASI ATM ===");
let saldo = 1000000;
let tarikan = 200000;

while (saldo >= tarikan) {
    console.log(`Tarik Rp${tarikan.toLocaleString()}...`);
    saldo -= tarikan;
    console.log(`Sisa saldo: Rp${saldo.toLocaleString()}`);
    
    // Hentikan jika saldo kurang dari 200rb
    if (saldo < tarikan) {
        console.log("Tidak dapat menarik lagi, saldo hampir habis.");
    }
}

// Contoh 3: Validasi input
function mintaInputPositif() {
    let input;
    
    while (true) {
        input = parseInt(prompt("Masukkan angka positif:"));
        
        if (input > 0 && !isNaN(input)) {
            break; // Keluar dari loop jika input valid
        }
        
        console.log("Input tidak valid. Silakan coba lagi.");
    }
    
    return input;
}

3.4 Do-While Loop

Loop yang menjalankan minimal satu kali:

// Sintaks do-while loop
do {
    // kode dijalankan minimal satu kali
} while (kondisi);

// Contoh 1: Menu program
let pilihan;
do {
    console.log("\n=== MENU PROGRAM ===");
    console.log("1. Tampilkan profil");
    console.log("2. Ubah password");
    console.log("3. Keluar");
    
    pilihan = parseInt(prompt("Pilih menu (1-3):"));
    
    switch(pilihan) {
        case 1:
            console.log("Profil Anda...");
            break;
        case 2:
            console.log("Mengubah password...");
            break;
        case 3:
            console.log("Keluar dari program...");
            break;
        default:
            console.log("Pilihan tidak valid!");
    }
} while (pilihan !== 3);

// Contoh 2: Game dadu
console.log("\n=== GAME DADU ===");
let dadu;
let total = 0;

do {
    dadu = Math.floor(Math.random() * 6) + 1;
    total += dadu;
    console.log(`Dadu: ${dadu}, Total: ${total}`);
} while (dadu !== 6 && total < 20);

console.log(`Game selesai! Total skor: ${total}`);

3.5 Nested Loop

Loop di dalam loop:

// Contoh 1: Tabel perkalian
console.log("=== TABEL PERKALIAN 1-5 ===");
for (let i = 1; i <= 5; i++) {
    let baris = "";
    for (let j = 1; j <= 5; j++) {
        baris += (i * j).toString().padStart(3, " ") + " ";
    }
    console.log(baris);
}

// Contoh 2: Pola bintang
console.log("\n=== POLA SEGITIGA ===");
let tinggi = 5;
for (let i = 1; i <= tinggi; i++) {
    let bintang = "";
    for (let j = 1; j <= i; j++) {
        bintang += "* ";
    }
    console.log(bintang);
}

// Contoh 3: Matriks
console.log("\n=== OPERASI MATRIKS ===");
let matriksA = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
];

console.log("Matriks A:");
for (let i = 0; i < matriksA.length; i++) {
    let baris = "";
    for (let j = 0; j < matriksA[i].length; j++) {
        baris += matriksA[i][j].toString().padStart(3, " ") + " ";
    }
    console.log(baris);
}

3.6 Loop Control Statements

Mengontrol alur perulangan:

// break - menghentikan loop sepenuhnya
console.log("=== BREAK STATEMENT ===");
for (let i = 1; i <= 10; i++) {
    if (i === 6) {
        console.log("Loop dihentikan di angka 6");
        break;
    }
    console.log(i);
}

// continue - melanjutkan ke iterasi berikutnya
console.log("\n=== CONTINUE STATEMENT ===");
for (let i = 1; i <= 10; i++) {
    if (i % 2 === 0) {
        continue; // Lewati bilangan genap
    }
    console.log(i); // Hanya bilangan ganjil yang ditampilkan
}

// Contoh praktis: Validasi data
console.log("\n=== VALIDASI DATA ===");
let data = [85, 92, "invalid", 78, 95, "error", 88];

let totalValid = 0;
let jumlahValid = 0;

for (let nilai of data) {
    if (typeof nilai !== "number") {
        console.log(`Data tidak valid: ${nilai}`);
        continue; // Lewati data tidak valid
    }
    
    if (nilai < 0 || nilai > 100) {
        console.log(`Nilai ${nilai} di luar range`);
        continue;
    }
    
    totalValid += nilai;
    jumlahValid++;
}

console.log(`Rata-rata nilai valid: ${totalValid / jumlahValid}`);

3.7 For...of Loop (ES6)

Looping khusus untuk iterable objects:

// For...of untuk array
let buah = ["Apel", "Jeruk", "Mangga"];
console.log("=== FOR...OF LOOP ===");

for (let item of buah) {
    console.log(item);
}

// For...of untuk string
let nama = "JavaScript";
console.log("\nKarakter dalam string:");
for (let karakter of nama) {
    console.log(karakter);
}

// For...of dengan entries()
let siswa = ["Andi", "Budi", "Citra"];
console.log("\nDaftar siswa dengan index:");
for (let [index, nama] of siswa.entries()) {
    console.log(`${index + 1}. ${nama}`);
}

// Perbedaan for...in vs for...of
let obj = { a: 1, b: 2, c: 3 };

console.log("\nfor...in (keys):");
for (let key in obj) {
    console.log(key); // a, b, c
}

console.log("\nfor...of (values - hanya untuk iterable):");
// obj tidak iterable, jadi gunakan Object.values()
for (let value of Object.values(obj)) {
    console.log(value); // 1, 2, 3
}

3.8 For...in Loop

Looping melalui properti object:

// For...in untuk object
let siswa = {
    nama: "Ibra Rahman",
    umur: 17,
    kelas: "XII TKJ",
    nilai: 85
};

console.log("=== DATA SISWA ===");
for (let property in siswa) {
    console.log(`${property}: ${siswa[property]}`);
}

// For...in untuk array (tidak direkomendasikan)
let angka = [10, 20, 30];
console.log("\nfor...in untuk array:");
for (let index in angka) {
    console.log(`Index ${index}: ${angka[index]}`);
}

// Warning: for...in juga iterates over inherited properties
Array.prototype.customMethod = function() {};
let arr = [1, 2, 3];

console.log("\nfor...in dengan prototype method:");
for (let key in arr) {
    console.log(key); // 0, 1, 2, customMethod (tidak diinginkan!)
}

console.log("\nGunakan for...of atau forEach sebagai ganti:");
arr.forEach((item, index) => {
    console.log(`Index ${index}: ${item}`);
});

3.9 Array Methods untuk Iterasi

Metode built-in array untuk looping:

let angka = [1, 2, 3, 4, 5];

// forEach - untuk side effects
console.log("=== forEach ===");
angka.forEach((item, index) => {
    console.log(`Index ${index}: ${item}`);
});

// map - transformasi array
console.log("\n=== map ===");
let dikaliDua = angka.map(n => n * 2);
console.log("Dikali dua:", dikaliDua);

// filter - seleksi berdasarkan kondisi
console.log("\n=== filter ===");
let genap = angka.filter(n => n % 2 === 0);
console.log("Bilangan genap:", genap);

// reduce - akumulasi nilai
console.log("\n=== reduce ===");
let total = angka.reduce((sum, n) => sum + n, 0);
console.log("Total:", total);

// some & every - testing kondisi
console.log("\n=== some & every ===");
let adaYangLebihDariTiga = angka.some(n => n > 3);
let semuaPositif = angka.every(n => n > 0);
console.log("Ada yang > 3:", adaYangLebihDariTiga);
console.log("Semua positif:", semuaPositif);

3.10 Studi Kasus: Sistem Manajemen Data

// Sistem pengelolaan data siswa
let databaseSiswa = [
    { id: 1, nama: "Andi Wijaya", nilai: 85, kelas: "XII TKJ 1" },
    { id: 2, nama: "Budi Santoso", nilai: 92, kelas: "XII TKJ 1" },
    { id: 3, nama: "Citra Dewi", nilai: 78, kelas: "XII TKJ 2" },
    { id: 4, nama: "Dewi Anggraini", nilai: 95, kelas: "XII TKJ 2" },
    { id: 5, nama: "Eka Pratama", nilai: 88, kelas: "XII TKJ 1" },
    { id: 6, nama: "Fajar Nugroho", nilai: 65, kelas: "XII TKJ 2" },
    { id: 7, nama: "Gina Lestari", nilai: 90, kelas: "XII TKJ 1" },
    { id: 8, nama: "Hadi Saputra", nilai: 72, kelas: "XII TKJ 2" }
];

console.log("=== SISTEM MANAJEMEN DATA SISWA ===");

// 1. Tampilkan semua siswa
console.log("\n1. DAFTAR SEMUA SISWA:");
databaseSiswa.forEach((siswa, index) => {
    console.log(`${index + 1}. ${siswa.nama} - ${siswa.kelas} - Nilai: ${siswa.nilai}`);
});

// 2. Cari siswa dengan nilai tertinggi
console.log("\n2. SISWA DENGAN NILAI TERTINGGI:");
let nilaiTertinggi = databaseSiswa[0].nilai;
let siswaTertinggi = databaseSiswa[0];

for (let siswa of databaseSiswa) {
    if (siswa.nilai > nilaiTertinggi) {
        nilaiTertinggi = siswa.nilai;
        siswaTertinggi = siswa;
    }
}
console.log(`${siswaTertinggi.nama} - Nilai: ${siswaTertinggi.nilai}`);

// 3. Hitung rata-rata nilai per kelas
console.log("\n3. RATA-RATA NILAI PER KELAS:");

let kelas = {};
for (let siswa of databaseSiswa) {
    if (!kelas[siswa.kelas]) {
        kelas[siswa.kelas] = { total: 0, jumlah: 0 };
    }
    kelas[siswa.kelas].total += siswa.nilai;
    kelas[siswa.kelas].jumlah++;
}

for (let namaKelas in kelas) {
    let rataRata = kelas[namaKelas].total / kelas[namaKelas].jumlah;
    console.log(`${namaKelas}: ${rataRata.toFixed(2)}`);
}

// 4. Kategorikan siswa berdasarkan nilai
console.log("\n4. KATEGORI SISWA:");
let kategori = {
    "Sangat Baik": [],
    "Baik": [],
    "Cukup": [],
    "Kurang": []
};

for (let siswa of databaseSiswa) {
    if (siswa.nilai >= 90) kategori["Sangat Baik"].push(siswa.nama);
    else if (siswa.nilai >= 80) kategori["Baik"].push(siswa.nama);
    else if (siswa.nilai >= 70) kategori["Cukup"].push(siswa.nama);
    else kategori["Kurang"].push(siswa.nama);
}

for (let kat in kategori) {
    console.log(`${kat} (${kategori[kat].length} siswa): ${kategori[kat].join(", ")}`);
}

// 5. Ranking siswa
console.log("\n5. RANKING SISWA:");
let ranking = [...databaseSiswa].sort((a, b) => b.nilai - a.nilai);

for (let i = 0; i < ranking.length; i++) {
    console.log(`${i + 1}. ${ranking[i].nama} - ${ranking[i].nilai}`);
}

3.11 Optimasi dan Best Practices

// 1. Hindari operasi berat di dalam loop
let data = [/* array besar */];

// ❌ Tidak optimal
for (let i = 0; i < data.length; i++) {
    // data.length dihitung setiap iterasi
}

// ✅ Optimal
for (let i = 0, len = data.length; i < len; i++) {
    // data.length disimpan di variabel
}

// 2. Gunakan break/continue untuk efisiensi
let angka = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// Cari angka 5
for (let n of angka) {
    if (n === 5) {
        console.log("Angka 5 ditemukan!");
        break; // Hentikan pencarian
    }
}

// 3. Pilih loop yang tepat
let arr = [1, 2, 3, 4, 5];

// for loop - ketika butuh index
for (let i = 0; i < arr.length; i++) {
    console.log(`Index ${i}: ${arr[i]}`);
}

// for...of - ketika hanya butuh values
for (let value of arr) {
    console.log(value);
}

// forEach - untuk functional programming
arr.forEach((value, index) => {
    console.log(`Index ${index}: ${value}`);
});

// 4. Hindari infinite loops
// ❌ Infinite loop
// while (true) {
//     console.log("Ini akan berjalan selamanya!");
// }

// ✅ Loop dengan exit condition
let counter = 0;
while (counter < 10) {
    console.log(counter);
    counter++; // Jangan lupa increment!
}

3.12 Kendala dan Solusi

Kendala yang Dihadapi:

Awalnya bingung memilih antara for, while, dan do-while
Terkadang membuat infinite loop karena lupa update kondisi
Bingung dengan perbedaan for...in dan for...of

Solusi yang Diterapkan:

Membuat decision tree sederhana:

Jumlah iterasi diketahui? → Gunakan for loop
Iterasi berdasarkan kondisi? → Gunakan while loop
Minimal satu eksekusi? → Gunakan do-while

Selalu menulis exit condition yang jelas
Menggunakan debugger untuk melacak nilai variabel dalam loop
Membuat contoh kecil sebelum mengimplementasi ke kode besar

4. DAFTAR PUSTAKA

Dicoding ID. (2024). Apa itu Looping? Arti, Fungsi, dan Contohnya. https://www.dicoding.com
PetaniKode. (2018). Belajar JavaScript: Mengenal 5 Macam Bentuk Perulangan pada JavaScript. https://www.petanikode.com
W3Schools. (n.d.). JavaScript For Loop. https://www.w3schools.com
Developer Mozilla. (2025). While - JavaScript. https://developer.mozilla.org
W3Schools. (n.d.). JavaScript Loop Control. Diakses dari https://www.w3schools.com/js/js_loop_control.asp