Hari 12: JavaScript Control Flow – Conditional Statements dan Loops

by

Bagaimana Program Bisa Membuat Keputusan? Hari Ini Kita Akan Membongkar Logika Pemrograman dengan Struktur Kontrol dalam JavaScript!

JavaScript Control Flow - Conditional Statements dan Loops

Keywords: JavaScript control flow, conditional statements, JavaScript loops, if else, for loop

Setelah mempelajari dasar-dasar JavaScript seperti variabel, tipe data, dan operator, sekarang saatnya melangkah ke level berikutnya. Program yang baik harus bisa membuat keputusan dan melakukan pengulangan tugas secara efisien. Hari ini kita akan membongkar logika pemrograman dengan struktur kontrol dalam JavaScript!

Mengapa Control Flow Penting dalam Pemrograman?

Control flow adalah urutan eksekusi instruksi dalam program. Tanpa control flow, program akan berjalan secara linear dari atas ke bawah tanpa kemampuan untuk membuat keputusan atau mengulang tugas. Dengan control flow, Anda dapat:

  • Membuat program yang responsif terhadap kondisi berbeda
  • Mengotomatisasi pengulangan tugas yang berulang
  • Membuat alur logika yang kompleks
  • Menghemat waktu dan mengurangi kode duplikat
  • Membangun aplikasi yang dinamis dan interaktif

Menurut survei GitHub, sekitar 90% kode JavaScript menggunakan struktur kontrol dalam implementasinya. Menguasai konsep ini adalah langkah krusial untuk menjadi developer yang kompeten.

Conditional Statements: Membuat Keputusan dalam Program

Conditional statements memungkinkan program mengeksekusi kode tertentu berdasarkan kondisi yang diberikan. JavaScript menyediakan beberapa cara untuk mengimplementasikan conditional statements.

1. If Statement

if statement mengeksekusi kode jika kondisi bernilai true.

let umur = 18;

if (umur >= 18) {
    console.log("Anda sudah dewasa.");
}

2. If-Else Statement

if-else statement mengeksekusi kode jika kondisi true, dan kode alternatif jika kondisi false.

let umur = 16;

if (umur >= 18) {
    console.log("Anda sudah dewasa.");
} else {
    console.log("Anda masih di bawah umur.");
}

3. If-Else If-Else Statement

Untuk menangani multiple kondisi:

let nilai = 75;

if (nilai >= 90) {
    console.log("Grade A");
} else if (nilai >= 80) {
    console.log("Grade B");
} else if (nilai >= 70) {
    console.log("Grade C");
} else {
    console.log("Grade D");
}

4. Switch Statement

switch adalah alternatif dari if-else if-else yang lebih bersih untuk multiple kondisi:

let hari = "Senin";

switch (hari) {
    case "Senin":
        console.log("Hari pertama kerja");
        break;
    case "Selasa":
    case "Rabu":
    case "Kamis":
        console.log("Hari biasa");
        break;
    case "Jumat":
        console.log("Hari terakhir kerja");
        break;
    case "Sabtu":
    case "Minggu":
        console.log("Akhir pekan");
        break;
    default:
        console.log("Hari tidak valid");
}

5. Ternary Operator

Cara singkat untuk menulis if-else:

let umur = 18;
let status = (umur >= 18) ? "Dewasa" : "Di bawah umur";
console.log(status); // "Dewasa"

Loops: Pengulangan Eksekusi Kode

Loops memungkinkan program mengeksekusi blok kode berulang kali. JavaScript menyediakan beberapa jenis loops.

1. For Loop

for loop ideal ketika Anda tahu berapa banyak pengulangan yang dibutuhkan:

// Struktur dasar for loop
for (inisialisasi; kondisi; increment/decrement) {
    // Kode yang diulang
}

// Contoh: mencetak angka 1-5
for (let i = 1; i <= 5; i++) {
    console.log(i);
}

2. While Loop

while loop mengeksekusi kode selama kondisi bernilai true:

let i = 1;

while (i <= 5) {
    console.log(i);
    i++;
}

3. Do-While Loop

do-while mirip dengan while, tetapi mengeksekusi kode setidaknya satu kali:

let i = 1;

do {
    console.log(i);
    i++;
} while (i <= 5);

4. For-In Loop

for-in loop digunakan untuk mengiterasi properti objek:

const person = {
    nama: "John",
    umur: 30,
    pekerjaan: "Developer"
};

for (let prop in person) {
    console.log(`${prop}: ${person[prop]}`);
}

5. For-Of Loop (ES6)

for-of loop digunakan untuk mengiterasi elemen iterable (array, string, dll):

const fruits = ["Apple", "Banana", "Cherry"];

for (let fruit of fruits) {
    console.log(fruit);
}

Control Flow Lanjutan: Break dan Continue

Break Statement

break menghentikan eksekusi loop atau switch:

for (let i = 1; i <= 10; i++) {
    if (i === 5) {
        break; // Keluar dari loop saat i = 5
    }
    console.log(i); // Mencetak 1, 2, 3, 4
}

