Percabangan (Conditional) dalam JavaScript

1. LATAR BELAKANG

Pada hari ini, saya mempelajari materi tentang Percabangan (Conditional) dalam JavaScript. Materi ini merupakan konsep fundamental dalam pemrograman yang memungkinkan program mengambil keputusan berdasarkan kondisi tertentu. Dalam kehidupan sehari-hari, kita selalu membuat keputusan berdasarkan kondisi: "jika hujan, maka bawa payung; jika tidak, pakai topi saja". Konsep yang sama diterapkan dalam pemrograman melalui percabangan.

Sebagai siswa SMK yang sedang mengembangkan kemampuan algoritmik, saya memahami bahwa percabangan adalah jantung dari logika pemrograman. Tanpa kemampuan untuk membuat keputusan berdasarkan kondisi, program hanya bisa menjalankan urutan perintah yang sama terus-menerus tanpa bisa beradaptasi dengan situasi yang berbeda.

2. ALAT DAN BAHAN

2.1 Perangkat Lunak

Visual Studio Code - Text editor dengan IntelliSense untuk JavaScript
Node.js - Untuk menjalankan dan menguji kode JavaScript
Google Chrome - Untuk debugging kode percabangan di browser
GitHub - Untuk menyimpan versi kode dan melacak perkembangan pembelajaran

2.2 Perangkat Keras

Laptop - Dengan environment development yang sudah terkonfigurasi

3. PEMBAHASAN

3.1 Konsep Dasar Percabangan

Pengertian Percabangan:

Percabangan (conditional) adalah struktur kontrol dalam pemrograman yang memungkinkan program untuk mengeksekusi kode yang berbeda berdasarkan kondisi tertentu. Ini seperti persimpangan jalan - berdasarkan rambu/tanda (kondisi), kita memilih jalan yang berbeda.

Analogi Kehidupan Sehari-hari:

Jika hari ini hujan → bawa payung
Jika tidak → pakai topi saja

Dalam pemrograman:

let cuaca = "hujan";

if (cuaca === "hujan") {
    console.log("Bawa payung");
} else {
    console.log("Pakai topi saja");
}

Pentingnya Percabangan dalam Algoritma:

Membuat program lebih cerdas - Bisa beradaptasi dengan situasi berbeda
Validasi input - Memastikan data yang masuk sesuai kriteria
Penanganan error - Menangani skenario yang tidak diharapkan
Alur bisnis kompleks - Mengimplementasikan logika bisnis yang rumit

3.2 Struktur if Statement

Bentuk paling sederhana dari percabangan:

// Sintaks dasar if statement
if (kondisi) {
    // Kode di sini dijalankan jika kondisi BENAR (true)
}

// Contoh praktis: Sistem login sederhana
let passwordInput = "rahasia123";
let passwordBenar = "rahasia123";

if (passwordInput === passwordBenar) {
    console.log("Login berhasil! Selamat datang.");
}

// Contoh lain: Cek usia untuk menonton film
let usia = 18;
let batasUsia = 17;

if (usia >= batasUsia) {
    console.log("Anda boleh menonton film ini.");
}

Kondisi dalam if statement:
Kondisi harus menghasilkan nilai boolean (true atau false). JavaScript akan mengkonversi nilai non-boolean menjadi boolean (truthy/falsy).

// Berbagai bentuk kondisi yang valid

// 1. Perbandingan langsung
if (10 > 5) {  // true
    console.log("10 lebih besar dari 5");
}

// 2. Variabel boolean
let sudahLogin = true;
if (sudahLogin) {
    console.log("User sudah login");
}

// 3. Hasil fungsi yang mengembalikan boolean
function cekGenap(angka) {
    return angka % 2 === 0;
}

if (cekGenap(10)) {  // true
    console.log("10 adalah bilangan genap");
}

// 4. Truthy/falsy values
let nama = "Ibra";
if (nama) {  // String non-kosong adalah truthy
    console.log("Nama tersedia: " + nama);
}

let jumlah = 0;
if (jumlah) {  // 0 adalah falsy
    console.log("Ini tidak akan ditampilkan");
}

