5 Macam Bentuk Perulangan dalam Javascript

5 Macam Bentuk Perulangan dalam Javascript

byMenjadigital •
0
5 Macam Bentuk Perulangan dalam Javascript

Dunia pemrograman Javascript tidak lepas dari konsep penting - perulangan (loop). Kemampuan menguasai perulangan akan membantu Anda mengotomatiskan tugas berulang, menyederhanakan algoritma kompleks, dan membangun aplikasi web dinamis. Artikel ini akan menjadi panduan komprehensif untuk mengenal 5 macam bentuk perulangan dalam Javascript, dilengkapi dengan penjelasan terperinci, contoh-contoh praktis, dan tips untuk penggunaannya secara efektif.

{getToc} $title={Table of Contents}

Perulangan for

for (initialization; condition; increment/decrement) {
  // kode yang akan dijalankan berulang kali
} {codeBox}

Penjelasan:
  1. Perulangan for merupakan struktur klasik untuk iterasi dengan jumlah pasti yang telah ditentukan sebelumnya.
  2. initialization: Blok kode ini dieksekusi hanya sekali di awal untuk menginisialisasi variabel, biasanya untuk mengatur sebuah counter.
  3. condition: Kondisi ini menjadi penentu kelanjutan perulangan. Jika bernilai true, kode di dalam loop akan dijalankan, sebaliknya jika false, perulangan berakhir.
  4. increment/decrement: Blok kode ini dieksekusi setelah setiap iterasi untuk memperbarui counter (misalnya menambah atau mengurangi satu) sehingga kondisi terpenuhi dan perulangan berhenti.

Contoh:
for (let i = 0; i < 5; i++) {
  console.log("Iterasi:", i);
} {codeBox}

Output:

Iterasi: 0
Iterasi: 1
Iterasi: 2
Iterasi: 3
Iterasi: 4


Perulangan while

Sintaks:
while (condition) {
  // kode yang akan dijalankan berulang kali
} {codeBox}

Penjelasan:
  1. Perulangan while mengeksekusi kode berulang kali selama kondisi tertentu tetap terpenuhi.
  2. Kondisi diperiksa sebelum setiap iterasi. Jika true, kode di dalam loop akan dijalankan, sebaliknya jika false, perulangan berakhir.
  3. Keunikan perulangan while adalah tidak adanya batasan pasti jumlah iterasi, sehingga penting memastikan kondisi berubah menjadi false agar terhindar dari infinite loop (perulangan tak terhingga).

Contoh:
let count = 0;
while (count < 3) {
  console.log("Count:", count);
  count++;
} {codeBox}

Output:

Count: 0
Count: 1
Count: 2

Perulangan do-while

do {
  // kode yang akan dijalankan berulang kali
} while (condition); {codeBox}

Penjelasan:
  1. Perulangan do-while memiliki persamaan dengan while, namun dengan perbedaan utama: blok kode di dalam loop dijamin dieksekusi minimal sekali sebelum kondisi diperiksa.
  2. Setelah eksekusi pertama, kondisi diperiksa seperti biasa. Jika true, kode di dalam loop dijalankan lagi, dan proses berulang sampai kondisi menjadi false.
  3. Perulangan ini berguna ketika Anda ingin memastikan blok kode di dalam loop dieksekusi setidaknya sekali, terlepas dari nilai awal kondisi.

Contoh:
let value = 10;
do {
  console.log("Value:", value);
  value--;
} while (value > 0); {codeBox}

Output:

Value: 10
Value: 9
Value: 8
Value: 7
Value: 6
Value: 5

Perulangan for...in

for (property in object) {
  // kode yang akan dijalankan menggunakan property dan object[property]
} {codeBox}

Penjelasan:
  1. Perulangan for...in khusus digunakan untuk iterasi melalui properti enumerable sebuah objek. Setiap iterasi, variabel property berisi nama properti yang sedang diakses.
  2. Untuk mengakses nilai properti, gunakan object[property].
  3. Perhatikan bahwa urutan iterasi properti tidak dijamin, dan properti yang ditambahkan secara dinamis mungkin tidak termasuk dalam iterasi.

Contoh:
const person = { name: "Alice", age: 30 };
for (const prop in person) {
  console.log(prop, ":", person[prop]);
} {codeBox}

Output:

name: Alice
age: 30

Tips:
Gunakan hasOwnProperty untuk memastikan properti bukan berasal dari prototype chain.
for (const prop in person) {
  if (person.hasOwnProperty(prop)) {
    console.log(prop, ":", person[prop]);
  }
} {codeBox}

Perulangan for...of

Sintaks:
for (item of iterable) {
  // kode yang akan dijalankan menggunakan item
} {codeBox}

Penjelasan:
  1. Perulangan for...of menawarkan cara yang lebih ringkas dan modern untuk iterasi melalui array dan objek iterable (seperti string, map, set).
  2. Setiap iterasi, variabel item berisi elemen array atau nilai iterable saat ini.
  3. Perulangan ini tidak memerlukan counter atau kondisi eksplisit, sehingga lebih mudah dibaca dan dipelihara.

Contoh:
const numbers = [1, 2, 3, 4, 5];
for (const number of numbers) {
  console.log(number);
} {codeBox}

Output:

1
2
3
4
5

Tips:
Perulangan for...of dapat digunakan dengan berbagai jenis iterable, seperti string, map, dan set.
const str = "Hello, world!";
for (const char of str) {
  console.log(char);
}

const map = new Map([["a", 1], ["b", 2], ["c", 3]]);
for (const [key, value] of map) {
  console.log(key, ":", value);
} {codeBox}

Kesimpulan

Memahami dan menguasai kelima bentuk perulangan dalam Javascript merupakan kunci untuk membangun program yang efisien dan terstruktur. Pilihlah perulangan yang paling sesuai dengan kebutuhan Anda, dan gunakan tips yang provided untuk meningkatkan efektivitas dan keefektifan kode Anda.


QA: 5 Macam Bentuk Perulangan dalam Javascript

Apa perbedaan antara for, while, dan do-while?

  • for: Digunakan untuk iterasi dengan jumlah pasti.
  • while: Digunakan untuk iterasi bersyarat, di mana kode dijalankan selama kondisi terpenuhi.
  • do-while: Mirip dengan while, tetapi blok kode dijamin dijalankan minimal sekali, terlepas dari kondisi awal.

Kapan menggunakan for...in dan for...of?

  • for...in: Digunakan untuk iterasi melalui properti enumerable sebuah objek.
  • for...of: Digunakan untuk iterasi melalui array dan objek iterable lainnya.

Bagaimana cara menghindari infinite loop?

  • Pastikan kondisi dalam perulangan while dan do-while berubah menjadi false pada suatu titik.
  • Gunakan debugger untuk melacak eksekusi kode dan menemukan infinite loop.

Di mana saya dapat mempelajari lebih lanjut tentang perulangan Javascript?

Tags:

Posting Komentar

Lebih baru Lebih lama