JavaScript For Loop - JavaScript adalah bahasa pemrograman yang digunakan untuk menambahkan interaksi dan dinamika pada halaman web. Salah satu fitur yang sangat berguna dalam JavaScript adalah "for loop".
For loop adalah perulangan yang digunakan untuk mengulangi kode yang sama sebanyak jumlah yang ditentukan.
JavaScript For Loop
Struktur dasar dari for loop adalah sebagai berikut:
for (inisialisasi; kondisi; increment/decrement) {
// kode yang akan diulang
}
Pada bagian inisialisasi, kita dapat menentukan variabel yang digunakan untuk menghitung jumlah perulangan. Pada bagian kondisi, kita dapat menentukan berapa banyak kali perulangan akan dilakukan. Dan pada bagian increment/decrement, kita dapat menentukan seberapa banyak variabel yang digunakan untuk menghitung akan ditambah atau dikurangi setiap perulangan.
Contoh:
for (var i = 0; i < 5; i++) {
console.log(i);
}
Pada contoh di atas, variabel "i" diinisialisasi dengan 0, kondisi perulangan adalah "i < 5", sehingga perulangan akan dilakukan sebanyak 5 kali. Increment yang digunakan adalah "i++", sehingga setiap perulangan "i" akan ditambah 1.
For loop juga dapat digunakan dengan array. Contohnya:
var buah = ["Apel", "Mangga", "Anggur"];
for (var i = 0; i < buah.length; i++) {
console.log(buah[i]);
}
Pada contoh di atas, for loop akan menampilkan setiap elemen dari array "buah" satu per satu.
Itulah penjelasan singkat mengenai for loop dalam JavaScript. For loop sangat berguna dalam menyelesaikan tugas yang memerlukan perulangan, sehingga dapat mempercepat proses pembuatan kode dan meningkatkan efisiensi.
Baca juga : Jenis-Jenis Operator JavaScript
Javascript for in loop
Selain for loop, JavaScript juga memiliki fitur lain yang disebut "for in loop". For in loop digunakan untuk mengiterasi properti-properti dari sebuah objek. Struktur dasar dari for in loop adalah sebagai berikut:
for (variabel in objek) {
// kode yang akan diulang
}
Pada bagian variabel, kita dapat menentukan variabel yang digunakan untuk menyimpan nama properti saat iterasi. Pada bagian objek, kita dapat menentukan objek yang akan diiterasi.
Contoh:
var mobil = {merk: "Honda", warna: "Merah", tahun: 2020};
for (var x in mobil) {
console.log(x + ": " + mobil[x]);
}
Pada contoh di atas, for in loop akan menampilkan setiap properti dari objek "mobil" beserta nilainya. Output yang dihasilkan adalah:
merk: Honda
warna: Merah
tahun: 2020
Perlu diingat bahwa for in loop akan mengiterasi semua properti dari objek termasuk properti yang diturunkan dari prototype. Jika anda ingin hanya mengiterasi properti yang di-define di objek itu sendiri, anda dapat menggunakan for loop bersama dengan Object.keys()
for (var x in keys(mobil)) {
console.log(x + ": " + mobil[x]);
}
Itulah penjelasan singkat mengenai for in loop dalam JavaScript. For in loop sangat berguna dalam mengiterasi properti-properti dari sebuah objek dan digunakan untuk mengambil properti-properti dari objek.
complete web browser Example of javascript for in loop
Berikut ini adalah contoh penggunaan for in loop dalam JavaScript yang dapat digunakan dalam sebuah web browser:
<!DOCTYPE html>
<html>
<body>
<p>Klik tombol di bawah ini untuk menampilkan properti-properti dari objek "mobil"</p>
<button onclick="myFunction()">Klik</button>
<p id="demo"></p>
<script>
var mobil = {merk: "Honda", warna: "Merah", tahun: 2020};
function myFunction() {
var txt = "";
for (var x in mobil) {
txt += x + ": " + mobil[x] + "<br>";
}
document.getElementById("demo").innerHTML = txt;
}
</script>
</body>
</html>
Di dalam kode diatas, kami membuat sebuah objek "mobil" yang memiliki properti merk, warna, dan tahun. Kami juga menambahkan sebuah tombol yang memanggil fungsi myFunction() saat diklik.
Fungsi myFunction() mengiterasi objek "mobil" dengan menggunakan for in loop. Untuk setiap properti yang ditemukan, nama properti dan nilainya ditambahkan ke dalam variabel txt, yang kemudian ditampilkan di dalam element HTML dengan id "demo".
Jika anda menjalankan kode ini di dalam sebuah web browser, tombol akan ditampilkan di halaman. Ketika tombol diklik, properti-properti dari objek "mobil" akan ditampilkan di halaman.
Itulah contoh penggunaan for in loop dalam JavaScript dalam sebuah web browser. Anda dapat menyesuaikan kode ini dengan kebutuhan aplikasi Anda dan menambahkan logika lainnya untuk meningkatkan interaksi dengan objek yang diiterasi.
for each in
JavaScript juga memiliki fitur lain yang disebut "forEach()" yang dapat digunakan untuk mengiterasi elemen dalam sebuah array. ForEach() adalah sebuah method yang dapat digunakan pada sebuah array dan memiliki callback function yang akan dijalankan untuk setiap elemen dalam array.
Contoh:
var buah = ["Apel", "Mangga", "Anggur"];
buah.forEach(function(item) {
console.log(item);
});
Pada contoh di atas, forEach() akan mengiterasi setiap elemen dari array "buah" dan menampilkan elemen tersebut di console.
Anda juga dapat menggunakan arrow function dalam forEach
ForEach() juga dapat menerima dua argument lain yaitu index dan array itu sendiri,
buah.forEach(function(item, index, array) {
console.log(item, index);
});
Itulah penjelasan singkat mengenai forEach() dalam JavaScript. ForEach() sangat berguna dalam mengiterasi elemen-elemen dari sebuah array dan digunakan untuk melakukan tindakan pada setiap elemen dalam array.
