Belajar Javascript #08 : Perulangan

Anak Males -Perulangan (loop) adalah salah satu fitur dasar dalam pemrograman yang memungkinkan Anda menjalankan blok kode berulang kali selama kondisi tertentu terpenuhi. Di JavaScript, perulangan sangat berguna untuk mengolah data, mengulangi tugas, atau memeriksa elemen dalam struktur data seperti array.

JavaScript memiliki beberapa jenis perulangan yang sering digunakan: for, while, do...while, dan juga metode perulangan khusus untuk array seperti forEach. Mari kita bahas satu per satu dengan contoh penggunaannya.

Baca Juga : Belajar Javascript #07 : Percabangan

Perulangan For: Yang Paling Umum

Perulangan for adalah jenis perulangan yang paling sering Anda temui dalam dunia pemrograman, terutama saat bekerja dengan JavaScript. Jika Anda pernah diminta untuk menghitung sesuatu secara berulang, misalnya menghitung mundur, atau menampilkan setiap item dalam daftar, for adalah teman terbaik Anda. Struktur yang teratur dan fleksibilitasnya membuat perulangan for cocok untuk berbagai situasi, baik yang sederhana maupun yang rumit. Mari kita lihat cara kerjanya!

Apa Itu Perulangan for?

Perulangan for adalah jenis perulangan yang paling umum dalam JavaScript. Ini memungkinkan kita untuk menentukan berapa kali perulangan harus dilakukan melalui tiga parameter utama: nilai awal, kondisi, dan increment/decrement. Sintaks dasarnya adalah:

for (nilaiAwal; kondisi; increment/decrement) {
  // Kode yang akan diulang
}

Contoh Sederhana Perulangan For

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

Pada contoh di atas:

• let i = 1 adalah nilai awal.
• i <= 5 adalah kondisi perulangan, yang berarti perulangan akan terus berjalan selama i kurang dari atau sama dengan 5.
• i++ adalah increment, yang akan menambah nilai i setelah setiap iterasi.

Output:

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

Baca Juga : Belajar Javascript #06 : Operator

Perulangan While: Selama Kondisi Terpenuhi

Pernah terpikir bagaimana cara menjalankan kode selama kondisi tertentu masih berlaku? Nah, di sinilah perulangan while masuk! Perulangan ini akan terus berjalan selama kondisinya benar (true). Ini seperti terus bermain video game sampai baterai ponsel habis—selama kondisi “baterai ada” masih terpenuhi, permainan terus berlanjut. Perulangan while sangat cocok digunakan ketika Anda tidak tahu pasti berapa kali perulangan akan terjadi, tetapi tahu kapan harus berhenti. Mari kita lihat bagaimana cara kerjanya!

Apa Itu Perulangan while?

While adalah perulangan yang terus berjalan selama kondisinya benar (true). Berbeda dengan for, while tidak memerlukan inisialisasi atau increment di dalam definisinya. Sebaliknya, perulangan ini hanya bergantung pada kondisi di dalam kurung.

Contoh Perulangan While

let i = 1;

while (i <= 5) {
  console.log("Perulangan ke-" + i);
  i++;  // Jangan lupa increment atau perulangan bisa jadi tak berujung!
}

Outputnya akan sama dengan perulangan for, namun perulangan akan terus berjalan hingga nilai i tidak lagi memenuhi kondisi i <= 5.

Perulangan Do…While: Jalankan Dulu, Periksa Nanti

Pernah ingin menjalankan sesuatu terlebih dahulu baru kemudian memeriksa apakah itu boleh dilanjutkan? Nah, itulah filosofi di balik perulangan do...while. Perulangan ini selalu menjalankan kodenya setidaknya satu kali, bahkan jika kondisinya salah. Bayangkan Anda mencicipi makanan dulu sebelum memutuskan apakah mau tambah lagi atau tidak—itulah do...while! Ini sangat berguna ketika Anda ingin memastikan blok kode dijalankan setidaknya sekali sebelum memeriksa kondisinya. Yuk, kita lihat bagaimana perulangan ini bekerja!

Apa Itu Perulangan do...while?