Continue Statement

continue melewati iterasi saat ini dan melanjutkan ke iterasi berikutnya:

for (let i = 1; i <= 5; i++) {
    if (i === 3) {
        continue; // Melewati i = 3
    }
    console.log(i); // Mencetak 1, 2, 4, 5
}

Nested Control Flow: Struktur Kontrol Bersarang

Anda dapat menempatkan struktur kontrol di dalam struktur kontrol lain:

// Nested loops
for (let i = 1; i <= 3; i++) {
    for (let j = 1; j <= 3; j++) {
        console.log(`i: ${i}, j: ${j}`);
    }
}

// Nested conditionals
let nilai = 85;
let kehadiran = 90;

if (nilai >= 80) {
    if (kehadiran >= 85) {
        console.log("Lulus dengan predikat sangat baik");
    } else {
        console.log("Lulus dengan predikat baik");
    }
} else {
    console.log("Perlu perbaikan");
}

Praktik Terbaik dalam Menggunakan Control Flow

  1. Pilih struktur kontrol yang tepat:
    • Gunakan if-else untuk kondisi kompleks
    • Gunakan switch untuk multiple kondisi dengan nilai tunggal
    • Gunakan for loop untuk pengulangan dengan jumlah iterasi diketahui
    • Gunakan while loop untuk pengulangan dengan kondisi yang tidak pasti
  2. Hindari nested loops yang terlalu dalam:
    • Nested loops dapat mengurangi performa
    • Batasi hingga 3 level nested jika memungkinkan
  3. Gunakan kurung kurawal {} meskipun untuk satu statement:
    • Meningkatkan keterbacaan
    • Menghindari kesalahan logika
  4. Berikan komentar untuk logika kompleks:
    • Jelaskan tujuan struktur kontrol
    • Jelaskan kondisi yang kompleks
  5. Gunakan variabel yang deskriptif:
    • Nama variabel harus mencerminkan kondisi yang diuji
    • Contoh: isAdult alih-alih x

Contoh Implementasi: Program Menentukan Bilangan Prima

function cekPrima(angka) {
    // Bilangan kurang dari 2 bukan prima
    if (angka < 2) {
        return false;
    }
    
    // Cek pembagi dari 2 hingga akar angka
    for (let i = 2; i <= Math.sqrt(angka); i++) {
        if (angka % i === 0) {
            return false; // Ditemukan pembagi, bukan prima
        }
    }
    
    return true; // Bilangan prima
}

// Mencetak bilangan prima dari 1-100
console.log("Bilangan prima dari 1-100:");
for (let i = 1; i <= 100; i++) {
    if (cekPrima(i)) {
        console.log(i);
    }
}

Contoh Implementasi: Kalkulator Sederhana

// Fungsi kalkulator
function kalkulator(angka1, angka2, operator) {
    let hasil;
    
    switch (operator) {
        case '+':
            hasil = angka1 + angka2;
            break;
        case '-':
            hasil = angka1 - angka2;
            break;
        case '*':
            hasil = angka1 * angka2;
            break;
        case '/':
            if (angka2 !== 0) {
                hasil = angka1 / angka2;
            } else {
                return "Error: Pembagian dengan nol";
            }
            break;
        default:
            return "Operator tidak valid";
    }
    
    return hasil;
}

// Contoh penggunaan
console.log(kalkulator(10, 5, '+')); // 15
console.log(kalkulator(10, 5, '-')); // 5
console.log(kalkulator(10, 5, '*')); // 50
console.log(kalkulator(10, 5, '/')); // 2
console.log(kalkulator(10, 0, '/')); // Error: Pembagian dengan nol
console.log(kalkulator(10, 5, '%')); // Operator tidak valid

Debugging Control Flow

Saat mengalami masalah dengan control flow:

  1. Gunakan console.log() untuk melihat nilai variabel dan alur eksekusi
  2. Gunakan browser debugger untuk menelusuri kode baris per baris
  3. Periksa kondisi dengan hati-hati, terutama untuk tipe data
  4. Uji edge cases seperti nilai nol, negatif, atau input yang tidak valid

Kesimpulan

Control flow adalah jantung dari logika pemrograman. Dengan menguasai conditional statements dan loops, Anda telah membuka kemampuan untuk membuat program yang dinamis dan responsif. Hari ini Anda telah mempelajari:

  • Cara membuat keputusan dengan if-else dan switch
  • Berbagai jenis loops untuk pengulangan tugas
  • Cara mengontrol alur eksekusi dengan break dan continue
  • Praktik terbaik dalam penulisan control flow
  • Implementasi nyata dengan contoh program

Konsep ini akan menjadi fondasi untuk topik lebih lanjut seperti functions, array manipulation, dan DOM manipulation. Teruslah berlatih dengan mencoba berbagai skenario untuk memperkuat pemahaman Anda.

#JavaScript #ControlFlow #ProgrammingLogic #JSIndonesia

Bagikan artikel ini:

FacebookTikTokXInstagramWhatsApp

Leave a Comment