Masukkan Password
18 Pernyataan Kondisional: if-else
Di lecture sebelumnya kita belajar if, yaitu:
“Kalau kondisi benar, jalankan kode ini.”
Nah, lecture ini memperluas konsep tersebut menjadi if...else dan if...else if...else.
Kalau disederhanakan:
if
→ memilih berdasarkan 1 kondisi
if...else
→ memilih antara 2 kemungkinan
if...else if...else
→ memilih antara banyak kemungkinan
Mari kita bahas satu per satu.
1. if...else itu apa?
Bentuk dasarnya:
if (condition) {
// kode jika condition true
} else {
// kode jika condition false
}
Cara membacanya:
Jika kondisi benar, lakukan A. Jika tidak, lakukan B.
Ini berbeda dengan if biasa.
Pada if biasa:
if (condition) {
// lakukan sesuatu
}
Kalau kondisi false, tidak ada yang dilakukan.
Sedangkan pada if...else:
if (condition) {
// A
} else {
// B
}
Kalau condition false, tetap ada kode yang dijalankan, yaitu bagian else.
2. Analogi sederhana
Bayangkan kamu mau keluar rumah.
Kondisinya:
Apakah sedang hujan?
Apakah hujan?
│
┌───────┴───────┐
│ │
TRUE FALSE
│ │
bawa payung tidak bawa payung
Dalam JavaScript:
if (isRaining) {
console.log("Bawa payung");
} else {
console.log("Tidak perlu bawa payung");
}
Pasti salah satu dijalankan.
Itulah inti if...else.
3. Contoh voting
Di lecture sebelumnya kita punya masalah:
let age = 20;
if (age >= 18) {
console.log("You are eligible for voting");
}
console.log("You are not eligible for voting");
Masalahnya adalah ketika age = 20, kedua pesan bisa muncul.
Karena statement kedua:
console.log("You are not eligible for voting");
berada di luar if.
Solusinya
Gunakan else:
let age = 20;
if (age >= 18) {
console.log("You are eligible for voting");
} else {
console.log("You are not eligible for voting");
}
Sekarang JavaScript harus memilih:
age >= 18 ?
│
├── TRUE → if
│
└── FALSE → else
4. Kalau umur 20
let age = 20;
JavaScript mengecek:
age >= 18
menjadi:
20 >= 18
hasilnya:
true
Maka:
console.log("You are eligible for voting");
dijalankan.
Sedangkan else tidak dijalankan.
Output:
You are eligible for voting
5. Kalau umur 17
Sekarang:
let age = 17;
JavaScript mengecek:
17 >= 18
hasil:
false
Maka bagian if dilewati.
JavaScript masuk ke else:
console.log("You are not eligible for voting");
Output:
You are not eligible for voting
6. Hal terpenting dari if...else
Pada satu eksekusi if...else:
Hanya satu block yang akan dijalankan.
Misalnya:
if (condition) {
// A
} else {
// B
}
Kemungkinannya:
condition = true
↓
jalankan A
skip B
atau:
condition = false
↓
skip A
jalankan B
Tidak mungkin A dan B dijalankan bersamaan.
7. Bagaimana dengan else if?
Sekarang kebutuhan kita menjadi lebih kompleks.
Misalnya kita ingin memberikan nilai berdasarkan nilai ujian:
90 - 100 → A
80 - 89 → B
70 - 79 → C
< 70 → D
Sekarang kita tidak hanya punya dua kemungkinan.
Ada beberapa kemungkinan.
Kita bisa menggunakan:
if
else if
else if
else
Bentuk umumnya:
if (condition1) {
// kode 1
} else if (condition2) {
// kode 2
} else if (condition3) {
// kode 3
} else {
// kode default
}
Cara membacanya:
Jika kondisi pertama benar, lakukan A. Jika tidak, coba kondisi kedua. Jika tidak, coba kondisi ketiga. Jika semuanya salah, lakukan
else.
8. Kenapa tidak menggunakan banyak if saja?
Misalnya kita menulis:
if (marks >= 90) {
console.log("A");
}
if (marks >= 80) {
console.log("B");
}
if (marks >= 70) {
console.log("C");
}
Ini bermasalah.
Misalnya:
marks = 95
Maka:
95 >= 90 → true
95 >= 80 → true
95 >= 70 → true
Akibatnya:
A
B
C
semuanya bisa muncul.
Padahal kita ingin:
95 → A saja
Karena kategori nilai harus saling eksklusif.
Di sinilah else if berguna.
9. Contoh if...else if...else
Misalnya:
let marks = 75;
if (marks >= 90) {
console.log("Excellent, you got an A");
} else if (marks >= 80) {
console.log("Great job, you got a B");
} else if (marks >= 70) {
console.log("Very good, you got a C");
} else {
console.log("You need to study more, you got a D or below");
}
Sekarang kita punya empat kemungkinan.
marks >= 90 ?
│
├── true → A
│
└── false
↓
marks >= 80 ?
│
├── true → B
│
└── false
↓
marks >= 70 ?
│
├── true → C
│
└── false → D
10. Mari kita jalankan dengan marks = 75
JavaScript mulai dari atas.
Kondisi pertama
marks >= 90
menjadi:
75 >= 90
Hasil:
false
Jadi block A dilewati.
Kondisi kedua
marks >= 80
menjadi:
75 >= 80
Hasil:
false
Block B juga dilewati.
Kondisi ketiga
marks >= 70
menjadi:
75 >= 70
Hasil:
true
Maka:
console.log("Very good, you got a C");
dijalankan.
Dan JavaScript berhenti mengecek rantai if...else if...else tersebut.
Output:
Very good, you got a C
11. Kenapa setelah menemukan true, kondisi berikutnya tidak diperiksa?
Ini konsep yang sangat penting.
Misalnya:
if (marks >= 90) {
console.log("A");
} else if (marks >= 80) {
console.log("B");
} else if (marks >= 70) {
console.log("C");
} else {
console.log("D");
}
Jika:
marks = 95
JavaScript menemukan:
95 >= 90
hasil:
true
Maka langsung menjalankan:
console.log("A");
Setelah itu rantai tersebut selesai.
JavaScript tidak melanjutkan:
95 >= 80
95 >= 70
dan tidak menjalankan else.
12. Jadi urutan kondisi sangat penting
Perhatikan:
if (marks >= 70) {
console.log("C");
} else if (marks >= 90) {
console.log("A");
}
Ini salah secara logic.
Kenapa?
Kalau:
marks = 95
JavaScript mengecek:
95 >= 70
hasilnya true.
Langsung masuk ke:
C
Kondisi >= 90 tidak pernah diperiksa.
Padahal 95 seharusnya A.
Karena itu kita biasanya menyusun kondisi dari yang paling tinggi/spesifik terlebih dahulu:
if (marks >= 90) {
console.log("A");
} else if (marks >= 80) {
console.log("B");
} else if (marks >= 70) {
console.log("C");
} else {
console.log("D");
}
13. Apakah else if harus menggunakan &&?
Lecture memberikan kondisi seperti:
marks >= 80 && marks < 90
Artinya:
marks harus minimal 80 DAN kurang dari 90.
Contohnya:
let marks = 85;
if (marks >= 90) {
console.log("A");
} else if (marks >= 80 && marks < 90) {
console.log("B");
} else if (marks >= 70 && marks < 80) {
console.log("C");
} else {
console.log("D");
}
Untuk 85:
85 >= 80 → true
85 < 90 → true
Maka:
true && true
↓
true
Output:
B
14. Tapi sebenarnya kondisi bisa dibuat lebih sederhana
Karena kita sudah menggunakan else if, kita tidak selalu perlu menulis batas atas.
Contohnya:
if (marks >= 90) {
console.log("A");
} else if (marks >= 80) {
console.log("B");
} else if (marks >= 70) {
console.log("C");
} else {
console.log("D");
}
Kenapa ini sudah cukup?
Misalnya marks = 85.
JavaScript sudah gagal di:
marks >= 90
Karena false.
Jadi ketika masuk ke:
else if (marks >= 80)
kita sudah tahu bahwa:
marks < 90
sebab kalau marks >= 90, JavaScript sudah berhenti di kondisi pertama.
Jadi:
else if (marks >= 80)
secara logic berarti:
80 <= marks < 90
tanpa perlu menuliskan < 90.
Ini pola yang sangat umum.
15. Contoh dengan 60
let marks = 60;
Cek pertama:
60 >= 90 → false
Cek kedua:
60 >= 80 → false
Cek ketiga:
60 >= 70 → false
Semua gagal.
Maka JavaScript sampai ke:
else {
console.log("You need to study more");
}
Output:
You need to study more
16. Fungsi else
else adalah default case.
Artinya:
“Kalau semua kondisi sebelumnya gagal, jalankan ini.”
Contoh:
if (age >= 18) {
console.log("Dewasa");
} else {
console.log("Belum dewasa");
}
Bagian else menangani kondisi:
age < 18
meskipun kita tidak menuliskannya secara eksplisit.
17. else itu optional
Kita boleh menulis:
if (marks >= 90) {
console.log("A");
} else if (marks >= 80) {
console.log("B");
}
Tanpa else.
Kalau marks = 60, tidak ada block yang dijalankan.
Kenapa?
Karena:
marks >= 90 → false
marks >= 80 → false
else → tidak ada
Maka JavaScript selesai tanpa melakukan apa-apa.
18. Kapan perlu menggunakan else?
Gunakan else kalau memang ada aksi default.
Misalnya:
if (isLoggedIn) {
console.log("Welcome");
} else {
console.log("Please login");
}
Karena kita memang ingin menangani dua kondisi:
logged in
atau
belum login
Tetapi kalau kita hanya peduli ketika kondisi true:
if (isLoggedIn) {
console.log("Welcome");
}
else tidak diperlukan.
19. Hubungan if, else if, dan else
Bayangkan seperti sebuah pos pemeriksaan.
┌─────────────┐
│ condition 1│
└──────┬──────┘
│
┌──────┴──────┐
│ │
TRUE FALSE
│ │
↓ ↓
jalankan condition 2
block 1 │
┌─────┴─────┐
│ │
TRUE FALSE
│ │
↓ ↓
block 2 condition 3
│
...
│
↓
else
Jadi:
if
= kondisi pertama.
else if
= kalau sebelumnya gagal, coba kondisi lain.
else
= kalau semuanya gagal.
20. Contoh kehidupan sehari-hari
Misalnya menentukan kategori umur:
let age = 25;
if (age < 13) {
console.log("Anak-anak");
} else if (age < 18) {
console.log("Remaja");
} else {
console.log("Dewasa");
}
Kalau age = 25:
25 < 13 → false
25 < 18 → false
else → dewasa
Output:
Dewasa
Kalau age = 15:
15 < 13 → false
15 < 18 → true
Output:
Remaja
21. Contoh lain: menentukan diskon
let total = 150000;
if (total >= 500000) {
console.log("Diskon 20%");
} else if (total >= 300000) {
console.log("Diskon 10%");
} else if (total >= 100000) {
console.log("Diskon 5%");
} else {
console.log("Tidak ada diskon");
}
Kalau:
total = 350000
JavaScript mengecek:
350000 >= 500000 → false
350000 >= 300000 → true
Maka:
Diskon 10%
Tidak akan lanjut mengecek >= 100000.
22. Bagian yang perlu diperhatikan dari lecture: typo logic
Di caption ada bagian seperti:
marks >= 80tetapimarks <= 90
Kemudian ada beberapa pembahasan tentang less than 90.
Untuk grading yang kita inginkan:
90–100 → A
80–89 → B
70–79 → C
<70 → D
lebih mudah ditulis:
if (marks >= 90) {
console.log("A");
} else if (marks >= 80) {
console.log("B");
} else if (marks >= 70) {
console.log("C");
} else {
console.log("D");
}
Ini lebih sederhana karena else if otomatis hanya dijalankan setelah kondisi sebelumnya gagal.
23. Hubungannya dengan Logical Operator &&
Ini juga menghubungkan materi sebelumnya.
Kita sudah belajar:
&&
berarti AND.
Contoh:
marks >= 80 && marks < 90
Ada dua kondisi:
marks >= 80
AND
marks < 90
Keduanya harus true.
Misalnya marks = 85:
85 >= 80 → true
85 < 90 → true
true && true
↓
true
Tetapi kalau marks = 95:
95 >= 80 → true
95 < 90 → false
true && false
↓
false
24. else if bukan operator
Ini juga perlu dibedakan.
else if
bukan seperti:
&&
||
===
else if adalah bagian dari struktur conditional statement.
Contoh:
if (condition1) {
} else if (condition2) {
} else {
}
25. Bedanya banyak if dengan if...else if
Ini sangat penting.
Banyak if
if (score >= 90) {
console.log("A");
}
if (score >= 80) {
console.log("B");
}
if (score >= 70) {
console.log("C");
}
Setiap kondisi diperiksa secara independen.
Bisa menghasilkan:
A
B
C
if...else if
if (score >= 90) {
console.log("A");
} else if (score >= 80) {
console.log("B");
} else if (score >= 70) {
console.log("C");
}
Kondisi diperiksa dari atas ke bawah dan berhenti setelah menemukan yang true.
Untuk score = 95:
score >= 90 → true
↓
A
↓
selesai
Tidak mengecek B dan C.
26. Cara membaca kode if...else if...else
Kalau kamu menemukan kode:
if (condition1) {
// A
} else if (condition2) {
// B
} else if (condition3) {
// C
} else {
// D
}
Baca seperti manusia:
Kalau condition1 benar → A.
Kalau condition1 salah, tapi condition2 benar → B.
Kalau dua-duanya salah, tapi condition3 benar → C.
Kalau semuanya salah → D.
27. Analogi ujian yang sangat gampang
Bayangkan guru memberikan nilai:
90 ke atas → A
80 ke atas → B
70 ke atas → C
di bawah 70 → D
Program:
if (marks >= 90) {
grade = "A";
} else if (marks >= 80) {
grade = "B";
} else if (marks >= 70) {
grade = "C";
} else {
grade = "D";
}
Misalnya:
marks = 85
Guru/JavaScript berpikir:
Apakah >= 90?
Tidak.
Apakah >= 80?
Ya.
→ B.
Selesai.
Tidak perlu bertanya lagi:
Apakah >= 70?
Karena keputusan sudah dibuat.
28. Pola yang sering sekali dipakai
Kamu akan sering menemukan bentuk:
if (condition1) {
// ...
} else if (condition2) {
// ...
} else {
// ...
}
Misalnya login:
if (username === "admin") {
console.log("Welcome Admin");
} else if (username === "user") {
console.log("Welcome User");
} else {
console.log("Unknown user");
}
Atau suhu:
if (temperature > 30) {
console.log("Panas");
} else if (temperature > 20) {
console.log("Normal");
} else {
console.log("Dingin");
}
Atau saldo:
if (balance >= price) {
console.log("Pembayaran berhasil");
} else {
console.log("Saldo tidak cukup");
}
29. Flowchart mental yang perlu kamu kuasai
Untuk if...else:
condition
│
┌──────┴──────┐
↓ ↓
true false
↓ ↓
IF ELSE
│ │
└──────┬──────┘
↓
selesai
Untuk if...else if...else:
condition 1?
│
├── true → Block 1 → selesai
│
└── false
↓
condition 2?
│
├── true → Block 2 → selesai
│
└── false
↓
condition 3?
│
├── true → Block 3 → selesai
│
└── false → ELSE → selesai
30. Hubungan dengan materi sebelumnya
Sekarang materi yang sudah kamu pelajari mulai tersambung:
prompt()
↓
mendapatkan input
↓
String
↓
Number()
↓
Number
↓
comparison operator
↓
true / false
↓
if / else if / else
↓
menentukan kode yang dijalankan
Contoh lengkap:
let marks = Number(prompt("Please enter your marks out of 100"));
if (marks >= 90) {
console.log("Excellent, you got an A");
} else if (marks >= 80) {
console.log("Great job, you got a B");
} else if (marks >= 70) {
console.log("Very good, you got a C");
} else {
console.log("You need to study more, you got a D or below");
}
Di sini banyak konsep lama digunakan sekaligus:
let→ variableprompt()→ mengambil inputNumber()→ type conversion>=→ comparison operatorif→ kondisi pertamaelse if→ kondisi alternatifelse→ kondisi default{}→ code blockconsole.log()→ menampilkan hasil
31. Jebakan yang perlu kamu ingat
❌ Jangan membuat urutan kondisi yang salah
if (marks >= 70) {
console.log("C");
} else if (marks >= 90) {
console.log("A");
}
Untuk 95, hasilnya malah C.
Karena 95 >= 70 sudah true.
❌ Jangan lupa bahwa else tidak punya condition
Benar:
if (age >= 18) {
} else {
}
Kalau ingin condition lain:
if (age >= 18) {
} else if (age >= 13) {
}
Bukan:
if (age >= 18) {
} else (age >= 13) { // ❌
}
❌ Jangan menganggap semua if itu eksklusif
Ini:
if (...) {}
if (...) {}
if (...) {}
berbeda dengan:
if (...) {}
else if (...) {}
else if (...) {}
Yang pertama semua kondisi bisa dijalankan.
Yang kedua hanya satu cabang yang dijalankan.
32. Ringkasan super penting
| Struktur | Kegunaan |
|---|---|
if | Jalankan kode jika kondisi true |
if...else | Pilih antara 2 kemungkinan |
if...else if | Memeriksa beberapa kondisi |
else | Menjadi pilihan terakhir/default |
if
if (condition) {
// jika true
}
if...else
if (condition) {
// true
} else {
// false
}
if...else if...else
if (condition1) {
// condition1 true
} else if (condition2) {
// condition1 false, condition2 true
} else {
// semuanya false
}
🧠 Inti yang harus benar-benar kamu ingat
Bayangkan seperti pertanyaan bertingkat.
if
“Kalau benar, lakukan ini.”
if (condition) {
// ...
}
if...else
“Kalau benar lakukan A, kalau salah lakukan B.”
if (condition) {
// A
} else {
// B
}
if...else if...else
“Coba A. Kalau tidak, coba B. Kalau tidak, coba C. Kalau semuanya tidak cocok, lakukan D.”
if (condition1) {
// A
} else if (condition2) {
// B
} else if (condition3) {
// C
} else {
// D
}
Dan aturan emasnya:
JavaScript memeriksa
if...else if...elsedari atas ke bawah. Begitu menemukan kondisi yangtrue, branch tersebut dijalankan dan rantainya selesai.
Jadi untuk lecture ini, yang paling penting bukan menghafal syntax, tetapi memahami alur pengambilan keputusannya:
MULAI
↓
cek kondisi 1
↙ ↘
true false
↓ ↓
jalankan cek kondisi 2
block 1 ↙ ↘
true false
↓ ↓
block 2 cek berikutnya
↓
...
↓
tidak ada yang true
↓
else