3.3 Struktur if-else Statement

Menambahkan alternatif jika kondisi salah:

// Sintaks if-else
if (kondisi) {
    // Kode jika kondisi BENAR
} else {
    // Kode jika kondisi SALAH
}

// Contoh: Sistem penilaian sederhana
let nilai = 75;

if (nilai >= 70) {
    console.log("Selamat! Anda LULUS.");
} else {
    console.log("Maaf, Anda TIDAK LULUS.");
}

// Contoh: Penentuan diskon
let totalBelanja = 1200000;
let diskon;

if (totalBelanja > 1000000) {
    diskon = totalBelanja * 0.1;  // Diskon 10%
    console.log("Anda dapat diskon 10%: Rp" + diskon);
} else {
    diskon = 0;
    console.log("Maaf, tidak ada diskon untuk pembelian ini.");
}

let totalBayar = totalBelanja - diskon;
console.log("Total yang harus dibayar: Rp" + totalBayar);

3.4 Struktur else-if Statement

Menangani multiple kondisi:

// Sintaks else-if
if (kondisi1) {
    // Kode jika kondisi1 BENAR
} else if (kondisi2) {
    // Kode jika kondisi2 BENAR
} else if (kondisi3) {
    // Kode jika kondisi3 BENAR
} else {
    // Kode jika semua kondisi SALAH
}

// Contoh: Sistem penilaian lengkap
function tentukanGrade(nilai) {
    let grade;
    
    if (nilai >= 90) {
        grade = "A";
    } else if (nilai >= 80) {
        grade = "B";
    } else if (nilai >= 70) {
        grade = "C";
    } else if (nilai >= 60) {
        grade = "D";
    } else {
        grade = "E";
    }
    
    return grade;
}

// Testing berbagai nilai
console.log("Nilai 95: Grade " + tentukanGrade(95));  // A
console.log("Nilai 85: Grade " + tentukanGrade(85));  // B
console.log("Nilai 75: Grade " + tentukanGrade(75));  // C
console.log("Nilai 65: Grade " + tentukanGrade(65));  // D
console.log("Nilai 55: Grade " + tentukanGrade(55));  // E

// Contoh: Sistem tarif parkir berdasarkan jam
function hitungTarifParkir(jam) {
    let tarif;
    
    if (jam <= 1) {
        tarif = 5000;
    } else if (jam <= 3) {
        tarif = 5000 + (jam - 1) * 3000;
    } else if (jam <= 5) {
        tarif = 11000 + (jam - 3) * 2000;
    } else {
        tarif = 15000 + (jam - 5) * 1000;
    }
    
    return tarif;
}

console.log("Parkir 30 menit: Rp" + hitungTarifParkir(0.5));  // 5000
console.log("Parkir 2 jam: Rp" + hitungTarifParkir(2));      // 8000
console.log("Parkir 4 jam: Rp" + hitungTarifParkir(4));      // 13000
console.log("Parkir 6 jam: Rp" + hitungTarifParkir(6));      // 16000

3.5 Nested if Statement

Percabangan di dalam percabangan:

// Contoh: Sistem seleksi beasiswa
function cekKelulusanBeasiswa(nilai, penghasilanOrangTua, aktifOrganisasi) {
    console.log("=== HASIL SELEKSI BEASISWA ===");
    console.log("Nilai akademik: " + nilai);
    console.log("Penghasilan orang tua: Rp" + penghasilanOrangTua);
    console.log("Aktif organisasi: " + (aktifOrganisasi ? "Ya" : "Tidak"));
    
    // Level 1: Cek nilai minimum
    if (nilai >= 80) {
        // Level 2: Cek penghasilan orang tua
        if (penghasilanOrangTua <= 5000000) {
            // Level 3: Cek aktivitas organisasi
            if (aktifOrganisasi) {
                return "SELAMAT! Anda mendapatkan beasiswa penuh.";
            } else {
                return "Anda mendapatkan beasiswa 50% (kurang aktif organisasi).";
            }
        } else {
            return "Maaf, penghasilan orang tua melebihi batas.";
        }
    } else {
        return "Maaf, nilai akademik tidak memenuhi syarat.";
    }
}

