Cara Menggunakan If Else di JavaScript (Lengkap dengan Contoh)

Pernah kepikiran gak sih? bikin fitur login yang bisa ngecek apakah username dan password yang dimasukin user itu bener apa nggak? Nah, di situ biasanya kita butuh yang namanya if else di JavaScript. Dengan kondisi ini, program bisa “ngambil keputusan”, misalnya kalau datanya cocok yaaah user boleh masuk, tapi kalau salah langsung ditolak deh! atau dikasih pesan error hehe. Jadi, if else ini penting banget buat nentuin alur logika sederhana kayak sistem login yang sering kita temuin sehari-hari.

Dengan if else, kamu bisa membuat logika percabangan sehingga program dapat menjalankan perintah yang berbeda tergantung pada kondisi tertentu.

Apa Itu If Else di JavaScript?

If else adalah struktur kontrol di JavaScript yang digunakan untuk menjalankan kode berdasarkan kondisi tertentu.

Sederhananya, if else bekerja seperti pengambilan keputusan. Kalau kondisi bernilai true, maka kode di dalam if akan dijalankan. Kalau tidak, maka kode di bagian else yang akan dieksekusi.

Misalnya seperti ini: kalau kamu lulus ujian, kamu naik kelas. Kalau tidak, ya harus mengulang. Nah, logika seperti ini yang diterapkan oleh if else dalam program.

Fungsi If Else di JavaScript

Fungsi utama if else adalah untuk mengatur alur program berdasarkan kondisi tertentu. Dengan struktur ini, JavaScript bisa “memutuskan” aksi apa yang harus dilakukan.

Tanpa if else, program akan berjalan lurus tanpa bisa mengambil keputusan. Padahal dalam banyak kasus, kita butuh logika seperti: jika kondisi terpenuhi, lakukan A; jika tidak, lakukan B.

• Menjalankan kode berdasarkan kondisi
• Membantu program mengambil keputusan
• Mengontrol alur logika agar lebih dinamis

Intinya, if else adalah dasar dari hampir semua logika percabangan dalam JavaScript.

Struktur Dasar If Else

if (kondisi) {
  // kode jika kondisi true
} else {
  // kode jika kondisi false
}

Struktur ini dipakai buat ngecek suatu kondisi. Kalau kondisinya bernilai true, maka kode di dalam blok if akan dijalankan. Tapi kalau false, program bakal jalanin kode yang ada di blok else. Dengan cara ini, program bisa ngambil keputusan sesuai situasi yang terjadi.

Contoh If Else Sederhana

let saldo = 75000;

if (saldo >= 50000) {
  console.log("Bisa pesan makanan");
} else {
  console.log("Saldo kurang, isi dulu yah");
}

Pada contoh di atas, program mengecek apakah saldo cukup untuk memesan makanan. Jika saldo minimal 50.000, maka bisa lanjut pesan. Kalau tidak, disarankan untuk isi saldo terlebih dahulu.

Contoh Penggunaan dalam Dunia Nyata

Dalam kehidupan sehari-hari, if else bisa digunakan dalam berbagai situasi. Misalnya saat login WiFi, jika password yang dimasukkan benar maka pengguna bisa terhubung, jika salah maka akses ditolak. Saat login akun, jika username dan password sesuai maka pengguna berhasil masuk, jika tidak maka login gagal. Dalam kuis online seperti Google Form, jika jawaban benar maka skor bertambah, jika salah maka tidak mendapat poin.

1. Menentukan Akses WiFi

Contoh ini mengecek apakah password WiFi yang dimasukkan sudah benar.

• Pengguna memasukkan password melalui input.
• Jika sesuai, maka berhasil terhubung.

function cekWifi() {
  let input = document.getElementById("password").value;

  if (input === "kopi123") {
    document.getElementById("hasil").innerHTML = "Terhubung ke WiFi 📶";
  } else {
    document.getElementById("hasil").innerText = "Password salah";
  }
}

2. Cek Baterai HP

Program ini mengecek apakah baterai cukup untuk aktivitas.

• Input berupa persentase baterai.
• Jika di atas 20%, dianggap aman.

function cekBaterai() {
  let level = document.getElementById("baterai").value;

  if (level > 20) {
    document.getElementById("hasil").innerText = "Baterai cukup";
  } else {
    document.getElementById("hasil").innerText = "Baterai lemah";
  }
}

3. Cek Kursi Kosong

Program ini mengecek apakah masih ada kursi kosong.

• Jika kursi lebih dari 0, berarti tersedia.
• Jika 0, berarti penuh.

function cekKursi() {
  let jumlah = document.getElementById("kursi").value;

  if (jumlah > 0) {
    document.getElementById("hasil").innerText = "Masih ada tempat";
  } else {
    document.getElementById("hasil").innerText = "Tempat penuh";
	alert ('Tidak ada kursi kosong saat ini!');
  }
}