Perulangan do...while serupa dengan while, tetapi perbedaannya adalah bahwa kode di dalam blok do akan dijalankan terlebih dahulu, dan baru setelah itu kondisinya diperiksa. Dengan kata lain, blok kode akan selalu dijalankan setidaknya satu kali, terlepas dari apakah kondisinya benar atau salah.

Contoh Perulangan Do…While

let i = 1;

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

Outputnya tetap sama seperti for dan while, tetapi dalam perulangan ini, kode di dalam blok do dijalankan terlebih dahulu sebelum kondisi diperiksa.

Baca Juga : Belajar Javascript #05 : Jendela Dialog Untuk Input

Perulangan For…In: Untuk Objek

Ketika bekerja dengan objek di JavaScript, terkadang Anda perlu mengakses setiap properti (key) di dalamnya. Di sinilah perulangan for...in berperan. Bayangkan Anda sedang menjelajahi isi kotak harta karun—Anda ingin tahu apa saja yang ada di dalamnya, bukan? Nah, for...in memungkinkan Anda melihat setiap kunci dan nilai dalam objek, satu per satu. Ini adalah cara yang efisien untuk mengiterasi properti tanpa perlu tahu nama kuncinya terlebih dahulu. Mari kita lihat bagaimana perulangan ini bekerja dalam praktik!

Apa Itu Perulangan for...in?

Perulangan for...in digunakan untuk mengiterasi properti-properti dalam sebuah objek. Ini sangat berguna ketika Anda ingin mengakses semua kunci (key) dari sebuah objek di JavaScript.

Contoh For…In

const orang = {
  nama: "Budi",
  umur: 25,
  pekerjaan: "Programmer"
};

for (let properti in orang) {
  console.log(properti + ": " + orang[properti]);
}

Output:

nama: Budi
umur: 25
pekerjaan: Programmer

Perulangan ini akan melewati setiap properti dari objek orang, mencetak kunci (seperti nama, umur, dan pekerjaan), serta nilainya.

Baca Juga : Tutorial Pemrograman

Perulangan For…Of: Untuk Iterasi Data Koleksi

Jika Anda pernah perlu menelusuri setiap elemen dalam array atau struktur data seperti string, for...of adalah alat yang tepat untuk itu. Bayangkan seperti membolak-balik halaman buku—Anda ingin melihat setiap halaman (elemen) satu per satu. Perulangan for...of memungkinkan Anda mengakses setiap nilai dalam sebuah koleksi data tanpa harus pusing dengan indeks atau properti. Sangat berguna untuk bekerja dengan array, string, atau bahkan objek iterable lainnya! Mari kita lihat bagaimana cara menggunakan for...of ini.

Apa Itu Perulangan for...of?

Perulangan for...of digunakan untuk mengiterasi elemen-elemen dari struktur data seperti array, string, atau objek iterable lainnya. Ini adalah cara yang lebih rapi untuk mengakses elemen array atau karakter dalam string dibandingkan dengan perulangan for biasa.

Contoh For…Of

let angka = [1, 2, 3, 4, 5];

for (let nilai of angka) {
  console.log("Nilai: " + nilai);
}

Output:

Nilai: 1
Nilai: 2
Nilai: 3
Nilai: 4
Nilai: 5

Perulangan ini akan mengakses setiap elemen di dalam array angka dan mencetaknya satu per satu.

Baca Juga : Belajar Javascript #04 : Variabel & Tipe Data

ForEach: Metode Perulangan untuk Array

Ketika bekerja dengan array di JavaScript, perulangan forEach bisa menjadi pilihan yang elegan dan sederhana. Jika for adalah alat serbaguna dan fleksibel, maka forEach adalah cara modern yang lebih fokus pada kemudahan dan kejelasan. Bayangkan sedang menyusuri deretan makanan di meja buffet—dengan forEach, Anda bisa dengan mudah mencicipi setiap hidangan tanpa harus memikirkan berapa banyak yang ada. Metode ini dirancang khusus untuk array dan memungkinkan Anda melakukan sesuatu pada setiap elemen tanpa harus menulis kode bertele-tele. Yuk, kita lihat cara penggunaannya!

Apa Itu ForEach?

forEach adalah metode khusus pada array di JavaScript yang digunakan untuk menjalankan fungsi pada setiap elemen array. Metode ini sangat populer karena ringkas dan mudah dibaca. Metode forEach tidak mengembalikan nilai, tetapi digunakan untuk mengeksekusi fungsi pada setiap item.