// Testing berbagai skenario
console.log("\nSkenario 1 (ideal):");
console.log(cekKelulusanBeasiswa(90, 3000000, true));

console.log("\nSkenario 2 (nilai kurang):");
console.log(cekKelulusanBeasiswa(75, 3000000, true));

console.log("\nSkenario 3 (penghasilan tinggi):");
console.log(cekKelulusanBeasiswa(90, 8000000, true));

console.log("\nSkenario 4 (tidak aktif organisasi):");
console.log(cekKelulusanBeasiswa(90, 3000000, false));

3.6 Operator Logika dalam Percabangan

Menggabungkan multiple kondisi:

// Operator logika: && (AND), || (OR), ! (NOT)

// Contoh: Sistem pendaftaran kursus
function cekKelayakanKursus(usia, pendidikan, pengalaman) {
    // Syarat: usia 18-35 TAHUN DAN (SMA ATAU pengalaman > 1 tahun)
    if (usia >= 18 && usia <= 35) {
        if (pendidikan === "SMA" || pengalaman > 1) {
            return "Anda layak mengikuti kursus ini.";
        } else {
            return "Maaf, pendidikan atau pengalaman tidak memenuhi.";
        }
    } else {
        return "Maaf, usia tidak memenuhi persyaratan.";
    }
}

// Operator NOT (!) untuk membalik kondisi
function cekLoginStatus(isLoggedIn) {
    if (!isLoggedIn) {  // Jika TIDAK login
        console.log("Silakan login terlebih dahulu.");
        // Redirect ke halaman login
    } else {
        console.log("Selamat datang di dashboard!");
    }
}

// Contoh kompleks dengan kombinasi operator
function tentukanDiskon(totalBelanja, isMember, hariIni) {
    let diskon = 0;
    
    // Diskon 15% jika: belanja > 1jt DAN member
    // Atau: belanja > 2jt (walaupun bukan member)
    // Atau: hari spesial (misal: hari ulang tahun toko)
    if ((totalBelanja > 1000000 && isMember) || 
        totalBelanja > 2000000 || 
        hariIni === "ulangtahun") {
        diskon = 0.15;
    } 
    // Diskon 10% jika: belanja > 500rb ATAU member
    else if (totalBelanja > 500000 || isMember) {
        diskon = 0.10;
    }
    // Diskon 5% jika: belanja > 100rb
    else if (totalBelanja > 100000) {
        diskon = 0.05;
    }
    
    return diskon;
}

console.log("Diskon untuk belanja 1.2jt, member: " + (tentukanDiskon(1200000, true, "normal") * 100) + "%");
console.log("Diskon untuk belanja 2.5jt, non-member: " + (tentukanDiskon(2500000, false, "normal") * 100) + "%");
console.log("Diskon untuk belanja 300rb, non-member, hari spesial: " + (tentukanDiskon(300000, false, "ulangtahun") * 100) + "%");

3.7 Switch Case Statement

Alternatif untuk multiple else-if:

// Switch case untuk kondisi diskrit
function tentukanHari(angkaHari) {
    let namaHari;
    
    switch(angkaHari) {
        case 1:
            namaHari = "Minggu";
            break;
        case 2:
            namaHari = "Senin";
            break;
        case 3:
            namaHari = "Selasa";
            break;
        case 4:
            namaHari = "Rabu";
            break;
        case 5:
            namaHari = "Kamis";
            break;
        case 6:
            namaHari = "Jumat";
            break;
        case 7:
            namaHari = "Sabtu";
            break;
        default:
            namaHari = "Hari tidak valid";
    }
    
    return namaHari;
}

console.log("Hari ke-3: " + tentukanHari(3));  // Selasa
console.log("Hari ke-8: " + tentukanHari(8));  // Hari tidak valid

// Switch case dengan multiple cases
function tentukanMusim(bulan) {
    let musim;
    
    switch(bulan) {
        case 12:
        case 1:
        case 2:
            musim = "Musim Dingin";
            break;
        case 3:
        case 4:
        case 5:
            musim = "Musim Semi";
            break;
        case 6:
        case 7:
        case 8:
            musim = "Musim Panas";
            break;
        case 9:
        case 10:
        case 11:
            musim = "Musim Gugur";
            break;
        default:
            musim = "Bulan tidak valid";
    }
    
    return musim;
}

