Frontend : JAVASCRIPT Bagian 9 – Perulangan (Looping)

Bagaimana jika terdapat pekerjaan yang diulang ulang tetapi di coding dengan manual? Bagaimana jika pekerjaan yang diulang berjumlah 100 kali. Contoh teman-teman tidak mengerjakan PR disuruh tulis “Maaf saya tidak akan mengulangi lagi” dengan jumlah 100 kali. Jika di dunia pemrograman, cara manual ini amat sangat tidak efisien dan boros waktu. Terus bagaimana cara mengatasinya? Jawabannya adalah dengan cara Looping(Perulangan). Looping adalah sebuah perintah program yang dilakukan untuk mengulang sebuah perintah yang sudah ditentukan nominalnya. Salah satu manfaat dari Perulangan, yaitu Efisien dan menghemat waktu. Berikut terdapat 4 Looping yang bisa teman-teman gunakan :


1. For

Perulangan for digunakan untuk perulangan yang dapat ditentukan berapa kali perulangan terjadi.

<!DOCTYPE html>
<html>
<head>
	<link rel="icon" type="image/x-icon" href="img/pbs2.png">
	<title>Frontend : JAVASCRIPT Bagian 9 - Perulangan (Looping)</title>
</head>
<body>
<h4>JAVASCRIPT Bagian 9 - Perulangan (Looping)</h4>

<!-- Kode Javascript -->
<script type="text/javascript">
	for(x=0; x<10; x++)
	{
		console.log('Maaf saya tidak akan mengulangi lagi')
	}
</script>
</body>
</html>


Penjelasan :

1. Baris 12 – 15, kita sedang membuat perulangan for

2. Baris 12, artinya variabel x bernilai 0, jika variabel x lebih kecil dari 10 maka Baris 14 akan dijalankan


Hasil :


2. While

Perulangan jenis ini sama dengan perulangan for. Teman-teman bebas mau menggunakan perulangan For atau While. Perbedaan dari perulangan For dengan While ada di jumlah perulangan. Jika for sudah ditetapkan, while berbeda. While jika kondisi terpenuhi, maka akan terus looping tanpa henti (Infinity Loop). Untuk mengatasi intinity loop kita menggunakan increment.


<!DOCTYPE html>
<html>
<head>
	<link rel="icon" type="image/x-icon" href="img/pbs2.png">
	<title>Frontend : JAVASCRIPT Bagian 9 - Perulangan (Looping)</title>
</head>
<body>
<h4>JAVASCRIPT Bagian 9 - Perulangan (Looping)</h4>

<!-- Kode Javascript -->
<script type="text/javascript">
	var x = 1;
	while(x <= 10)
	{
		console.log('Perulangan While dijalankan!');
		x++;
	}
</script>
</body>
</html>


Penjelasan :

1. Baris 12, kita membuat variabel x dengan nilai 1

2. Baris 13 – 17, kita membuat perulangan While

3. Baris 13, artinya jika variabel x lebih kecil atau sama dengan 10, maka perintah Baris 15 akan dijalankan sesuai nominal yang ditetapkan yaitu 10 kali.

4. Baris 16 adalah increment. Jika baris 16 tidak ada. Maka terjadi yang namanya Infinity Loop (Perulangan tanpa batas). Jangan lupa untuk menambahkan increment ya teman-teman.


Hasil :


3. Do While

Sama dengan perulangan While, jika Do While melakukan perulangan terlebih dahulu tanpa memenuhi perulangan While.

<!DOCTYPE html>
<html>
<head>
	<link rel="icon" type="image/x-icon" href="img/pbs2.png">
	<title>Frontend : JAVASCRIPT Bagian 9 - Perulangan (Looping)</title>
</head>
<body>
<h4>JAVASCRIPT Bagian 9 - Perulangan (Looping)</h4>

<!-- Kode Javascript -->
<script type="text/javascript">
	var x = 1;
	do{
		console.log(x);
		x = x+1;
	}
	while(x <= 10);
</script>
</body>
</html>


Penjelasan :

1. Baris 12, kita membuat variabel x dengan nilai 1

2. Baris 13 – 17, kita membuat perulangan do while

3. Baris 13, kita melakukan perulangan terlebih dahulu

4. Baris 17, kita baru membuat percabangan While


Hasil :


4. Foreach

Perulangan terakhir, yaitu Foreach. Perulangan ini biasa digunakan untuk perulangan yang tidak dapat diprediksi berapa kali akan dijalankan. Umumnya perulangan foreach dimanfaatkan untuk menampilkan data dari database.

<!DOCTYPE html>
<html>
<head>
	<link rel="icon" type="image/x-icon" href="img/pbs2.png">
	<title>Frontend : JAVASCRIPT Bagian 9 - Perulangan (Looping)</title>
</head>
<body>
<h4>JAVASCRIPT Bagian 9 - Perulangan (Looping)</h4>

<!-- Kode Javascript -->
<script type="text/javascript">
	var nama = ["Budi","Anto","Danang","Adam"];
	nama.forEach(function(nama){
		console.log(nama);
	});
</script>
</body>
</html>


Penjelasan :

1. Baris 12, kita membuat array yang berisi nama Budi, Anto, Danang, dan Adam

2. Baris 13 – 15, kita melakukan perulangan Foreach terhadap array nama


Hasil :

Leave a Reply

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