Contoh Penggunaan ForEach

let buah = ["Apel", "Pisang", "Jeruk"];

buah.forEach(function(item, index) {
  console.log("Buah ke-" + (index + 1) + ": " + item);
});

Output:

Buah ke-1: Apel
Buah ke-2: Pisang
Buah ke-3: Jeruk

Setiap elemen dalam array buah akan diproses oleh fungsi yang ditentukan dalam metode forEach. Selain elemen itu sendiri (item), Anda juga bisa mendapatkan indeks elemen sebagai parameter tambahan.

Penggunaan Break dan Continue dalam Perulangan

Ketika Anda bekerja dengan perulangan, kadang-kadang Anda ingin keluar lebih awal atau melewati iterasi tertentu. Di sinilah break dan continue menjadi pahlawan!

Bayangkan Anda sedang menonton serial TV. Jika Anda merasa episodenya membosankan, Anda mungkin ingin “break” alias berhenti menonton. Di sisi lain, jika ada bagian yang kurang menarik tapi Anda masih ingin melanjutkan ke bagian seru berikutnya, Anda mungkin memilih untuk “continue”, alias skip ke adegan selanjutnya.

Dalam JavaScript, break digunakan untuk keluar dari perulangan sepenuhnya, sedangkan continue digunakan untuk melewati iterasi saat ini dan melanjutkan ke iterasi berikutnya. Yuk, kita lihat bagaimana cara menggunakannya dalam kode!

Baca Juga : Belajar Javascript #03 : Fungsi Output di Javascript

Apa Itu Break?

break digunakan untuk menghentikan perulangan secara paksa, meskipun kondisinya masih memungkinkan perulangan berlanjut. Ini berguna ketika Anda ingin keluar dari perulangan berdasarkan kondisi tertentu.

Contoh Penggunaan Break

for (let i = 1; i <= 10; i++) {
  if (i === 5) {
    break;  // Menghentikan perulangan saat i = 5
  }
  console.log(i);
}

Output:

1
2
3
4

Pada contoh ini, perulangan akan berhenti begitu i mencapai 5, meskipun seharusnya berjalan hingga i sama dengan 10.

Apa Itu Continue?

continue digunakan untuk melewati iterasi saat ini dan melanjutkan dengan iterasi berikutnya. Ini sering digunakan ketika Anda ingin mengabaikan kondisi tertentu dalam perulangan tetapi tetap melanjutkan ke iterasi berikutnya.

Contoh Penggunaan Continue

for (let i = 1; i <= 5; i++) {
  if (i === 3) {
    continue;  // Melewati iterasi saat i = 3
  }
  console.log(i);
}

Output:

1
2
4
5

Pada contoh ini, angka 3 dilewati karena perintah continue, tetapi perulangan dilanjutkan untuk angka lainnya.

Kapan Menggunakan Jenis Perulangan Tertentu?

• For: Gunakan ketika Anda tahu persis berapa kali perulangan akan dijalankan. Cocok untuk menghitung atau mengakses elemen array berdasarkan indeks.
• While: Gunakan ketika Anda tidak tahu pasti berapa kali perulangan harus dijalankan, tetapi Anda memiliki kondisi yang harus terus dicek.
• Do…While: Gunakan ketika Anda ingin memastikan bahwa kode dalam blok perulangan dijalankan setidaknya sekali.
• For…In: Gunakan untuk mengiterasi properti dalam objek.
• For…Of: Gunakan untuk mengiterasi elemen dalam array atau objek iterable lainnya.
• ForEach: Gunakan metode ini untuk perulangan yang lebih rapi dan bersih pada array.

Kesimpulan

Perulangan adalah salah satu konsep dasar yang esensial dalam JavaScript. Dengan memahami berbagai jenis perulangan, seperti for, while, do...while, forEach, dan sebagainya, Anda bisa menulis kode yang lebih dinamis dan efisien. Setiap jenis perulangan memiliki kegunaan masing-masing tergantung pada skenario yang Anda hadapi. Memahami kapan dan bagaimana menggunakan jenis perulangan ini adalah kunci untuk menjadi pengembang JavaScript yang handal.