Belajar Perulangan JavaScript: for, while, dan do...while

1. Apa Itu Perulangan?#

Perulangan adalah struktur kontrol yang memungkinkan program menjalankan suatu blok kode berulang kali.

Pengulangan tersebut bisa dilakukan berdasarkan jumlah tertentu atau selama sebuah kondisi masih terpenuhi.

Misalnya, kita ingin menampilkan angka 1 sampai 5.

Daripada menulis lima instruksi console.log(), kita bisa menggunakan:

1
for (let nomor = 1; nomor <= 5; nomor++) {
2
  console.log(nomor);
3
}

Hasilnya:

1
1
2
2
3
3
4
4
5
5

Hanya dengan beberapa baris kode, kita bisa menghasilkan lima keluaran.

Kalau ingin menampilkan angka sampai 100, kita cukup mengubah batas perulangannya.

Namun, sebelum mencoba berbagai jenis loop, kita perlu memahami konsep dasarnya.

2. Mengenal Iterasi dan Kondisi Berhenti#

Satu kali pelaksanaan blok kode dalam perulangan disebut iterasi.

Jika sebuah loop menjalankan blok kode sebanyak lima kali, berarti terjadi lima iterasi.

Dalam banyak perulangan, ada tiga hal penting:

1. Nilai awal.
2. Kondisi yang menentukan apakah perulangan dilanjutkan.
3. Perubahan nilai agar perulangan dapat mencapai kondisi berhenti.

Perhatikan:

1
for (let angka = 1; angka <= 3; angka++) {
2
  console.log(angka);
3
}

Alurnya:

Perulangan berhenti ketika kondisinya tidak lagi terpenuhi.

Memahami kondisi berhenti sangat penting agar kita tidak membuat program yang terus berulang tanpa sengaja.

3. Perulangan for#

Perulangan for sering digunakan ketika kita mengetahui pola jumlah pengulangan yang dibutuhkan.

Strukturnya:

1
for (nilaiAwal; kondisi; perubahan) {
2
  // Kode yang dijalankan berulang
3
}

Contohnya:

1
for (let i = 1; i <= 5; i++) {
2
  console.log(`Perulangan ke-${i}`);
3
}

Hasilnya:

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

Mari kita bedah.

1
let i = 1

1
for (let nomorArtikel = 1; nomorArtikel <= 5; nomorArtikel++) {
2
  console.log(nomorArtikel);
3
}

1
i <= 5

1
i++

1
i++

1
i = i + 1;

4. Membuat Perulangan Mundur#

Perulangan tidak harus selalu bergerak dari angka kecil ke angka besar.

Kita juga bisa membuat hitung mundur.

Contohnya:

1
for (let angka = 5; angka >= 1; angka--) {
2
  console.log(angka);
3
}

Hasilnya:

1
5
2
4
3
3
4
2
5
1

Operator -- digunakan untuk mengurangi nilai sebanyak satu.

Perhatikan perbedaan kondisinya.

Untuk menghitung naik, kita menggunakan:

1
angka <= 5

Sedangkan untuk menghitung mundur, kita menggunakan:

1
angka >= 1

Arah perubahan nilai harus sesuai dengan kondisi berhentinya.

5. Mengatur Langkah Perulangan#

Kita tidak harus menambah atau mengurangi nilai satu per satu.

Misalnya, kita ingin menampilkan bilangan genap dari 2 sampai 10.

1
for (let angka = 2; angka <= 10; angka += 2) {
2
  console.log(angka);
3
}

Hasilnya:

1
2
2
4
3
6
4
8
5
10

Pada contoh ini:

1
angka += 2

Berarti nilai angka ditambah 2 setiap selesai menjalankan satu iterasi.

Kita juga bisa membuat pola lain, seperti kelipatan 5.

1
for (let angka = 5; angka <= 25; angka += 5) {
2
  console.log(angka);
3
}

Hasilnya:

1
5
2
10
3
15
4
20
5
25

6. Perulangan while#

Selain for, JavaScript menyediakan while.

Perulangan while menjalankan blok kode selama kondisinya bernilai truthy.

Strukturnya:

1
while (kondisi) {
2
  // Kode yang dijalankan berulang
3
}

Contohnya:

1
let angka = 1;
2

3
while (angka <= 5) {
4
  console.log(angka);
5
  angka++;
6
}

Hasilnya:

1
1
2
2
3
3
4
4
5
5

Perhatikan bahwa pada while, nilai awal dan perubahan nilai biasanya ditulis terpisah dari pernyataan loop.

Nilai awal:

1
let angka = 1;

Kondisi:

1
while (angka <= 5)

Perubahan nilai:

1
angka++;

1
let jumlahAntrian = 3;
2

3
while (jumlahAntrian > 0) {
4
  console.log(`Memproses antrian. Sisa: ${jumlahAntrian}`);
5
  jumlahAntrian--;
6
}
7