4. Mengecek Bilangan Ganjil / Genap

Contoh ini mengecek apakah sebuah angka termasuk ganjil atau genap.

• Angka diambil dari input.
• Jika habis dibagi 2 (sisa 0), maka genap.
• Jika tidak, maka ganjil.

function cekAngka() {
  let angka = document.getElementById("angka").value;

  if (angka % 2 === 0) {
    document.getElementById("hasil").innerText = "Bilangan Genap";
  } else {
    document.getElementById("hasil").innerText = "Bilangan Ganjil";
  }
}

If Else If (Percabangan Lebih dari Dua Kondisi)

Percabangan if else if digunakan ketika ada lebih dari dua kondisi yang ingin diperiksa secara berurutan. Jika memiliki lebih dari satu kondisi, kamu bisa menggunakan else if untuk menambahkan pengecekan lanjutan. Program akan mengecek setiap kondisi dari atas ke bawah, dan menjalankan blok kode pada kondisi pertama yang bernilai benar. Jika tidak ada kondisi yang terpenuhi, maka bagian else (jika ada) akan dijalankan sebagai kondisi default.

function cekNilai() {
  let nilai = parseInt(document.getElementById("nilai").value);
  let hasil = document.getElementById("hasil");

  if (isNaN(nilai)) {
    hasil.innerText = "Masukkan angka yang valid!";
  } else if (nilai < 0 || nilai > 100) {
    hasil.innerText = "Nilai harus antara 0 - 100";
  } else if (nilai >= 90) {
    hasil.innerText = "Grade: A";
  } else if (nilai >= 80) {
    hasil.innerText = "Grade: B";
  } else if (nilai >= 70) {
    hasil.innerText = "Grade: C";
  } else {
    hasil.innerText = "Grade: D";
  }
}

1. Cek Cuaca

Contoh ini menentukan apakah perlu membawa payung.

• Jika cuaca hujan → bawa payung
• Jika cuaca cerah → tidak perlu payung
• Jika cuaca mendung → sebaiknya siapkan payung

function cekCuaca() {
  let kondisi = document.getElementById("cuaca").value;
  let hasil = document.getElementById("hasil");

  if (kondisi === "") {
    hasil.innerText = "Pilih kondisi cuaca dulu!";
  } else if (kondisi === "hujan") {
    hasil.innerText = "🌧️ Bawa payung";
  } else if (kondisi === "cerah") {
    hasil.innerText = "☀️ Tidak perlu payung";
  } else if (kondisi === "mendung") {
    hasil.innerText = "🌥️ Sebaiknya siapkan payung";
  }
}

2. Login Multi User

Contoh ini mengecek login berdasarkan 4 user berbeda menggunakan percabangan if - else if.

• Program mengecek input username dan password.
• Menggunakan percabangan if - else if untuk 4 user berbeda.
• Jika cocok dengan salah satu user, login berhasil.
• Jika tidak cocok semua, maka login gagal.

function login() {
  let username = document.getElementById("username").value;
  let password = document.getElementById("password").value;
  let hasil = document.getElementById("hasil");

  if (username === "" || password === "") {
    hasil.innerText = "Username dan password harus diisi!";
  } 
  else if (username === "cicagak" && password === "123cg") {
    hasil.innerText = "Login berhasil! Selamat datang Cicagak";
  } 
  else if (username === "cibungur" && password === "123cb") {
    hasil.innerText = "Login berhasil! Selamat datang Cibungur";
  } 
  else if (username === "cikukulu" && password === "123ck") {
    hasil.innerText = "Login berhasil! Selamat datang Cikukulu";
  } 
  else if (username === "admin" && password === "000") {
    hasil.innerText = "Login berhasil! Ini adalah user Admin";
	alert ('Berhasil Login dengan Admin!');
  } 
  else {
    hasil.innerText = "Username atau password salah!";
	alert ('Coba perikasa kembali User/Passw dengan telilti!');
  }
}

3. Aturan Lampu Lalu Lintas

Contoh ini mengecek warna lampu dan kecepatan kendaraan.

• Merah → jika kecepatan > 0 maka dianggap melanggar.
• Kuning → harus hati-hati, tidak boleh terlalu cepat.
• Hijau → ada batas minimum (20 km/jam) dan maksimum (80 km/jam).
• Menggunakan nested if untuk aturan lebih detail.

