Loop atau perulangan pada javascript digunakan untuk melakukan tugas berulang berdasarkan suatu kondisi. Loop atau perulang pada umumnya tersedia pada semua bahasa pemrograman meskipun implementasi dan sintaks berbeda-beda.
Syarat bahasa pemrograman adalah mampu menangani proses-proses secara dinamis, termasuk pada loop atau perulang pada javascript bertujuan untuk mengulangi instruksi hingga pada kondisi tertentu terpenuhi maka perulangan berhenti.
Sebagai contoh kita ingin menampilkan angka 1 sampai 100, betapa melelahkan jika kita harus mengetik manual angka 1 sampai 100. Disinilah perulangan dapat mempersingkat waktu penulisan angka-angka tersebut.
Jenis-jenis perulang pada javascript
Ada beberapa jenis loop atau perulang pada javascript yang bisa digunakan tergantung pada kebutuhan data yang ingin kita olah. Proses loop atau perulang ini memudahkan kita untuk membuat sebuah daftar, atau perhitungan secara dinamis tanpa perlu menulis kode berulang secara manual.
- For
- While
- Do While
- forEach
Berikut ini penulis jelaskan beserta sintaks loop atau perulang pada javascript.
Perulang dengan For
Berikut ini pseudo-code perulang for.
for([inisialisasi]; [kondisi]; [eksekusi iterasi]) {
// blok kode
}Code language: JavaScript (javascript)- Inisialisasi adalah saat pertama kali kita mendeklarasi sebuah nilai awal, dimana nilai awal akan berubah selama belum memenuhi syarat kondisi.
- Kondisi berfungsi untuk mengecek perubahan yang terjadi setiap kali terjadi eksekusi iterasi perulangan dengan menggunakan operator perbandingan.
- Eksekusi Iterasi proses akhir setiap kali terjadi eksekusi iterasi, biasanya digunakan untuk proses penambahan (increment) atau pengurangan (decrement).
Contoh kode perulangan for, dimana kita akan menampilkan angka 1 sampai dengan 10 tanpa harus mengetik secara manual.
<html>
<head>
<script type="text/javascript">
for(var i = 1; i <= 10; i++) {
console.log(i);
}
</script>
</head>
</html>Code language: HTML, XML (xml)Dari contoh kode diatas apabila kita melihat pada console browser maka harusnya keluar angka 1 sampai dengan 10.
Bagaimana proses tersebut bisa terjadi? perhatikan pada awal inisialisasi dimana penulis memberikan nilai 1 pada variable i dengan kondisi selama i kurang dari sama dengan 10 proses eksekusi iterasi (i++) akan terus berjalan, selama proses iterasi berjalan maka variable i nilainya akan tergantikan dengan nilai baru setelah eksekusi iterasi sampai pada akhirnya kondisi terpenuhi.
Selain mengolah data angka, for juga bisa kita manfaatkan untuk mengolah data array, sebagai contoh kode sederhana dibawah ini.
<html>
<head>
<script type="text/javascript">
var arr = ['Jeruk', 'Mangga', 'Apel'];
for(var i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
</script>
</head>
</html>Code language: HTML, XML (xml)Contoh output seperti gambar dibawah ini.
Pertanyaannya, mengapa variable i dimulai dengan angka 0? perlu kita ingat, bahwa index array selalu dimulai dari 0, hal ini tidak berlaku untuk inisialisasi index manual.
Perulangan For In
Masih ada cara lain yang bisa kita manfaatkan dari perulang for, salah satunya adalah mengolah data object dengan menggunakan For In. Berikut ini contoh penulisan kode For In.
<html>
<head>
<script type="text/javascript">
var gunung = {
a: 'Rinjani',
b: 'Bromo',
c: 'Semeru'
};
for(var key in gunung) {
console.log('Nama gunung ' + key + ' adalah ' + gunung[key]);
}
</script>
</head>
</html>Code language: HTML, XML (xml)Hasilnya…
Dari sini kita bisa pahami penggunaan loop atau perulang pada javascript tentunya sangat mempermudah dan mempersingkat penulisan kode program dalam mengolah data.
Perulangan dengan while
Selain for ada juga while untuk operasi loop atau perulangan pada javascript, dalam prakteknya menggunakan while harus dengan teliti, karena tidak ada syarat wajib pada saat menentukan inisialisasi seperti pada For.
while(kondisi) {
// blok kode
}Code language: JavaScript (javascript)Pada fungsinya, while hanya memberikan opsi kondisi, tidak seperti for mengharuskan mendeskripsikan kebutuhan terlebih dahulu. Contoh kode penggunaan while.
<html>
<head>
<script type="text/javascript">
var increment = 1;
while(increment <= 10) {
console.log(increment);
increment++;
}
</script>
</head>
</html>Code language: HTML, XML (xml)Kode diatas menampilkan console 1 sampai dengan 10, perhatikan pada bagian increment++, anda diwajibkan melakukan penambahan atau pengurangan setiap kali eksekusi terkahir dijalankan, gunanya untuk melakukan pengecekan pada perubahan nilai variabel. Kenapa demikian? jika tidak menambahkan penambahan atau pengurangan sesuai dengan kebutuhan maka proses perulangan tidak akan pernah berhenti dan komputer anda akan crash karna proses yang tidak ada ujungnya.
Perulangan dengan do while
Perbedaan mendasar antara while dengan do while adalah proses eksekusinya, dimana do while mengeksekusi blok kode terlebih dahulu, lalu melakukan pengecekan kondisi di akhir. Perhatikan contoh kode dibawah ini.
<html>
<head>
<script type="text/javascript">
var increment = 1;
do {
console.log(increment)
increment++;
} while(increment <= 10);
</script>
</head>
</html>Code language: HTML, XML (xml)Kode akan dieksekusi terlebih dahulu didalam kurawal do, setelah proses yang terjadi selesai maka akan dilakukan pengecekan di dalam while. Sama seperti while biasa, didalam variable harus terjadi perubahan karena jika tidak maka tidak ada yang di cek, lalu perulangan tidak akan pernah berhenti dan komputer akan crash.
Perulangan dengan forEach
Perulangan yang paling aman untuk mengolah data array menurut penulis adalah dengan menggunakan forEach, karena proses indexing secara otomatis tanpa perlu menentukan key didalam iterasi. Contohnya.
<html>
<head>
<script type="text/javascript">
var arr = ['Api', 'Air', 'Tanah', 'Udara'];
arr.forEach(function(nilai) {
console.log(nilai);
});
</script>
</head>
</html>Code language: HTML, XML (xml)Penggalan kode diatas akan menampilkan daftar data yang ada didalam array yang sudah di deklarasikan, lalu jika kita ingin melihat key pada nilai-nilai di array tersebut bisa menambahkan satu variable setelah variable nilai, seperti kode dibawah ini.
<html>
<head>
<script type="text/javascript">
var arr = ['Api', 'Air', 'Tanah', 'Udara'];
arr.forEach(function(elemen, kunci) {
console.log('Element bumi pada posisi ' + kunci + ' adalah ' + elemen);
});
</script>
</head>
</html>Code language: HTML, XML (xml)Maka hasilnya akan menjadi seperti gambar dibawah ini…
Kesimpulannya dari berbagai macam cara melakukan loop atau perulangan pada javascript silahkan anda gunakan sesuai dengan kebutuhan, karena apapun jenisnya kalau tidak sesuai dengan hasil dari tujuan kita maka tentunya akan ada masalah-masalah atau kesulitan nantinya.
ubay