Untuk apa di javascript?

Contoh di bawah ini menunjukkan baris pengkodean yang serupa tetapi ditulis berulang kali dalam beberapa baris

text += cars[0] + "
";
text += cars[1] + "
";
text += cars[2] + "
";
text += cars[3] + "
";
text += cars[4] + "
";
text += cars[5] + "
";

Contoh di atas dapat disederhanakan dengan mengulang seperti pada contoh di bawah ini

var i;
for (i = 0; i < cars.length; i++) {
  text += cars[i] + "
";
}

Referensi Lingkaran JavaScript

Menulis Untuk Loops

Format penulisan for loop adalah seperti di bawah ini

for (statement 1; statement 2; statement 3) {
  // code block to be executed
}

Pernyataan 1 (perintah 1) dijalankan sekali saat perulangan dimulai. Pernyataan 2 (perintah 2) memeriksa kondisi yang menentukan apakah perulangan dilanjutkan atau dihentikan. Pernyataan 3 (perintah 3) dijalankan pada setiap loop. Di dalam loop for terdapat sekelompok perintah (blok kode) yang akan dieksekusi berulang kali oleh loop tersebut

for (i = 0; i < 5; i++) {
  text += "The number is " + i + "
";
}

Lihatlah contoh di atas. Perintah 1 (i = 0) memberikan nilai 0 pada variabel i, hanya dieksekusi sekali saat perulangan dimulai. Perintah 2 (i < 5) mengecek nilai i, jika i lebih kecil dari 5 maka perulangan dilanjutkan, jika i lebih besar atau sama dengan 5 maka perulangan dihentikan. Perintah 3 (i++) dijalankan setiap kali loop dijalankan

Pesan 1

Perintah 1 biasanya digunakan untuk inisialisasi variabel yang diperlukan dalam loop. Pada perintah 1 kita dapat menginisialisasi banyak variabel sekaligus dipisahkan dengan koma

for (i = 0, len = cars.length, text = ""; i < len; i++) {
  text += cars[i] + "
";
}

Perintah 1 tidak wajib, bersifat opsional dan dapat dihilangkan

var i = 2;
var len = cars.length;
var text = "";
for (; i < len; i++) {
  text += cars[i] + "
";
}

Pesan 2

Perintah 2 memeriksa kondisi untuk menentukan apakah perulangan dilanjutkan atau tidak. Jika perintah 2 menghasilkan nilai boolean true maka perulangan dilanjutkan. Ketika perintah 2 menghasilkan nilai boolean false maka perulangan dihentikan. Perintah 2 bersifat opsional dan dapat dihilangkan. Jika perintah 2 tidak diberikan maka loop akan dieksekusi selamanya

Pesan 3

Perintah 3 biasanya digunakan untuk melakukan operasi penjumlahan atau pengurangan pada suatu variabel. Perintah 3 juga bisa dihilangkan (sifatnya opsional) ketika proses penjumlahan atau pengurangan dilakukan secara looping

var i = 0;
var len = cars.length;
for (; i < len; ) {
  text += cars[i] + "
";
  i++;
}

Untuk dalam lingkaran

For in loop adalah khusus untuk pengulangan untuk objek. Iterasi akan dieksekusi untuk setiap properti di objek

var person = {fname:"John", lname:"Doe", age:25};

var text = "";
var x;
for (x in person) {
  text += person[x];
}

Untuk putaran

A for loop adalah loop for khusus untuk array. Iterasi akan dieksekusi untuk setiap elemen dalam array

var cars = ["BMW", "Volvo", "Mini"];
var x;