function cek() {
  let lampu = document.getElementById("lampu").value;
  let kecepatan = parseInt(document.getElementById("kecepatan").value);
  let hasil = document.getElementById("hasil");

  if (lampu === "") {
    hasil.innerText = "Pilih lampu lalu lintas!";
  } 
  else if (isNaN(kecepatan)) {
    hasil.innerText = "Masukkan kecepatan!";
  } 
  else if (lampu === "merah") {
    if (kecepatan > 0) {
      hasil.innerText = "🚨 Melanggar! Tidak boleh jalan saat lampu merah!";
    } else {
      hasil.innerText = "🛑 Berhenti dengan benar";
    }
  } 
  else if (lampu === "kuning") {
    if (kecepatan > 40) {
      hasil.innerText = "⚠️ Kurangi kecepatan, terlalu cepat untuk kuning!";
    } else if (kecepatan > 0) {
      hasil.innerText = "⚠️ Hati-hati, bersiap berhenti";
    } else {
      hasil.innerText = "⚠️ Jangan diam total, siapkan jalan";
    }
  } 
  else if (lampu === "hijau") {
    if (kecepatan < 20) {
      hasil.innerText = "Terlalu pelan, ganggu arus lalu lintas!";
    } else if (kecepatan > 80) {
      hasil.innerText = "🚨 Jangan Terlalu cepat! Bahaya!";
    } else {
      hasil.innerText = "🚗 Jalan normal dan aman";
    }
  } 
  else {
    hasil.innerText = "Input tidak valid!";
  }
}

4. Membuat Quiz Sederhana

Quiz ini digunakan untuk melatih logika percabangan if-else dengan beberapa pertanyaan pilihan ganda.

• Setiap jawaban dicek menggunakan percabangan if.
• Skor dihitung berdasarkan jumlah jawaban benar.
• Bagian akhir menggunakan if - else if untuk menentukan kategori hasil.

function cekQuiz() {
  let q1 = document.getElementById("q1").value;
  let q2 = document.getElementById("q2").value;
  let q3 = document.getElementById("q3").value;
  let hasil = document.getElementById("hasil");

  let skor = 0;

  if (q1 === "" || q2 === "" || q3 === "") {
    hasil.innerText = "Silakan jawab semua pertanyaan!";
    return;
  }

  if (q1 === "b") {
    skor++;
  }

  if (q2 === "b") {
    skor++;
  }

  if (q3 === "c") {
    skor++;
  }

  if (skor === 3) {
    hasil.innerText = "🎉 Mantap! Skor kamu: " + skor;
  } 
  else if (skor === 2) {
    hasil.innerText = "👍 Bagus! Skor kamu: " + skor;
  } 
  else if (skor === 1) {
    hasil.innerText = "🙂 Lumayan deh! Skor kamu: " + skor;
  } 
  else {
    hasil.innerText = "😅 Coba lagi Jangan buru buru! Skor kamu: " + skor;
  }
}

Konsep Penting yang Perlu Dipahami

Sebelum menggunakan if else, ada beberapa konsep dasar yang perlu kamu pahami agar tidak bingung saat menulis kode:

• Kondisi harus menghasilkan nilai boolean (true atau false)
• Bisa menggunakan operator perbandingan seperti >, <, atau ===
• Bisa dikombinasikan dengan operator logika seperti && (dan) dan || (atau)

Kesalahan Umum yang Harus Dihindari

Saat menggunakan if else, ada beberapa kesalahan yang sering dilakukan, terutama oleh pemula. Berikut beberapa di antaranya:

• Menggunakan = вместо ===
• Kondisi tidak jelas atau selalu bernilai true
• Terlalu banyak nested if sehingga kode sulit dibaca

Tips Menggunakan If Else

Agar penggunaan if else lebih efektif dan kode tetap mudah dibaca, ada beberapa tips yang bisa kamu terapkan:

• Gunakan === untuk perbandingan agar hasilnya lebih akurat
• Buat kondisi yang sederhana dan jelas
• Gunakan else if jika memiliki banyak kondisi

Ringkasan

Sebagai penutup, berikut poin-poin penting yang perlu kamu ingat:

• if digunakan untuk menjalankan kode ketika kondisi bernilai benar
• if else digunakan untuk pengambilan keputusan dengan dua kemungkinan kondisi
• if else if digunakan untuk menangani lebih dari dua kondisi
• Kode dijalankan berdasarkan kondisi tertentu

Dengan memahami konsep ini, kamu sudah punya dasar yang kuat untuk membuat logika program di JavaScript.

Kesimpulan

if else adalah salah satu konsep paling penting dalam JavaScript untuk membuat logika program dan pengambilan keputusan.

Dengan menguasainya, kamu bisa membuat aplikasi yang lebih dinamis, interaktif, dan mampu merespons berbagai kondisi dengan tepat.

Memahami if else juga akan memudahkan kamu mempelajari konsep lanjutan lainnya dalam pemrograman.

Pertanyaan yang Sering Diajukan (FAQ)

Apa itu if else di JavaScript?

If else adalah struktur untuk menjalankan kode berdasarkan kondisi tertentu.

Apa fungsi else if?

Digunakan untuk menambahkan lebih banyak kondisi dalam percabangan.

Kapan menggunakan if else?

Saat program perlu mengambil keputusan berdasarkan kondisi.