Mengenal Jenis dan Contoh Perulangan JavaScript Lengkap
Irhan Hisyam Dwi Nugroho
•
26 August 2025
•
589
Perulangan JavaScript itu dasar yang wajib dikuasai, Warga Bimbingan! Soalnya, fitur ini bikin kamu bisa ngulang proses tertentu tanpa nulis kode berulang-ulang.
Biasanya kita pakai perulangan buat nampilin data, ngeloop array, atau ngejalanin proses tertentu berkali-kali. Nah, JavaScript punya beberapa jenis perulangan yang bisa disesuaikan sama kebutuhan kamu.
Di artikel ini, MinDi bakal jelasin jenis-jenis perulangan JavaScript, lengkap dengan contoh penggunaannya. Yuk kita bahas bareng, biar makin lancar ngoding!
Baca juga: Cara Menjadi Web Developer Freelance: Panduan Pemula
Apa Itu Perulangan JavaScript?
Perulangan JavaScript adalah struktur kontrol yang memungkinkan kamu menjalankan blok kode secara berulang selama kondisi tertentu masih terpenuhi.
Dengan fitur ini, kamu bisa menghemat penulisan kode untuk tugas-tugas yang harus dilakukan berkali-kali, seperti mencetak angka, mengolah data array, atau memproses input pengguna.
Perulangan sangat berguna saat kamu ingin melakukan operasi yang sama tanpa perlu menulis kode yang sama berulang kali.
Dengan memahami konsep ini, kamu bisa menulis program yang lebih efisien, rapi, dan mudah dikelola.
Baca juga: Panduan Memilih Bootcamp Full Stack Developer yang Tepat
Fungsi Perulangan JavaScript
Sumber: Canva
Perulangan di JavaScript terlihat simpel, tapi sangat penting. Berikut empat fungsi utamanya yang sering digunakan dalam pemrograman.
1. Menghemat Penulisan Kode yang Berulang
Menurut saya, inilah alasan paling dasar kenapa perulangan ada di semua bahasa pemrograman.
Dengan loop, kamu cukup menulis satu blok kode dan bisa menjalankannya berulang kali tanpa harus copy-paste. Ini membuat kode jadi lebih bersih, hemat waktu, dan lebih mudah di-maintain dalam jangka panjang.
2. Memudahkan Pengolahan Data dalam Jumlah Banyak
Saya sering melihat perulangan digunakan untuk membaca, menampilkan, atau menghitung data dalam array atau objek.
Tanpa loop, kamu harus menulis kode untuk tiap elemen satu per satu, dan itu tentu sangat tidak efisien. Dengan perulangan, data dalam jumlah besar bisa diproses secara otomatis dan konsisten.
3. Menjalankan Logika Bersyarat Secara Berulang
Loop juga bisa bekerja sama dengan kondisi if untuk mengeksekusi logika tertentu yang hanya dijalankan saat syarat terpenuhi.
Saya pribadi sering menggunakan ini saat membuat filter data atau validasi input. Kombinasi loop dan kondisi membuat program jauh lebih fleksibel dan interaktif.
4. Membantu Membangun Tampilan Dinamis
Dalam pengembangan web, saya sering memanfaatkan loop untuk membuat daftar konten, tabel, atau elemen HTML dari data backend.
Daripada membuat semuanya secara manual, kita cukup looping datanya dan membiarkan browser menghasilkan tampilan secara otomatis. Ini sangat membantu saat data sering berubah, karena tampilannya akan ikut menyesuaikan.
Baca juga: 10 Text Editor Terbaik untuk Web Developer (2025)
Jenis-Jenis Perulangan di JavaScript
Sumber: Canva
Dalam JavaScript, perulangan digunakan untuk menjalankan instruksi yang sama secara berulang.
Nah, berikut ini adalah jenis-jenis perulangan yang paling umum dan sering digunakan.
1. for Loop
for loop digunakan saat kamu sudah tahu jumlah pasti berapa kali perulangan akan dijalankan.
Perulangan ini terdiri dari tiga bagian utama: inisialisasi, kondisi, dan increment/decrement. Sangat cocok untuk mengolah array berdasarkan indeks atau melakukan perhitungan berulang.
for (let i = 1; i <= 5; i++) { console.log("Angka ke-" + i); } |
Penjelasan:
Perulangan dimulai dari i = 1, dan selama i <= 5, ia akan mencetak teks. Setelah setiap loop, i bertambah 1, hingga kondisi tidak terpenuhi lagi.
2. while Loop
while loop digunakan saat kamu ingin menjalankan blok kode selama suatu kondisi bernilai true.
Cocok untuk perulangan yang jumlahnya belum pasti di awal. Pastikan nilai kondisi berubah di dalam loop agar tidak terjadi infinite loop.
let i = 1; while (i <= 3) { console.log("Loop ke-" + i); i++; } |
Penjelasan:
Perulangan ini mencetak angka dari 1 hingga 3. Selama nilai i masih kurang dari atau sama dengan 3, loop akan terus berjalan.
3. do...while Loop
Berbeda dari while, perulangan ini akan dijalankan minimal satu kali, baru kondisi dicek setelahnya.
Cocok untuk situasi di mana kamu ingin mengeksekusi sesuatu dulu, baru cek apakah perlu diulang. Biasanya dipakai untuk input pengguna atau proses yang perlu dijalankan minimal sekali.
let i = 5; do { console.log("Nilai i: " + i); i++; } while (i < 5); |
Penjelasan:
Meskipun kondisi i < 5 tidak terpenuhi dari awal, kode tetap dieksekusi sekali. Ini karena pengecekan kondisi dilakukan setelah blok kode dijalankan.
4. forEach() Method
forEach() adalah method khusus untuk array yang digunakan untuk menelusuri semua elemennya.
Cocok banget buat kamu yang ingin memproses setiap nilai dalam array dengan cara rapi dan terstruktur. Tidak bisa dihentikan di tengah jalan seperti for, tapi sangat clean dan readable.
const angka = [10, 20, 30]; angka.forEach(function(item, index) { console.log("Index ke-" + index + ": " + item); }); |
Penjelasan:
Fungsi ini akan mengeksekusi callback untuk tiap elemen array, mengembalikan item dan index. Cocok untuk menampilkan isi array satu per satu.
5. repeat() Method
repeat() bukan perulangan dalam bentuk struktur kontrol seperti loop, tapi berfungsi untuk mengulang string beberapa kali.
Sangat praktis jika kamu hanya ingin menampilkan karakter atau teks yang sama berulang kali. Bisa jadi alternatif loop untuk kasus tertentu yang spesifik.
let teks = "Halo "; console.log(teks.repeat(3)); |
Penjelasan:
Fungsi repeat(3) akan mencetak string "Halo " sebanyak tiga kali. Hasilnya: "Halo Halo Halo ".
Baca juga: Ingin Belajar Front End Development? Cek Roadmapnya di sini!
Contoh Perulangan JavaScript
Sumber: Canva
Supaya makin paham, sekarang kita lihat langsung gimana perulangan JavaScript digunakan dalam kasus nyata.
Berikut ini tiga contoh umum yang sering dipakai saat ngoding—mulai dari menampilkan angka, membaca isi array, sampai menghitung total nilai.
1. Menampilkan Angka 1 sampai 5 dengan for Loop
Contoh ini menggunakan for loop untuk mencetak angka secara berurutan dari 1 sampai 5. Cocok banget buat latihan dasar perulangan.
for (let i = 1; i <= 5; i++) { console.log("Angka: " + i); } |
Output:
Penjelasan:
Loop dimulai dari i = 1 dan berhenti saat i > 5. Setiap iterasi, nilai i dicetak ke console dengan format “Angka: [i]”.
2. Menampilkan Semua Item dalam Array dengan forEach()
Kalau kamu punya data dalam array, forEach() jadi cara paling praktis buat menampilkan semua isinya. Di sini kita akan mencetak nama-nama buah.
const buah = ["apel", "jeruk", "mangga"]; buah.forEach(function(item) { console.log("Buah: " + item); }); |
Output:
Penjelasan:
Setiap elemen array diproses satu per satu, lalu dicetak ke layar. forEach() otomatis menangani iterasi tanpa perlu indeks manual.
3. Menjumlahkan Total Nilai dalam Array
Perulangan juga bisa digunakan untuk mengolah data, seperti menjumlahkan seluruh nilai dalam array. Di contoh ini kita gunakan for loop.
const nilai = [80, 75, 90]; let total = 0; for (let i = 0; i < nilai.length; i++) { total += nilai[i]; } console.log("Total Nilai: " + total); |
Output:
Penjelasan:
Loop menjumlahkan setiap elemen dalam array nilai ke variabel total. Setelah selesai, hasil totalnya ditampilkan ke console.
Baca juga: 12 Bahasa Pemrograman Front End Teratas & Terpopuler 2024
Ingin Jadi Full Stack Web Developer?
Setelah memahami jenis dan contoh perulangan JavaScript, sekarang saatnya kamu melangkah lebih jauh dan membangun website secara profesional dari nol!
Yuk, ikuti Bootcamp Full Stack Web Development di dibimbing.id! Di sini, kamu akan belajar langsung mulai dari dasar HTML, CSS, JavaScript, hingga framework populer seperti React.
Program ini dirancang dengan kurikulum aplikatif dan dibimbing oleh mentor berpengalaman, agar kamu benar-benar paham cara membangun aplikasi web modern yang fungsional dan siap produksi.
Dengan lebih dari 840+ hiring partner dan tingkat keberhasilan alumni mencapai 96%, peluang kariermu di dunia teknologi akan semakin terbuka lebar—baik di startup, agensi, maupun perusahaan besar.
Jadi, tunggu apa lagi? Daftar sekarang disini dan mulai perjalananmu jadi Full Stack Developer profesional! #BimbingSampeJadi
Referensi
- JavaScript For Loop [Buka]
Irhan Hisyam Dwi Nugroho
Irhan Hisyam Dwi Nugroho is an SEO Specialist and Content Writer with 4 years of experience in optimizing websites and writing relevant content for various brands and industries. Currently, I also work as a Content Writer at Dibimbing.id and actively share content about technology, SEO, and digital marketing through various platforms.