8
console.log("Semua antrian selesai.");

1
Memproses antrian. Sisa: 3
2
Memproses antrian. Sisa: 2
3
Memproses antrian. Sisa: 1
4
Semua antrian selesai.

7. Perulangan do…while#

Jenis berikutnya adalah do...while.

Perbedaannya dengan while terletak pada kapan kondisi diperiksa.

Pada while, kondisi diperiksa sebelum blok kode dijalankan.

Pada do...while, blok kode dijalankan terlebih dahulu, kemudian kondisinya diperiksa.

Strukturnya:

1
do {
2
  // Kode yang dijalankan
3
} while (kondisi);

Contohnya:

1
let angka = 1;
2

3
do {
4
  console.log(angka);
5
  angka++;
6
} while (angka <= 5);

Hasilnya:

1
1
2
2
3
3
4
4
5
5

Sekilas hasilnya sama dengan while.

Tetapi coba perhatikan contoh berikut.

1
let angka = 10;
2

3
while (angka <= 5) {
4
  console.log(angka);
5
  angka++;
6
}

1
let angka = 10;
2

3
do {
4
  console.log(angka);
5
  angka++;
6
} while (angka <= 5);

1
10

8. Kapan Menggunakan for, while, dan do…while?#

Ketiganya dapat digunakan untuk melakukan pengulangan.

Perbedaannya lebih berkaitan dengan kebutuhan dan keterbacaan kode.

Misalnya, untuk menampilkan angka 1 sampai 100, for biasanya lebih ringkas.

Untuk memproses pekerjaan selama antrian masih tersedia, while bisa terasa lebih alami.

Untuk menjalankan sebuah tindakan sebelum memutuskan apakah perlu mengulanginya, do...while bisa menjadi pilihan.

Tidak perlu memaksakan satu jenis loop untuk semua kebutuhan.

Pilih yang paling jelas menggambarkan alur program.

9. Menghentikan Perulangan dengan break#

Terkadang kita ingin menghentikan perulangan sebelum kondisi normalnya berakhir.

JavaScript menyediakan break.

Contohnya:

1
for (let angka = 1; angka <= 10; angka++) {
2
  if (angka === 6) {
3
    break;
4
  }
5

6
  console.log(angka);
7
}

Hasilnya:

1
1
2
2
3
3
4
4
5
5

Perulangan berhenti ketika angka bernilai 6.

Kenapa angka 6 tidak ditampilkan?

Karena pemeriksaan if dilakukan sebelum console.log().

Saat kondisi angka === 6 terpenuhi, break langsung menghentikan loop.

1
const nomorDicari = 4;
2

3
for (let nomor = 1; nomor <= 10; nomor++) {
4
  if (nomor === nomorDicari) {
5
    console.log(`Artikel nomor ${nomor} ditemukan.`);
6
    break;
7
  }
8
}

1
Artikel nomor 4 ditemukan.

10. Melewati Iterasi dengan continue#

Berbeda dari break, continue tidak menghentikan seluruh perulangan.

continue digunakan untuk melewati sisa instruksi pada iterasi saat ini, lalu melanjutkan proses loop sesuai aturannya.

Contohnya:

1
for (let angka = 1; angka <= 5; angka++) {
2
  if (angka === 3) {
3
    continue;
4
  }
5

6
  console.log(angka);
7
}

Hasilnya:

1
1
2
2
3
4
4
5

Angka 3 dilewati, tetapi loop tetap berjalan sampai selesai.

1
for (let nomor = 1; nomor <= 6; nomor++) {
2
  if (nomor === 4) {
3
    continue;
4
  }
5

6
  console.log(`Menampilkan artikel nomor ${nomor}`);
7
}

1
Menampilkan artikel nomor 1
2
Menampilkan artikel nomor 2
3
Menampilkan artikel nomor 3
4
Menampilkan artikel nomor 5
5
Menampilkan artikel nomor 6

11. Hati-Hati dengan Infinite Loop#

Salah satu kesalahan yang cukup sering terjadi ketika belajar perulangan adalah membuat infinite loop.

Infinite loop merupakan perulangan yang tidak mencapai kondisi berhenti.

Contohnya:

1
let angka = 1;
2

3
while (angka <= 5) {
4
  console.log(angka);
5
}

Apa masalahnya?

Nilai angka tidak pernah berubah.

Akibatnya, kondisi angka <= 5 terus bernilai true.

Kode tersebut dapat terus berjalan dan membuat halaman browser tidak responsif.

Jangan menjalankan contoh tersebut tanpa pengaman.

Jika browser terlanjur tidak responsif akibat loop yang tidak berhenti, hentikan eksekusi melalui Developer Tools jika memungkinkan atau tutup tab yang bermasalah.

1
let angka = 1;
2