console.log("Bulan 1: " + tentukanMusim(1));  // Musim Dingin
console.log("Bulan 4: " + tentukanMusim(4));  // Musim Semi
console.log("Bulan 7: " + tentukanMusim(7));  // Musim Panas
console.log("Bulan 10: " + tentukanMusim(10)); // Musim Gugur

3.8 Ternary Operator

Percabangan satu baris:

// Sintaks: kondisi ? nilaiJikaTrue : nilaiJikaFalse

// Contoh sederhana
let usia = 18;
let status = usia >= 17 ? "Dewasa" : "Anak-anak";
console.log("Status: " + status);  // Dewasa

// Contoh dengan multiple conditions
let nilai = 85;
let hasil = nilai >= 90 ? "A" :
            nilai >= 80 ? "B" :
            nilai >= 70 ? "C" :
            nilai >= 60 ? "D" : "E";
console.log("Grade: " + hasil);  // B

// Contoh praktis: Set default value
function sapaUser(nama) {
    // Jika nama tidak diberikan, gunakan "Tamu"
    let namaUntukDisapa = nama ? nama : "Tamu";
    return "Halo, " + namaUntukDisapa + "!";
}

console.log(sapaUser("Ibra"));  // Halo, Ibra!
console.log(sapaUser());         // Halo, Tamu!

// Ternary dalam template literal
let saldo = 50000;
let pesan = `Saldo Anda: Rp${saldo}. ${saldo > 100000 ? "Cukup" : "Kurang"}`;
console.log(pesan);  // Saldo Anda: Rp50000. Kurang

3.9 Studi Kasus: Sistem Penilaian Sekolah

// Sistem penilaian lengkap dengan berbagai kondisi
function evaluasiSiswa(nilaiUjian, kehadiran, tugasSelesai) {
    console.log("=== EVALUASI HASIL BELAJAR ===");
    console.log("Nilai ujian: " + nilaiUjian);
    console.log("Persentase kehadiran: " + kehadiran + "%");
    console.log("Tugas selesai: " + tugasSelesai + "/10");
    
    // Validasi input
    if (nilaiUjian < 0 || nilaiUjian > 100) {
        return "ERROR: Nilai ujian tidak valid!";
    }
    
    if (kehadiran < 0 || kehadiran > 100) {
        return "ERROR: Persentase kehadiran tidak valid!";
    }
    
    // Logika evaluasi
    if (kehadiran < 75) {
        return "TIDAK LULUS: Kehadiran kurang dari 75%";
    }
    
    if (tugasSelesai < 7) {
        return "TIDAK LULUS: Tugas yang diselesaikan kurang dari 7";
    }
    
    // Tentukan grade berdasarkan nilai
    let grade;
    if (nilaiUjian >= 90) {
        grade = "A (Sangat Baik)";
    } else if (nilaiUjian >= 80) {
        grade = "B (Baik)";
    } else if (nilaiUjian >= 70) {
        grade = "C (Cukup)";
    } else if (nilaiUjian >= 60) {
        grade = "D (Kurang)";
    } else {
        grade = "E (Gagal)";
    }
    
    // Tentukan status kelulusan
    let status = nilaiUjian >= 70 ? "LULUS" : "TIDAK LULUS";
    
    // Rekomendasi berdasarkan grade
    let rekomendasi;
    if (nilaiUjian >= 90) {
        rekomendasi = "Disarankan untuk mengikuti program akselerasi";
    } else if (nilaiUjian >= 80) {
        rekomendasi = "Pertahankan prestasi Anda";
    } else if (nilaiUjian >= 70) {
        rekomendasi = "Perlu meningkatkan belajar untuk ujian berikutnya";
    } else {
        rekomendasi = "Wajib mengikuti remedial";
    }
    
    // Return hasil lengkap
    return {
        grade: grade,
        status: status,
        rekomendasi: rekomendasi,
        detail: `Nilai: ${nilaiUjian}, Hadir: ${kehadiran}%, Tugas: ${tugasSelesai}/10`
    };
}

