Di lecture ini kita masuk ke ternary operator (caption menulis “Turner”, tetapi yang benar adalah ternary operator).

Kalau lecture sebelumnya membahas:

if (...) {
    // ...
} else {
    // ...
}

ternary operator memungkinkan kita melakukan keputusan yang sama dengan syntax yang lebih singkat, terutama kalau masing-masing cabang hanya membutuhkan satu expression/baris sederhana.

1. Apa itu Ternary Operator?

Ternary operator adalah operator JavaScript yang digunakan untuk memilih satu dari dua kemungkinan berdasarkan sebuah kondisi.

Bentuk dasarnya:

condition ? statement1 : statement2

Cara membacanya:

Kalau condition true, gunakan statement1; kalau false, gunakan statement2.

Contoh:

age >= 18 ? "Dewasa" : "Belum dewasa"

Artinya:

Kalau age >= 18 benar → "Dewasa" Kalau salah → "Belum dewasa"

2. Kenapa namanya “ternary”?

Karena operator ini bekerja dengan 3 operand.

Contoh:

condition ? statement1 : statement2

Ada tiga bagian:

condition       → operand 1
statement1      → operand 2
statement2      → operand 3

Jadi:

        operand 1
             ↓
condition ? statement1 : statement2
             ↑              ↑
         operand 2      operand 3

Karena ada tiga operand, disebut ternary.

3. Kenapa disebut juga Conditional Operator?

Karena hasilnya bergantung pada sebuah condition.

Misalnya:

age >= 18 ? "Boleh voting" : "Tidak boleh voting"

Hasilnya bergantung pada:

age >= 18

Kalau true, hasilnya satu nilai.

Kalau false, hasilnya nilai lain.

Jadi ternary operator juga disebut:

conditional operator

4. Hubungannya dengan if...else

Perhatikan if...else berikut:

let age = 20;

if (age >= 18) {
    console.log("You are eligible for voting");
} else {
    console.log("You are not eligible for voting");
}

Kita bisa menulis logic yang sama menggunakan ternary:

let age = 20;

age >= 18
    ? console.log("You are eligible for voting")
    : console.log("You are not eligible for voting");

Hasilnya sama.

Kalau:

age = 20

maka:

20 >= 18
     ↓
   true
     ↓
"eligible"

Kalau:

age = 15

maka:

15 >= 18
     ↓
   false
     ↓
"not eligible"

5. Cara membaca tanda ? dan :

Ini adalah hal yang paling penting untuk pertama kali dipahami.

Misalnya:

age >= 18 ? "Boleh" : "Tidak boleh"

Bacanya:

Apakah age >= 18?

Kalau YA, pilih "Boleh".

Kalau TIDAK, pilih "Tidak boleh".

Jadi:

             condition
                 ↓
        age >= 18 ?
          ↙       ↘
       TRUE      FALSE
         ↓          ↓
      "Boleh"   "Tidak boleh"

6. Struktur ternary

Syntax lengkapnya:

condition ? statement1 : statement2;

Aturannya:

condition
   ↓
   ?
   ↓
kode jika TRUE
   ↓
   :
   ↓
kode jika FALSE

Contoh:

age >= 18 ? "Adult" : "Minor";

Artinya:

condition      → age >= 18
?              → jika true
"Adult"        → hasil true
:              → jika false
"Minor"        → hasil false

7. Contoh sederhana dengan angka

Misalnya:

let age = 20;

let result = age >= 18 ? "Adult" : "Minor";

JavaScript mengevaluasi:

age >= 18

menjadi:

20 >= 18

hasilnya:

true

Karena true, ternary memilih:

"Adult"

Jadi:

result

berisi:

"Adult"

Kalau:

let age = 15;

let result = age >= 18 ? "Adult" : "Minor";

Maka:

15 >= 18
   ↓
false
   ↓
"Minor"

Jadi:

result

berisi:

"Minor"

8. Bagian yang sangat penting: ternary menghasilkan sebuah nilai

Ini perbedaan penting dibanding cara kita biasanya menggunakan if.

Perhatikan:

let message = age >= 18 ? "Eligible" : "Not eligible";

Ternary menghasilkan value.

Kalau condition true:

message = "Eligible";

Kalau condition false:

message = "Not eligible";

Jadi ternary sangat cocok digunakan ketika kita ingin memilih sebuah nilai.

9. Contoh yang sangat umum

Misalnya menentukan status login:

