Tutorial js
Kondisi If-Else JavaScript
Kondisi if-else memungkinkan program membuat keputusan. Seperti kehidupan nyata: "Jika hujan, bawa payung. Jika tidak hujan, tidak perlu payung."
Apa itu If-Else?
If-else adalah cara JavaScript membuat keputusan berdasarkan kondisi tertentu.
let cuaca_hari_ini = "hujan";
if (cuaca_hari_ini === "hujan") {
console.log("Bawa payung!");
} else {
console.log("Tidak perlu payung");
}
Struktur Dasar If
If Sederhana
let umur_user = 18;
if (umur_user >= 17) {
console.log("Boleh punya SIM");
}
If-Else
let nilai_ujian = 75;
if (nilai_ujian >= 70) {
console.log("Lulus!");
} else {
console.log("Tidak lulus");
}
If-Else If
let nilai_siswa = 85;
if (nilai_siswa >= 90) {
console.log("Grade A");
} else if (nilai_siswa >= 80) {
console.log("Grade B");
} else if (nilai_siswa >= 70) {
console.log("Grade C");
} else {
console.log("Grade D");
}
Operator Perbandingan
Operator Dasar
let a = 10;
let b = 5;
console.log(a > b); // true (lebih besar)
console.log(a < b); // false (lebih kecil)
console.log(a >= 10); // true (lebih besar sama dengan)
console.log(a <= 10); // true (lebih kecil sama dengan)
console.log(a === 10); // true (sama dengan)
console.log(a !== b); // true (tidak sama dengan)
Perbedaan === dan ==
let angka_1 = 5;
let angka_2 = "5";
console.log(angka_1 == angka_2); // true (nilai sama)
console.log(angka_1 === angka_2); // false (tipe data beda)
// Selalu gunakan === untuk keamanan
Operator Logika
AND (&&)
let umur_user = 20;
let punya_sim = true;
if (umur_user >= 17 && punya_sim === true) {
console.log("Boleh nyetir mobil");
} else {
console.log("Belum boleh nyetir");
}
OR (||)
let hari_ini = "Sabtu";
if (hari_ini === "Sabtu" || hari_ini === "Minggu") {
console.log("Hari libur!");
} else {
console.log("Hari kerja");
}
NOT (!)
let user_login = false;
if (!user_login) {
console.log("Silakan login dulu");
} else {
console.log("Selamat datang!");
}
Contoh Praktis
1. Sistem Login Sederhana
function cek_login(username_input, password_input) {
let username_benar = "admin";
let password_benar = "123456";
if (username_input === username_benar && password_input === password_benar) {
console.log("Login berhasil!");
return true;
} else {
console.log("Username atau password salah!");
return false;
}
}
// Test login
cek_login("admin", "123456"); // Login berhasil!
cek_login("user", "wrong"); // Username atau password salah!
2. Kalkulator Diskon
function hitung_diskon(total_belanja) {
let diskon_persen = 0;
if (total_belanja >= 1000000) {
diskon_persen = 20;
} else if (total_belanja >= 500000) {
diskon_persen = 15;
} else if (total_belanja >= 200000) {
diskon_persen = 10;
} else if (total_belanja >= 100000) {
diskon_persen = 5;
}
let potongan_harga = (total_belanja * diskon_persen) / 100;
let harga_final = total_belanja - potongan_harga;
console.log("Total belanja:", total_belanja);
console.log("Diskon:", diskon_persen + "%");
console.log("Potongan:", potongan_harga);
console.log("Bayar:", harga_final);
return harga_final;
}
// Test diskon
hitung_diskon(1200000); // Diskon 20%
hitung_diskon(300000); // Diskon 10%
hitung_diskon(50000); // Tidak ada diskon
3. Validasi Umur
function kategori_umur(umur_user) {
if (umur_user < 0) {
return "Umur tidak valid";
} else if (umur_user <= 12) {
return "Anak-anak";
} else if (umur_user <= 17) {
return "Remaja";
} else if (umur_user <= 60) {
return "Dewasa";
} else {
return "Lansia";
}
}
// Test kategori
console.log("Umur 8:", kategori_umur(8)); // Anak-anak
console.log("Umur 15:", kategori_umur(15)); // Remaja
console.log("Umur 25:", kategori_umur(25)); // Dewasa
console.log("Umur 65:", kategori_umur(65)); // Lansia
Latihan If-Else
Latihan 1: Cek Ganjil Genap
Buat file ganjil-genap.html:
<!DOCTYPE html>
<html>
<head>
<title>Cek Ganjil Genap</title>
</head>
<body>
<h1>Program Cek Ganjil Genap</h1>
<script>
function cek_ganjil_genap(angka_input) {
if (angka_input % 2 === 0) {
console.log(angka_input + " adalah bilangan genap");
} else {
console.log(angka_input + " adalah bilangan ganjil");
}
}
// Test beberapa angka
cek_ganjil_genap(4); // Genap
cek_ganjil_genap(7); // Ganjil
cek_ganjil_genap(10); // Genap
cek_ganjil_genap(13); // Ganjil
// Function untuk range angka
function cek_range_angka(start_number, end_number) {
console.log("=== CEK GANJIL GENAP ===");
for (let i = start_number; i <= end_number; i++) {
cek_ganjil_genap(i);
}
}
cek_range_angka(1, 10);
</script>
</body>
</html>
Latihan 2: Sistem Nilai
function tentukan_kelulusan(nilai_tugas, nilai_uts, nilai_uas) {
// Hitung nilai akhir dengan bobot
let nilai_akhir = nilai_tugas * 0.3 + nilai_uts * 0.3 + nilai_uas * 0.4;
console.log("Nilai Tugas:", nilai_tugas);
console.log("Nilai UTS:", nilai_uts);
console.log("Nilai UAS:", nilai_uas);
console.log("Nilai Akhir:", nilai_akhir.toFixed(1));
// Tentukan grade dan status
let grade_huruf;
let status_lulus;
if (nilai_akhir >= 85) {
grade_huruf = "A";
status_lulus = "Lulus dengan Pujian";
} else if (nilai_akhir >= 70) {
grade_huruf = "B";
status_lulus = "Lulus";
} else if (nilai_akhir >= 55) {
grade_huruf = "C";
status_lulus = "Lulus";
} else if (nilai_akhir >= 40) {
grade_huruf = "D";
status_lulus = "Tidak Lulus";
} else {
grade_huruf = "E";
status_lulus = "Tidak Lulus";
}
console.log("Grade:", grade_huruf);
console.log("Status:", status_lulus);
console.log("================");
}
// Test nilai
tentukan_kelulusan(90, 85, 88); // A - Lulus dengan Pujian
tentukan_kelulusan(75, 70, 72); // B - Lulus
tentukan_kelulusan(60, 50, 45); // D - Tidak Lulus
Latihan 3: Kalkulator Pajak
function hitung_pajak_penghasilan(gaji_bulanan) {
let pajak_persen = 0;
let status_pajak = "";
if (gaji_bulanan <= 4500000) {
pajak_persen = 0;
status_pajak = "Bebas pajak";
} else if (gaji_bulanan <= 10000000) {
pajak_persen = 5;
status_pajak = "Pajak rendah";
} else if (gaji_bulanan <= 20000000) {
pajak_persen = 15;
status_pajak = "Pajak sedang";
} else {
pajak_persen = 25;
status_pajak = "Pajak tinggi";
}
let pajak_nominal = (gaji_bulanan * pajak_persen) / 100;
let gaji_bersih = gaji_bulanan - pajak_nominal;
console.log("=== KALKULATOR PAJAK ===");
console.log("Gaji kotor:", gaji_bulanan.toLocaleString());
console.log("Pajak:", pajak_persen + "% (" + status_pajak + ")");
console.log("Pajak nominal:", pajak_nominal.toLocaleString());
console.log("Gaji bersih:", gaji_bersih.toLocaleString());
console.log("========================");
return gaji_bersih;
}
// Test pajak
hitung_pajak_penghasilan(3000000); // Bebas pajak
hitung_pajak_penghasilan(7000000); // Pajak 5%
hitung_pajak_penghasilan(15000000); // Pajak 15%
hitung_pajak_penghasilan(25000000); // Pajak 25%
Conditional Operator (Ternary)
Sintaks Singkat
let umur_user = 18;
let status_dewasa = umur_user >= 17 ? "Dewasa" : "Anak-anak";
console.log(status_dewasa); // Dewasa
// Sama dengan:
let status_alternative;
if (umur_user >= 17) {
status_alternative = "Dewasa";
} else {
status_alternative = "Anak-anak";
}
Contoh Praktis Ternary
function cek_status_member(total_point) {
let level_member =
total_point >= 1000 ? "Gold" : total_point >= 500 ? "Silver" : "Bronze";
return level_member;
}
console.log(cek_status_member(1200)); // Gold
console.log(cek_status_member(700)); // Silver
console.log(cek_status_member(200)); // Bronze
Tips Kondisi If-Else
1. Gunakan Kurung Kurawal
// ❌ Tanpa kurung (berbahaya)
if (nilai > 70) console.log("Lulus");
console.log("Selamat!"); // Ini selalu dijalankan!
// ✅ Dengan kurung (aman)
if (nilai > 70) {
console.log("Lulus");
console.log("Selamat!");
}
2. Kondisi yang Jelas
// ❌ Tidak jelas
if (x) {
// ...
}
// ✅ Jelas
if (user_logged_in === true) {
// ...
}
3. Hindari Nested If Berlebihan
// ❌ Nested terlalu dalam
if (a > 0) {
if (b > 0) {
if (c > 0) {
if (d > 0) {
// Sulit dibaca
}
}
}
}
// ✅ Gunakan return early
function cek_valid(a, b, c, d) {
if (a <= 0) return false;
if (b <= 0) return false;
if (c <= 0) return false;
if (d <= 0) return false;
return true;
}
Error Umum
1. Assignment vs Comparison
let x = 5;
if ((x = 10)) {
// ❌ Assignment, bukan comparison
console.log("Test");
}
if (x === 10) {
// ✅ Comparison
console.log("Test");
}
2. Kondisi Selalu True/False
let status = "aktif";
if ((status = true)) {
// ❌ Selalu true
console.log("Aktif");
}
if (status === "aktif") {
// ✅ Benar
console.log("Aktif");
}
Kesimpulan
If-else adalah otak dari program JavaScript!
Yang sudah dipelajari:
- ✅ Struktur if, else, else if
- ✅ Operator perbandingan (===, !==, >, < dll)
- ✅ Operator logika (&&, ||, !)
- ✅ Conditional operator (ternary)
- ✅ Contoh kasus nyata: login, diskon, validasi
- ✅ Tips dan error umum
Next: Mari belajar tentang array JavaScript! 🎲