// Testing berbagai skenario
console.log("\n--- Skenario 1: Siswa berprestasi ---");
let hasil1 = evaluasiSiswa(95, 90, 9);
console.log(hasil1);

console.log("\n--- Skenario 2: Siswa rata-rata ---");
let hasil2 = evaluasiSiswa(75, 80, 8);
console.log(hasil2);

console.log("\n--- Skenario 3: Siswa bermasalah kehadiran ---");
let hasil3 = evaluasiSiswa(85, 70, 9);
console.log(hasil3);

console.log("\n--- Skenario 4: Input tidak valid ---");
let hasil4 = evaluasiSiswa(120, 90, 9);
console.log(hasil4);

3.10 Best Practices dan Common Mistakes

Best Practices:

// 1. Gunakan early return untuk mengurangi nesting
function prosesPesanan(jumlah, stok) {
    // Cek kondisi error terlebih dahulu
    if (jumlah <= 0) {
        return "ERROR: Jumlah harus lebih dari 0";
    }
    
    if (jumlah > stok) {
        return "ERROR: Stok tidak mencukupi";
    }
    
    // Logika utama (tanpa nesting berlebihan)
    let total = jumlah * 10000;
    let sisaStok = stok - jumlah;
    
    return `Pesanan berhasil. Total: Rp${total}, Sisa stok: ${sisaStok}`;
}

// 2. Gunakan variabel boolean yang deskriptif
let isUserLoggedIn = true;
let hasValidLicense = false;
let canAccessFeature = true;

// 3. Hindari kondisi yang terlalu kompleks
// ❌ JANGAN seperti ini:
if ((age > 18 && hasLicense) || (age > 21 && !hasLicenseButHasPermission)) {
    // terlalu kompleks!
}

// ✅ LEBIH BAIK seperti ini:
let canDrive = (age > 18 && hasLicense);
let canDriveWithPermission = (age > 21 && hasPermission);

if (canDrive || canDriveWithPermission) {
    // lebih mudah dibaca
}

Common Mistakes:

// 1. Menggunakan = (assignment) bukan == atau === (comparison)
let nilai = 85;

// ❌ SALAH
if (nilai = 100) {  // Ini assignment, selalu true!
    console.log("Nilai sempurna!");
}

// ✅ BENAR
if (nilai === 100) {
    console.log("Nilai sempurna!");
}

// 2. Lupa break dalam switch case
let angka = 1;
switch(angka) {
    case 1:
        console.log("Satu");
        // ❌ Lupa break!
    case 2:
        console.log("Dua");
        break;
}
// Output: "Satu" "Dua" (keduanya dijalankan!)

// 3. Kondisi yang selalu true atau selalu false
let x = 10;

// ❌ Kondisi selalu true
if (x > 5 || x < 20) {  // Selalu true untuk x berapapun
    console.log("Ini selalu dijalankan");
}

// ❌ Kondisi selalu false  
if (x > 20 && x < 5) {  // Tidak mungkin true
    console.log("Ini tidak akan pernah dijalankan");
}

3.11 Kendala dan Solusi

Kendala yang Dihadapi:

Awalnya bingung dengan perbedaan antara = (assignment), == (loose equality), dan === (strict equality)
Terkadang membuat kondisi yang terlalu kompleks sehingga sulit dibaca
Lupa menambahkan break dalam switch case statement

Solusi yang Diterapkan:

Membuat cheatsheet perbedaan operator dan menempelkannya di meja
Mengikuti prinsip "early return" untuk mengurangi nesting yang dalam
Selalu menulis komentar untuk menjelaskan logika kondisi yang kompleks
Menggunakan linter (ESLint) di VS Code untuk mendeteksi kesalahan umum

4. KESIMPULAN

Pembelajaran hari ini tentang Percabangan (Conditional) memberikan pemahaman mendalam tentang bagaimana program dapat membuat keputusan berdasarkan kondisi tertentu. Dengan menguasai konsep if, else if, else, switch case, dan ternary operator, saya dapat membuat program yang lebih cerdas dan responsif terhadap berbagai skenario input.