for (x of cars) {
  document.write(x + "
");
}

For of loop juga dapat digunakan pada string. Iterasi akan dieksekusi untuk setiap karakter dalam string

Loop atau pengulangan dalam javascript digunakan untuk melakukan tugas berulang berdasarkan suatu kondisi. Loop umumnya tersedia di semua bahasa pemrograman, meskipun implementasi dan sintaksnya berbeda

Syarat bahasa pemrograman adalah mampu menangani proses secara dinamis, termasuk perulangan atau loop pada javascript untuk tujuan pengulangan instruksi sampai kondisi tertentu terpenuhi, kemudian perulangan berhenti

Misalnya kita ingin menampilkan angka 1 sampai 100, betapa melelahkannya jika kita harus mengetikkan angka 1 sampai 100 secara manual. Di sinilah pengulangan dapat mempersingkat waktu penulisan angka

Jenis rekursif dalam javascript

Ada beberapa jenis perulangan atau loop pada javascript yang bisa digunakan tergantung kebutuhan data yang ingin kita proses. Proses perulangan atau loop ini memudahkan kita untuk membuat daftar, atau perhitungan yang dinamis tanpa harus menulis ulang kode secara manual

• Untuk
• Ketika
• Lakukan Sementara
• untuk setiap

Berikut ini penulis menjelaskan loop atau sintak loop pada javascript

Ulangi dengan For

Berikut adalah pseudo-code for loop

for([inisialisasi]; [kondisi]; [eksekusi iterasi]) {
     // blok kode
}
Code language: JavaScript (javascript)

• Inisialisasi adalah pertama kali kita mendeklarasikan nilai awal, dimana nilai awal akan berubah selama kondisi tidak terpenuhi
• Kondisi berfungsi untuk mengecek perubahan yang terjadi setiap kali eksekusi iterasi loop terjadi dengan menggunakan operator pembanding
• Iterasi eksekusi proses akhir setiap kali terjadi iterasi eksekusi, biasanya digunakan untuk proses penambahan (increment) atau pengurangan (decrement)

Contoh kode for loop, dimana kita akan menampilkan angka 1 sampai 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 di atas, saat kita lihat di browser console pasti keluar angka 1 sampai 10

Bagaimana proses itu bisa terjadi?

Selain untuk mengolah data numerik, for juga dapat digunakan untuk mengolah data array, seperti contoh kode sederhana di bawah 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 outputnya seperti pada gambar di bawah ini

Pertanyaannya adalah, mengapa variabel i dimulai dengan angka 0? . hal ini tidak berlaku untuk inisialisasi index manual.

Untuk Dalam lingkaran

Masih ada cara lain yang dapat kita manfaatkan dari for loop, salah satunya adalah mengolah data object dengan menggunakan For In. Berikut adalah 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)

Hasil…

Dari sini kita dapat memahami penggunaan perulangan atau perulangan pada javascript yang tentunya sangat mempermudah dan mempersingkat penulisan kode program dalam mengolah data.

Perulangan dengan while

Selain for juga terdapat operasi while for atau pengulangan pada javascript, pada prakteknya penggunaan while harus hati-hati, karena tidak ada syarat wajib dalam menentukan inisialisasi seperti pada For

while(kondisi) {
     // blok kode
}
Code language: JavaScript (javascript)

Dalam fungsinya, while hanya menyediakan pilihan kondisi, tidak seperti yang membutuhkan pendeskripsian kebutuhan terlebih dahulu. Contoh kode menggunakan 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 10, perhatikan bagian increment++, anda diharuskan untuk melakukan penjumlahan atau pengurangan setiap kali eksekusi terakhir dilakukan, tujuannya adalah untuk melakukan pengecekan terhadap perubahan nilai variabel. Mengapa demikian? . crash karna proses yang tidak ada ujungnya.

Perulangan dengan do while

Perbedaan mendasar antara while dan do while adalah eksekusi proses, di mana do while mengeksekusi blok kode terlebih dahulu, kemudian memeriksa kondisi di akhir. Lihatlah contoh kode di bawah 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 pada aturan do, setelah proses selesai akan dilakukan pengecekan sementara. Sama seperti while biasa, harus ada perubahan variabel karena jika tidak ada yang dicentang, maka loop tidak akan pernah berhenti dan komputer akan crash

Perulangan dengan forEach

Menurut penulis, iterasi yang paling aman untuk mengolah data array adalah dengan menggunakan forEach, karena proses indexing dilakukan secara otomatis tanpa perlu menentukan key pada iterasi. Misalnya

<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)

Cuplikan kode diatas akan menampilkan daftar data pada array yang telah dideklarasikan, kemudian jika kita ingin melihat key pada nilai pada array kita dapat menambahkan variabel setelah variabel value, 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 seperti gambar di bawah ini...

Kesimpulannya dari berbagai macam cara perulangan atau perulangan pada javascript silahkan gunakan sesuai dengan kebutuhan anda, karena apapun jenisnya jika tidak sesuai dengan hasil tujuan kita pasti akan ada masalah atau kesulitan nantinya.

Untuk apa dalam JavaScript?

Apa yang dimaksud dengan perulangan for?

Bagaimana cara kerja for loop?

Bagaimana cara membuat fungsi dalam JavaScript?