Belajar Loop Atau Perulangan Pada JavaScript

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.

perulangan pada javascript

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.

perulangan pada javascript for array

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…

perulangan pada javascript for in

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…

perulangan pada javascript foreach

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.

5 Komentar

ubay

ubay

https://ubay37.blogspot.com/ Jangan Lupa kunjungi blog saya ya teman teman
Balas #1996
dinda

dinda

sangat berguna sekali artikelnya terimah kasih banyak atas infonya,semoga semakin berkembang
Balas #1998
Aris Munandar

Aris Munandar

@dinda
Sama-sama, semoga bermanfaat.
Balas #2000
Adi

Adi

mau tanya mas, kalau saya ingin mendapatkan nilai terakhir for-loop yang sudah ditentukan jumlah maksimalnya tapi terkadang ada data yang tidak mencapai nilai maksimalnya. bagaimana cara mendapatkan nilainya?
Balas #2224
Aris Munandar

Aris Munandar

@Adi
ada contoh kodenya?
Balas #2226
Terima kasih telah memilih untuk meninggalkan komentar. Harap diingat bahwa semua komentar dimoderasi sesuai dengan kebijakan, dan informasi anda TIDAK akan dipublikasikan. Harap JANGAN gunakan kata kunci di kolom nama. Mari kita buat diskusi yang menarik dan bermakna.

Tinggalkan komentar

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.