Kunci dari penggunaan percabangan yang efektif adalah:

Memahami kondisi boolean dan konsep truthy/falsy dalam JavaScript
Menggunakan operator logika (&&, ||, !) untuk menggabungkan kondisi
Menghindari nesting yang terlalu dalam dengan teknik early return
Memilih struktur yang tepat antara if-else chain vs switch case

Melalui praktik langsung dengan studi kasus nyata seperti sistem penilaian, seleksi beasiswa, dan logika bisnis lainnya, saya dapat melihat langsung penerapan percabangan dalam skenario dunia nyata. Kemampuan ini sangat penting dalam pengembangan software profesional, di mana program harus dapat menangani berbagai kondisi dan skenario yang berbeda.

5. DAFTAR PUSTAKA

PetaniKode. (2018). Belajar Javascript #7: Memahami 6 Bentuk Percabangan Pada Javascript. https://www.petanikode.com
W3Schools. (n.d.). JavaScript Conditionals. https://www.w3schools.com
JavaScript.com. (n.d.). Modul Pembelajaran JavaScript - Conditionals. https://www.javascript.com
SantriKoding. (2026). Pernyataan IF & ELSE di dalam SavaScript. https://santrikoding.com
LampungDev. (2024). Pernyataan IF ELSE Pada JavaScript. https://javascript.lampungdev.com

Percabangan (Conditional) dalam JavaScript - Perwira Learning Center

1. LATAR BELAKANG

2. ALAT DAN BAHAN

2.1 Perangkat Lunak

2.2 Perangkat Keras

3. PEMBAHASAN

3.1 Konsep Dasar Percabangan

3.2 Struktur if Statement

3.3 Struktur if-else Statement

3.4 Struktur else-if Statement

3.5 Nested if Statement

3.6 Operator Logika dalam Percabangan

3.7 Switch Case Statement

3.8 Ternary Operator

3.9 Studi Kasus: Sistem Penilaian Sekolah

3.10 Best Practices dan Common Mistakes

3.11 Kendala dan Solusi

4. KESIMPULAN

5. DAFTAR PUSTAKA

Diposting oleh Al Zaki Ibra Ramadani

Posting Komentar

0 Komentar

Most Popular

Pengenalan Express.js dan Perannya dalam Backend Development - Perwira Learning Center

Perulangan (Looping) dalam JavaScript - Perwira Learning Center

Tutorial Setup Project Express.js - Pewrira Learning Center

Recent Post

Pengenalan JavaScript untuk Algoritma – Perwira Learning Center

Mengenal Permission dan Ownership File di Linux: Pondasi Keamanan Sistem – Perwira Learning Center

Menguasai chmod: Mengatur Hak Akses File Linux dengan Aman dan Efektif – Perwira Learning Center

Popular Posts

Pengenalan Express.js dan Perannya dalam Backend Development - Perwira Learning Center

Perulangan (Looping) dalam JavaScript - Perwira Learning Center

Tutorial Setup Project Express.js - Pewrira Learning Center

Footer Menu Widget

Contact form

Percabangan (Conditional) dalam JavaScript - Perwira Learning Center

1. LATAR BELAKANG

2. ALAT DAN BAHAN

2.1 Perangkat Lunak

2.2 Perangkat Keras

3. PEMBAHASAN

3.1 Konsep Dasar Percabangan

3.2 Struktur if Statement

3.3 Struktur if-else Statement

3.4 Struktur else-if Statement

3.5 Nested if Statement

3.6 Operator Logika dalam Percabangan

3.7 Switch Case Statement

3.8 Ternary Operator

3.9 Studi Kasus: Sistem Penilaian Sekolah

3.10 Best Practices dan Common Mistakes

3.11 Kendala dan Solusi

4. KESIMPULAN

5. DAFTAR PUSTAKA

Diposting oleh Al Zaki Ibra Ramadani

Anda mungkin menyukai postingan ini

Posting Komentar

0 Komentar

Social Plugin

Most Popular

Recent Post

Popular Posts

Footer Menu Widget

Contact form