JavaScript Loops

1. Konsep Dasar JavaScript Loops

Loops adalah sebuah instruksi dalam pemrograman yang memungkinkan kamu menjalankan satu blok kode berulang kali selama kondisi tertentu terpenuhi.

Tanpa loops, jika kamu ingin mencetak angka 1 sampai 5, kamu harus menulisnya secara manual seperti ini:

console.log(1);
console.log(2);
console.log(3);
console.log(4);
console.log(5);

Dengan loops, kamu hanya perlu menulis instruksi satu kali, dan komputer akan mengulanginya untuk kamu. Ini membuat kodemu lebih DRY (Don't Repeat Yourself), lebih bersih, dan lebih mudah dikelola.

2. JavaScript Loops dengan For

for loop adalah jenis perulangan yang paling umum digunakan. Kita menggunakan for ketika kita sudah tahu pasti berapa kali perulangan harus dilakukan (misalnya: ulangi sebanyak 10 kali).

Struktur Syntax

for (inisialisasi; kondisi; perubahan) {
  // Kode yang akan dijalankan
}

Contoh Implementasi

Mari kita buat kode untuk mencetak angka 1 sampai 5 menggunakan for.

// Mencetak angka 1 sampai 5
for (let i = 1; i <= 5; i++) {
  console.log("Angka ke-" + i);
}

Penjelasan Kode:

1. Inisialisasi (let i = 1): Kita membuat variabel i sebagai penghitung awal, dimulai dari angka 1.
2. Kondisi (i <= 5): Sebelum setiap perulangan, JavaScript memeriksa apakah i kurang dari atau sama dengan 5. Jika true, kode dijalankan. Jika false, perulangan berhenti.
3. Perubahan (i++): Setelah kode di dalam kurung kurawal {} selesai dijalankan, nilai i ditambah 1.

3. JavaScript Loops dengan While

while loop digunakan ketika kita tidak tahu pasti berapa kali perulangan harus dilakukan, tetapi kita tahu kondisinya harus true agar perulangan tetap berjalan.

Struktur Syntax

while (kondisi) {
  // Kode dijalankan selama kondisi bernilai true
}

Contoh Implementasi

Kita akan membuat simulasi sederhana di mana loop terus berjalan selama nilai penghitung kurang dari 5.

let counter = 0;

while (counter < 5) {
  console.log("Perulangan ke-" + counter);
  
  // SANGAT PENTING: Kita harus mengubah nilai counter
  counter++; 
}

Penjelasan Kode:

• Pertama, kita mendeklarasikan counter di luar loop.
• Loop memeriksa apakah counter < 5. Karena 0 < 5, kode dijalankan.
• Di dalam blok kode, kita melakukan counter++. Jika baris ini lupa ditulis, nilai counter akan selamanya 0, kondisinya akan selamanya true, dan akan terjadi Infinite Loop (perulangan tak terbatas) yang bisa membuat browser atau aplikasimu hang.

4. JavaScript Loops Break

Terkadang, kamu ingin menghentikan perulangan secara paksa meskipun kondisinya masih terpenuhi. Untuk inilah kita menggunakan kata kunci break.

Kapan menggunakannya?

Biasanya digunakan saat kita mencari data tertentu. Jika data sudah ditemukan, tidak perlu melanjutkan perulangan sampai akhir.

Contoh Implementasi

Kita akan melakukan perulangan dari 0 sampai 10, tapi kita ingin berhenti total saat angka mencapai 5.

for (let i = 0; i <= 10; i++) {
  if (i === 5) {
    console.log("Angka 5 ditemukan! Berhenti.");
    break; // Keluar dari loop sepenuhnya
  }
  
  console.log(i);
}

Hasil Output: Program akan mencetak 0, 1, 2, 3, 4, lalu mencetak "Angka 5 ditemukan! Berhenti.", dan perulangan selesai. Angka 6 sampai 10 tidak akan pernah dieksekusi.

5. JavaScript Loops Continue

Kebalikan dari break, continue tidak menghentikan perulangan sepenuhnya. Ia hanya melewati (skip) sisa kode pada iterasi saat ini dan langsung melompat ke iterasi berikutnya.

Kapan menggunakannya?

Saat kamu ingin memfilter data tertentu agar tidak diproses, tetapi tetap ingin melanjutkan perulangan untuk data lainnya.

Contoh Implementasi

Mari kita mencetak angka ganjil saja dari 1 sampai 5. Kita akan melewati angka genap.

for (let i = 1; i <= 5; i++) {
  // Cek apakah angka genap (habis dibagi 2)
  if (i % 2 === 0) {
    continue; // Lewati sisa kode di bawah, lanjut ke i berikutnya
  }
  
  console.log("Angka Ganjil: " + i);
}

Penjelasan:

• Saat i bernilai 2, 2 % 2 === 0 adalah true. Perintah continue dijalankan.
• console.log di bawahnya tidak dijalankan untuk angka 2.
• Loop langsung melompat ke i bernilai 3.

Latihan

Soal 1 : Hitung Mundur

Buatlah sebuah loop yang berfungsi untuk menghitung mundur dari 10 samapi dengan 0, jika sudah 0 maka tampilkan tulisan "Selesai"

Soal 2 :

Buatlah sebuah loop yang befungsi untuk menjumlah kan semua bilangan genap dari 1 sampai dengan 100

Soal 3 :

Buatlah sebuah loop dari 1 sampai dengan 50, jika :

• Jika angka habis dibagi 3, cetak "Fizz".
• Jika angka habis dibagi 5, cetak "Buzz".
• Jika habis dibagi keduanya (3 dan 5), cetak "FizzBuzz".
• Jika tidak, cetak angkanya saja.