3
while (angka <= 5) {
4
  console.log(angka);
5
  angka++;
6
}

12. Mengenal for…of#

JavaScript juga menyediakan for...of.

Berbeda dari contoh for sebelumnya yang menggunakan penghitung angka, for...of digunakan untuk mengambil nilai dari sebuah iterable, seperti array atau string.

Contohnya:

1
const kategori = ["HTML", "CSS", "JavaScript"];
2

3
for (const namaKategori of kategori) {
4
  console.log(namaKategori);
5
}

Hasilnya:

1
HTML
2
CSS
3
JavaScript

Pada setiap iterasi, variabel namaKategori menerima satu nilai dari array.

Kita juga bisa menggunakan for...of pada string.

1
const teks = "WEB";
2

3
for (const huruf of teks) {
4
  console.log(huruf);
5
}

Hasilnya:

1
W
2
E
3
B

Untuk sekarang, kita hanya perlu mengenal cara kerja dasarnya.

Array dan berbagai metode pengolahannya akan dibahas lebih lengkap pada JavaScript #6.

13. Praktik: Menampilkan Daftar Artikel#

Sekarang kita buat contoh sederhana untuk website BapakGabut.

Misalnya, kita ingin menampilkan lima nomor artikel.

1
const jumlahArtikel = 5;
2

3
console.log("Daftar Artikel BapakGabut");
4

5
for (let nomor = 1; nomor <= jumlahArtikel; nomor++) {
6
  console.log(`Artikel #${nomor}`);
7
}

Hasilnya:

1
Daftar Artikel BapakGabut
2
Artikel #1
3
Artikel #2
4
Artikel #3
5
Artikel #4
6
Artikel #5

Selanjutnya, kita ingin memberikan penanda untuk artikel yang masih draft.

Misalnya, artikel nomor 3 belum diterbitkan.

1
const jumlahArtikel = 5;
2
const nomorDraft = 3;
3

4
for (let nomor = 1; nomor <= jumlahArtikel; nomor++) {
5
  if (nomor === nomorDraft) {
6
    console.log(`Artikel #${nomor}: Draft`);
7
  } else {
8
    console.log(`Artikel #${nomor}: Published`);
9
  }
10
}

Hasilnya:

1
Artikel #1: Published
2
Artikel #2: Published
3
Artikel #3: Draft
4
Artikel #4: Published
5
Artikel #5: Published

Sekarang coba ubah kebutuhannya.

Kita hanya ingin menampilkan artikel yang sudah diterbitkan.

Gunakan continue.

1
const jumlahArtikel = 5;
2
const nomorDraft = 3;
3

4
for (let nomor = 1; nomor <= jumlahArtikel; nomor++) {
5
  if (nomor === nomorDraft) {
6
    continue;
7
  }
8

9
  console.log(`Menampilkan artikel #${nomor}`);
10
}

Hasilnya:

1
Menampilkan artikel #1
2
Menampilkan artikel #2
3
Menampilkan artikel #4
4
Menampilkan artikel #5

Dari latihan ini, kita sudah menggabungkan perulangan, percabangan, operator perbandingan, dan template literal.

Semua konsep tersebut akan sering digunakan ketika kita mulai mengolah kumpulan data.

14. Kesalahan Umum Saat Menggunakan Perulangan#

1
for (let angka = 1; angka < 5; angka++) {
2
  console.log(angka);
3
}

1
1
2
2
3
3
4
4

1
let angka = 1;
2

3
while (angka <= 5) {
4
  console.log(angka);
5
}

15. Latihan Mandiri#

Sekarang giliran Gabuters mencoba.

1
Hitung mundur selesai!

1
Artikel nomor 8 ditemukan!

1
const kategori = [
2
  "HTML",
3
  "CSS",
4
  "JavaScript",
5
  "Backend",
6
  "Database"
7
];

16. Penutup#

Pada artikel ini, kita sudah mempelajari konsep perulangan atau iterasi dalam JavaScript.

Kita mengenal for, while, dan do...while, memahami kondisi berhenti, serta menggunakan break dan continue untuk mengatur alur perulangan.

Kita juga mencoba for...of untuk mengambil nilai dari array dan string.

Dengan perulangan, kita tidak perlu menulis instruksi yang sama berkali-kali.

Tetapi sekarang muncul tantangan baru.

Bagaimana kalau ada sekumpulan instruksi yang ingin kita gunakan di beberapa bagian program, dengan input yang berbeda-beda?

Apakah kita harus menyalin kode tersebut setiap kali dibutuhkan?

Pada artikel berikutnya, kita akan membahas Function JavaScript: Membuat Kode Lebih Rapi dan Bisa Digunakan Ulang.

Kita akan belajar membuat function, menggunakan parameter, mengembalikan nilai dengan return, dan mengenal arrow function.

Sampai jumpa di artikel berikutnya, Gabuters!