let isLoggedIn = true;

let message = isLoggedIn ? "Welcome" : "Please login";

console.log(message);

Karena:

isLoggedIn

adalah true, maka:

message = "Welcome";

Output:

Welcome

Kalau:

let isLoggedIn = false;

maka:

Please login

10. Ternary bukan sekadar versi pendek dari console.log

Misalnya:

age >= 18
    ? console.log("Eligible")
    : console.log("Not eligible");

Ini memang bisa dilakukan.

Tetapi kemampuan yang sangat berguna dari ternary adalah menghasilkan value.

Contoh:

let message = age >= 18
    ? "Eligible"
    : "Not eligible";

Kemudian kita bisa menggunakan message di tempat lain:

console.log(message);

Atau:

document.title = message;

Atau:

alert(message);

Jadi cara berpikir yang bagus:

Ternary sangat cocok ketika kita ingin memilih satu nilai dari dua pilihan.

11. Perbandingan if...else vs ternary

if...else

if (age >= 18) {
    message = "Eligible";
} else {
    message = "Not eligible";
}

Ternary

let message = age >= 18
    ? "Eligible"
    : "Not eligible";

Keduanya menghasilkan logic yang sama.

Tetapi ternary lebih ringkas.

12. Analogi sederhana: pilih menu

Bayangkan kamu ditanya:

Apakah kamu ingin kopi?

Kalau iya:

Kopi

Kalau tidak:

Teh

Dalam JavaScript:

let drink = wantsCoffee ? "Coffee" : "Tea";

Bacanya:

Kalau wantsCoffee benar, drink menjadi "Coffee", kalau tidak menjadi "Tea".

13. Ternary sangat berguna untuk assignment

Ini salah satu pola yang paling sering kamu temui nanti.

Misalnya:

let age = 20;

let status = age >= 18 ? "Adult" : "Minor";

Daripada:

let status;

if (age >= 18) {
    status = "Adult";
} else {
    status = "Minor";
}

Ternary membuatnya lebih pendek:

let status = age >= 18 ? "Adult" : "Minor";

14. Kenapa lecture mengatakan ternary mengurangi kode?

Karena untuk kasus sederhana:

if (condition) {
    // satu hal
} else {
    // hal lain
}

kita bisa mengubahnya menjadi:

condition ? value1 : value2

Misalnya:

if...else

let message;

if (age >= 18) {
    message = "Eligible";
} else {
    message = "Not eligible";
}

Ternary

let message = age >= 18 ? "Eligible" : "Not eligible";

Lebih singkat dan langsung terlihat bahwa kita sedang memilih sebuah value.

15. Ternary tetap menggunakan Boolean

Condition-nya harus dievaluasi menjadi sesuatu yang menentukan true/false.

Misalnya:

age >= 18

adalah comparison expression.

Hasilnya:

true

atau:

false

Kemudian ternary memilih hasil berdasarkan itu.

16. Bisa menggunakan truthy/falsy juga

Karena JavaScript mengenal truthy/falsy, kita juga bisa:

let username = "John";

let message = username ? "Welcome" : "Please enter username";

"John" adalah truthy.

Maka:

Welcome

Kalau:

let username = "";

String kosong adalah falsy.

Maka:

Please enter username

Jadi konsepnya sama dengan if yang sudah kita pelajari.

17. Ternary dengan prompt()

Kita juga bisa menggabungkan materi sebelumnya.

let age = Number(prompt("Please enter your age"));

let message = age >= 18
    ? "You are eligible for voting"
    : "You are not eligible for voting";

console.log(message);

Misalnya user memasukkan:

20

Maka:

20 >= 18
   ↓
true
   ↓
"You are eligible for voting"

message berisi:

"You are eligible for voting"

Kalau user memasukkan:

15

Maka:

15 >= 18
   ↓
false
   ↓
"You are not eligible for voting"

18. Ternary bisa dianggap sebagai “mesin pemilih”

Bayangkan:

condition ? value1 : value2

sebagai mesin:

                condition
                    ↓
             ┌─────────────┐
             │   TERNARY   │
             └──────┬──────┘
                    ↓
              ┌─────┴─────┐
              ↓           ↓
            TRUE        FALSE
              ↓           ↓
           value 1      value 2

Ternary akan menghasilkan salah satu dari dua value tersebut.

19. Bedanya if...else dan ternary secara konsep

Ini penting supaya kamu tidak menganggap keduanya selalu interchangeable.

