JavaScript | BAB 4 Percabangan dan Pengulangan JS

Definisi

Percabangan adalah struktur pemrograman yang memungkinkan eksekusi kode berbeda berdasarkan kondisi yang diberikan. Dengan percabangan, program dapat membuat keputusan dan menjalankan blok kode yang berbeda berdasarkan hasil dari kondisi yang dievaluasi sebagai benar (true) atau salah (false).

Kegunaan
Percabangan digunakan untuk:

• Mengambil keputusan berdasarkan kondisi tertentu.
• Mengontrol aliran program sehingga dapat berperilaku berbeda dalam situasi yang berbeda.
• Menghindari eksekusi kode yang tidak diperlukan.

Jenis Percabangan di JavaScript

1. if Statement
   

   If statement digunakan untuk menjalankan blok kode jika kondisi tertentu terpenuhi.

   let nilai = prompt ("masukan nilai");
   if (nilai >= 75) {
     document.write("Selamat, Anda lulus!");
   }

    
   if (kondisi) {
     // kode yang dijalankan jika kondisi benar
   }
       

   
   
2. if...else Statement

   If...Else statement memungkinkan kita untuk menjalankan satu blok kode jika kondisi benar, dan blok kode lain jika kondisi salah.

   let nilai = 65;
   if (nilai >= 75) {
     console.log("Selamat, Anda lulus!");
   } else {
     console.log("Maaf, Anda tidak lulus.");
   }

    
   if (kondisi) {
     // kode yang dijalankan jika kondisi benar
   } else {
     // kode yang dijalankan jika kondisi salah
   }
         

   
   
3. if...else if Statement

   Untuk memeriksa beberapa kondisi, kita dapat menggunakan If...Else If...Else.

   let nilai = 65;
   if (nilai >= 90) {
     console.log("Nilai Anda A.");
   } else if (nilai >= 75) {
     console.log("Nilai Anda B.");
   } else {
     console.log("Nilai Anda C.");
   }

    
   if (kondisi1) {
     // kode jika kondisi1 benar
   } else if (kondisi2) {
     // kode jika kondisi2 benar
   } else {
     // kode jika semua kondisi di atas salah
   }
       

   
   
4. switch Statement

   let grade = 'B';
   switch (grade) {
     case 'A':
       console.log("Nilai Anda sangat baik!");
       break;
     case 'B':
       console.log("Nilai Anda baik.");
       break;
     case 'C':
       console.log("Nilai Anda cukup.");
       break;
     default:
       console.log("Nilai Anda tidak terdaftar.");
   }
       

    
   switch(ekspresi) {
     case nilai1:
       // kode jika ekspresi sama dengan nilai1
       break;
     case nilai2:
       // kode jika ekspresi sama dengan nilai2
       break;
     default:
       // kode jika tidak ada case yang cocok
   }
         

   
   

Studi Kasus

sebuah program untuk menentukan kategori umur berdasarkan input umur.

let umur = prompt ("masukan nilai umur");

if (umur < 13) {
  alert ("Anda adalah seorang anak-anak.");
} else if (umur >= 13 && umur < 20) {
  alert ("Anda adalah seorang remaja.");
} else if (umur >= 20 && umur < 65) {
  alert("Anda adalah seorang dewasa.");
} else {
  alert("Anda adalah seorang lansia.");
}

Definisi
Perulangan adalah struktur pemrograman yang memungkinkan eksekusi blok kode berulang kali selama kondisi tertentu terpenuhi. Perulangan sangat berguna untuk tugas-tugas yang membutuhkan eksekusi berulang, seperti iterasi melalui elemen-elemen array atau pengulangan perhitungan tertentu.

Kegunaan
Perulangan digunakan untuk:

• Melakukan tugas berulang dengan jumlah iterasi yang diketahui atau tidak diketahui.
• Mengolah data dalam struktur seperti array atau objek.
• Mengotomatisasi pekerjaan yang bersifat repetitif.

Jenis Perulangan di JavaScript

Perulangan adalah konsep penting dalam pemrograman yang memungkinkan kita untuk menjalankan blok kode berulang kali. JavaScript menyediakan beberapa jenis perulangan:

1. for Loop

   For loop digunakan ketika kita tahu berapa kali kita ingin menjalankan blok kode.

   for (let i = 0; i < 5; i++) {
     console.log("Angka ke-" + i);
   }
   

   for (inisialisasi; kondisi; perubahan) {
     // kode yang akan diulang
   }

2. while Loop

   While loop menjalankan blok kode selama kondisi tertentu bernilai true

   let i = 0;
   while (i < 3) { // menampilkan 0, lalu 1, lalu 2
     alert( i );
     i++;
   }

   while (kondisi) {
     // kode yang akan diulang
   }

3. do...while Loop

   Do...While loop mirip dengan while loop, tetapi selalu menjalankan blok kode setidaknya satu kali sebelum memeriksa kondisi.

   let i = 0;
   do {
     alert( i );
     i++;
   } while (i < 5);

   do {
     // kode yang akan diulang
   } while (kondisi);

4. for...of Loop

   For...of loop digunakan untuk mengiterasi elemen-elemen dari objek yang dapat diiterasi (seperti array, string, dll.).

   let arr = [10, 20, 30];
   for (let nilai of arr) {
     console.log(nilai);
   }
   

   for (let variabel of objekIterable) {
     // kode yang akan diulang
   }

5. for...in Loop

   For...in loop digunakan untuk mengiterasi properti-properti yang dapat dienumerasi dari sebuah objek.

   let obj = {a: 1, b: 2, c: 3};
   for (let key in obj) {
     console.log(key + ": " + obj[key]);
   }

   for (let properti in objek) {
     // kode yang akan diulang
   }

Studi Kasus

Berikut adalah beberapa studi kasus umum yang sering ditemui saat menggunakan perulangan dalam JavaScript:

1. Memproses Array
   Kasus: Menghitung total nilai dalam array

   const scores = [85, 90, 78, 92, 88];
   let total = 0;
   
   for (let i = 0; i < scores.length; i++) {
       total += scores[i];
   }
   
   console.log("Total nilai:", total);
   

2. Mencari Elemen dalam Array
   Kasus: Mencari nilai tertinggi dalam array

   const numbers = [23, 54, 12, 87, 45, 67];
   let max = numbers[0];
   
   for (let number of numbers) {
       if (number > max) {
           max = number;
       }
   }
   
   console.log("Nilai tertinggi:", max);
   

3. Manipulasi DOM
   Kasus: Mengubah warna semua paragraf dalam dokumen

   const paragraphs = document.getElementsByTagName('p');
   
   for (let i = 0; i < paragraphs.length; i++) {
       paragraphs[i].style.color = 'blue';
   }
   

4. Mengiterasi Objek
   Kasus: Menampilkan semua properti dan nilai dari sebuah objek

   const person = {
       name: 'John Doe',
       age: 30,
       job: 'Developer',
       city: 'New York'
   };
   
   for (let key in person) {
       console.log(`${key}: ${person[key]}`);
   }
   

5. Pembuatan Pola
   Kasus: Membuat pola segitiga bintang

   let pattern = '';
   
   for (let i = 1; i <= 5; i++) {
       for (let j = 1; j <= i; j++) {
           pattern += '* ';
       }
       pattern += '\n';
   }
   
   console.log(pattern);
   

6. Pemrosesan String
   Kasus: Menghitung jumlah vokal dalam sebuah string

   const str = "Hello, how are you today?";
   const vowels = ['a', 'e', 'i', 'o', 'u'];
   let count = 0;
   
   for (let char of str.toLowerCase()) {
       if (vowels.includes(char)) {
           count++;
       }
   }
   
   console.log("Jumlah vokal:", count);
   

7. Penggunaan while untuk Input Validasi
   Kasus: Meminta input dari user sampai input valid

   let input;
   
   while (true) {
       input = prompt("Masukkan angka antara 1-10:");
       if (input >= 1 && input <= 10) {
           break;
       }
       alert("Input tidak valid. Coba lagi.");
   }
   
   console.log("Input valid:", input);