Javascript Dasar #5: Perulangan (Loops)

Author Hilya Zea
25 Dec 2024
Javascript
Javascript Dasar #5: Perulangan (Loops)

Hai, kembali lagi! Di tutorial kali ini, kita akan belajar tentang perulangan atau loops. Perulangan sangat berguna ketika kamu ingin menjalankan kode yang sama berulang kali tanpa menulisnya lagi. Ada beberapa jenis perulangan di JavaScript yang akan kita pelajari.

1. For Loop

Perulangan for digunakan ketika kita tahu berapa kali perulangan harus dilakukan. Biasanya digunakan untuk perulangan berdasarkan angka atau indeks dalam sebuah array.

for (let i = 0; i < 5; i++) {
  console.log("Perulangan ke-" + i);
}

Penjelasan:

  • let i = 0 adalah inisialisasi variabel (dimulai dari 0).
  • i < 5 adalah kondisi yang akan dicek di setiap iterasi. Jika kondisi ini true, maka kode dalam blok for akan dijalankan.
  • i++ adalah increment, yang berarti menambah nilai i setiap kali perulangan selesai.

Outputnya:

Perulangan ke-0
Perulangan ke-1
Perulangan ke-2
Perulangan ke-3
Perulangan ke-4

2. While Loop

Perulangan while digunakan ketika kita ingin perulangan berjalan selama kondisi tertentu tetap terpenuhi. Perulangan akan terus berjalan selama kondisi true.

let i = 0;
while (i < 5) {
  console.log("Perulangan ke-" + i);
  i++;
}

Di sini, perulangan akan terus berjalan selama i kurang dari 5, dan setiap iterasi nilai i akan bertambah satu.

3. Do While Loop

do while hampir sama dengan while, tetapi perbedaan utamanya adalah perulangan do akan selalu dijalankan minimal satu kali, meskipun kondisi awalnya false.

let i = 0;
do {
  console.log("Perulangan ke-" + i);
  i++;
} while (i < 5);

Perulangan ini juga akan menghasilkan output yang sama dengan while di atas, tapi yang membedakan adalah kondisi baru diperiksa setelah kode di dalam blok do dijalankan.

4. For...of (untuk Array)

Jika kita ingin melakukan perulangan pada sebuah array, kita bisa menggunakan for...of. Ini adalah cara yang lebih modern dan lebih mudah digunakan dibandingkan dengan for tradisional.

let angka = [1, 2, 3, 4, 5];
for (let nilai of angka) {
  console.log(nilai);
}

Outputnya:

1
2
3
4
5

Studi Kasus: Menampilkan Daftar Angka Genap

Note : Kalian bisa mempraktekannya di CodeLab dari code80vity

Sekarang, kita akan buat program untuk menampilkan angka genap dari 1 hingga 20 menggunakan perulangan.

HTML-nya:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Angka Genap</title>
</head>
<body>
  <h1>Daftar Angka Genap dari 1 sampai 20</h1>
  <ul id="hasil"></ul>

  <script src="script.js"></script>
</body>
</html>

JavaScript-nya (di file script.js):

function tampilkanAngkaGenap() {
  let hasil = document.getElementById("hasil");
  for (let i = 1; i <= 20; i++) {
    if (i % 2 === 0) {  // Mengecek apakah angka genap
      let listItem = document.createElement("li");
      listItem.textContent = i;
      hasil.appendChild(listItem);
    }
  }
}

tampilkanAngkaGenap();

Penjelasan:

  • Kita menggunakan perulangan for untuk menghitung angka dari 1 sampai 20.
  • Di dalam perulangan, kita cek apakah angka tersebut genap menggunakan operator modulus (%).
  • Jika angka genap, kita buat elemen list (<li>) dan menambahkannya ke dalam daftar di HTML.

Sekian dulu tentang perulangan di JavaScript. Dengan perulangan, kamu bisa membuat program yang bisa mengulang aksi berulang kali dengan mudah. Artikel ini sangat berguna sebelum kamu melanjutkan ke tutorial JavaScript selanjutnya di www.code80vity.com. Semoga kamu semakin jago membuat program yang membutuhkan pengulangan!

Tutorial Terkait Lainnya

Javascript Dasar #6: Array & Manipulasi Data
Javascript Dasar #6: Array & Manipulasi Data

Hai, apa kabar? Kembali lagi di tutorial JavaScript! Di tutorial kali ini, kita akan belajar tentang...

Baca Tutorial
Javascript Dasar #8: Event Handling di JavaScript
Javascript Dasar #8: Event Handling di JavaScript

Halo, teman-teman! Kali ini kita akan belajar tentang Event Handling di JavaScript. Event adalah tin...

Baca Tutorial
Javascript Dasar #11: DOM Manipulation
Javascript Dasar #11: DOM Manipulation

Halo, teman-teman! Kali ini kita akan membahas tentang DOM Manipulation atau cara kita berinteraksi ...

Baca Tutorial

Comments

Please login to post a comment.
No comments yet. Be the first to comment!
Previous Next
Tutorial Terkait
Javascript Dasar #10: Error Handling
Javascript Dasar #7: Objek (Objects) dan Cara Penggunaannya
Javascript Dasar #4: Pengkondisian (If, Else, dan Switch)
Javascript Dasar #9: Asynchronous JavaScript & Promises
Tutorial Terbaru
Python Dasar #10: Modul dan library
26 Dec 2024 Python
Python Dasar #9: Penggunaan File
26 Dec 2024 Python
Python Dasar #8: Exception Handling
26 Dec 2024 Python
Python Dasar #7: conditional Python
26 Dec 2024 Python
Python Dasar #6: List dan Dictionary di Python
26 Dec 2024 Python