if...else

Lebih cocok untuk:

Melakukan beberapa tindakan berdasarkan kondisi.

Misalnya:

if (age >= 18) {
    console.log("Eligible");
    sendEmail();
    saveToDatabase();
} else {
    console.log("Not eligible");
    showWarning();
}

Di sini ada beberapa baris yang harus dijalankan.

Lebih jelas menggunakan if...else.

Ternary

Lebih cocok untuk:

Memilih satu value berdasarkan kondisi.

Misalnya:

let status = age >= 18 ? "Adult" : "Minor";

Sangat cocok.

20. Contoh perbandingan

Kasus sederhana → ternary

let age = 20;

let status = age >= 18 ? "Adult" : "Minor";

Bagus.

Kasus kompleks → if...else

if (age >= 18) {
    console.log("Adult");
    console.log("Can vote");
    console.log("Can apply for ID");
} else {
    console.log("Minor");
    console.log("Cannot vote");
}

Lebih mudah dibaca dengan if...else.

Kalau dipaksakan menjadi ternary:

age >= 18
    ? (console.log("Adult"), console.log("Can vote"), console.log("Can apply for ID"))
    : (console.log("Minor"), console.log("Cannot vote"));

Secara teknis bisa dibuat, tetapi sangat tidak disarankan untuk pemula karena malah sulit dibaca.

21. Aturan praktis yang bagus

Gunakan:

Ternary jika:

• hanya ada dua kemungkinan
• logic-nya sederhana
• biasanya ingin mendapatkan satu value
• cukup dilakukan dalam satu expression

Contoh:

let result = score >= 60 ? "Pass" : "Fail";

Gunakan if...else jika:

• ada banyak baris kode
• logic cukup kompleks
• ada banyak tindakan yang harus dilakukan
• ternary membuat kode sulit dibaca

Contoh:

if (score >= 60) {
    console.log("You passed");
    sendCongratulations();
    updateScore();
} else {
    console.log("You failed");
    showRetryButton();
}

22. Hati-hati dengan if vs ternary

Perhatikan:

if (age >= 18) {
    "Adult";
} else {
    "Minor";
}

String "Adult" dan "Minor" tidak melakukan apa-apa.

Sedangkan:

let status = age >= 18 ? "Adult" : "Minor";

hasil ternary disimpan ke status.

Jadi jangan berpikir ternary hanya sebagai:

“if versi pendek.”

Lebih tepat:

Ternary adalah expression yang memilih dan menghasilkan salah satu dari dua value berdasarkan kondisi.

Ini pemahaman yang lebih kuat.

23. Ternary bisa digunakan langsung sebagai argument

Karena menghasilkan value, kita bisa melakukan:

console.log(age >= 18 ? "Adult" : "Minor");

JavaScript memilih value terlebih dahulu.

Misalnya age = 20:

age >= 18
   ↓
true
   ↓
"Adult"
   ↓
console.log("Adult")

Output:

Adult

24. Bisa juga digunakan untuk menentukan value lain

Misalnya:

let age = 20;

let canVote = age >= 18 ? true : false;

Hasil:

canVote

adalah:

true

Tetapi ada catatan penting: dalam kasus sederhana seperti ini, ternary sebenarnya tidak diperlukan.

Karena:

let canVote = age >= 18;

sudah menghasilkan Boolean.

Ini contoh bagus bahwa:

Jangan menggunakan ternary hanya karena bisa.

Gunakan kalau memang membuat kode lebih jelas.

25. Bisa menggunakan function juga

Misalnya:

let age = 20;

let message = age >= 18
    ? "Welcome"
    : "Access denied";

Atau jika ingin melakukan function:

age >= 18
    ? showWelcome()
    : showAccessDenied();

Tetapi lagi-lagi, untuk logic yang semakin panjang, if...else biasanya lebih mudah dibaca.

26. Apakah ternary hanya bisa dua kondisi?

Secara konsep, satu ternary memiliki dua pilihan:

condition ? value1 : value2

Kalau kita memiliki banyak kategori, kita bisa membuat ternary bersarang:

let grade =
    marks >= 90 ? "A" :
    marks >= 80 ? "B" :
    marks >= 70 ? "C" :
    "D";

Hasilnya bisa benar.

Tetapi untuk pemula, jangan buru-buru menggunakan nested ternary.

Lebih jelas:

if (marks >= 90) {
    grade = "A";
} else if (marks >= 80) {
    grade = "B";
} else if (marks >= 70) {
    grade = "C";
} else {
    grade = "D";
}

Jadi:

Ternary → ideal untuk keputusan sederhana dua pilihan. if...else if...else → lebih cocok untuk banyak kondisi.

27. Hubungannya dengan materi sebelumnya

Sekarang perjalanan materi kita mulai terlihat jelas.

Kita sudah belajar:

Comparison

age >= 18

menghasilkan:

true / false

Kemudian kita belajar:

if...else

if (age >= 18) {
    // A
} else {
    // B
}

Kemudian sekarang kita belajar versi expression:

Ternary

age >= 18 ? "A" : "B"

Jadi:

Comparison
    ↓
true / false
    ↓
   Ternary
    ↓
pilih salah satu value

28. Perbandingan tiga konsep

Contoh:

if

if (age >= 18) {
    console.log("Adult");
}

if...else

if (age >= 18) {
    console.log("Adult");
} else {
    console.log("Minor");
}

Ternary

let status = age >= 18 ? "Adult" : "Minor";

Banyak kondisi

if (marks >= 90) {
    grade = "A";
} else if (marks >= 80) {
    grade = "B";
} else if (marks >= 70) {
    grade = "C";
} else {
    grade = "D";
}

29. Cara cepat membaca ternary

Kalau kamu melihat:

condition ? value1 : value2

langsung terjemahkan di kepala:

“Kalau condition benar → value1. Kalau salah → value2.”

Contoh:

age >= 18 ? "Yes" : "No"

Baca:

Kalau umur minimal 18 → "Yes", kalau tidak → "No".

Contoh lain:

score >= 60 ? "Pass" : "Fail"

Baca:

Kalau score minimal 60 → "Pass", kalau tidak → "Fail".

30. Kesalahan umum pemula

❌ Salah memahami urutan

Jangan berpikir:

condition ? value1 : value2

sebagai:

condition dan value1 dan value2 semuanya dijalankan.

Bukan.

Hanya satu yang dipilih:

true  → value1
false → value2

❌ Lupa tanda ? dan :

Formatnya harus:

condition ? value1 : value2

Bukan:

condition value1 value2

❌ Menggunakan ternary untuk logic yang terlalu panjang

Kalau sampai seperti:

condition
    ? doSomething()
    : doSomethingElse();

masih cukup jelas.

Tapi kalau masing-masing sisi memiliki banyak operasi dan nested ternary, biasanya if...else lebih baik.

31. Analogi terakhir: saklar pilihan

Bayangkan ada sebuah saklar:

                Apakah umur >= 18?
                       │
                 ┌─────┴─────┐
                 ↓           ↓
               YA            TIDAK
                 ↓           ↓
             "Eligible"  "Not Eligible"

Ternary adalah cara JavaScript menuliskan saklar itu secara singkat:

age >= 18 ? "Eligible" : "Not Eligible";

Sedangkan if...else adalah versi yang lebih panjang tetapi lebih fleksibel:

if (age >= 18) {
    console.log("Eligible");
} else {
    console.log("Not Eligible");
}

🧠 Cheat Sheet

Syntax

condition ? valueIfTrue : valueIfFalse;

Contoh

let age = 20;

let message = age >= 18
    ? "You can vote"
    : "You cannot vote";

Cara baca

condition
    ↓
 true? ─── YES → value setelah ?
    │
    NO
    ↓
value setelah :

Ternary menghasilkan value

let result = condition ? "A" : "B";

if...else cocok untuk banyak statement

if (condition) {
    // banyak kode
} else {
    // banyak kode
}

Ternary cocok untuk pilihan sederhana

let status = condition ? "A" : "B";

🎯 Inti lecture

Ada 3 hal utama yang harus kamu pahami:

1. Ternary adalah conditional operator:

condition ? value1 : value2

2. ? berarti pilihan ketika kondisi true, sedangkan : berarti pilihan ketika kondisi false:

age >= 18
    ? "Eligible"       // true
    : "Not eligible";  // false

3. Ternary menghasilkan sebuah value, sehingga sangat bagus untuk assignment:

let message = age >= 18
    ? "Eligible"
    : "Not eligible";

Kalau if...else terasa seperti “lakukan A atau lakukan B”, maka ternary lebih terasa seperti “pilih A atau B untuk menjadi sebuah nilai.” Itu adalah cara paling mudah untuk membedakan keduanya.