JavaScript - Operator Kondisional

Halo sana, para ahli JavaScript masa depan! Hari ini, kita akan melihat dunia magis operator kondisional. Jangan khawatir jika Anda belum pernah menulis satu baris kode sebelumnya - saya akan menjadi panduan ramah Anda dalam perjalanan yang menarik ini. Jadi, ambil keyboard virtual Anda (tikus), dan mari kita melancarkan beberapa mantra kondisional!

JavaScript - Conditional Operators

Apa Itu Operator Kondisional?

Imaginasi Anda adalah lampu lalu lintas. Tugas Anda adalah untuk menentukan apakah mobil harus maju atau berhenti. Itu tepat seperti yang dilakukan operator kondisional di JavaScript - mereka membantu program kita membuat keputusan berdasarkan kondisi tertentu.

Operator Ternary: pisau swiss army dari kondisional

Bintang dari pertunjukan hari ini adalah operator ternary. Itu seperti if-else yang ringkas dan sangat efisien. mari kitauraikan ini:

kondisi ? ekspresiJikaBenar : ekspresiJikaSalah

Itu seperti jika kita menanyakan sesuatu:

  • Jika jawabannya ya (benar), lakukan hal pertama.
  • Jika jawabannya tidak (salah), lakukan hal kedua.

Sintaks: Resep untuk Magic Kondisional

mari kita lihat bahan-bahan dari potion kondisional kita:

  1. kondisi: Ini adalah pertanyaan kita. Apakah hujan? Apakah pengguna masuk? Apakah nomor genap?
  2. ?: Ini seperti mengatakan "kemudian..."
  3. ekspresiJikaBenar: apa yang harus dilakukan jika kondisi benar
  4. :: Ini seperti mengatakan "walau..."
  5. ekspresiJikaSalah: apa yang harus dilakukan jika kondisi salah

Contoh 1: Penentuk Cuaca

mari kita mulai dengan contoh sederhana. Kita akan membuat program yang menentukan apakah membawa payung berdasarkan cuaca.

let isRaining = true;
let decision = isRaining ? "Bawa payung" : "Tinggalkan payung di rumah";
console.log(decision);

Jika Anda menjalankan kode ini, itu akan mencetak: "Bawa payung"

mari kitauraikan ini:

  • isRaining adalah kondisi kita. Itu diatur ke true.
  • Jika hujan (isRaining benar), ekspresi kita mengembalikan "Bawa payung".
  • Jika tidak hujan, itu akan mengembalikan "Tinggalkan payung di rumah".
  • Kita menyimpan hasil ini di variabel decision.

Coba mengubah isRaining ke false dan lihat apa yang terjadi!

Contoh 2: Pemeriksa Umur

Sekarang, mari kita membuat program yang memeriksa apakah seseorang cukup tua untuk pemilihan umum.

let age = 20;
let canVote = age >= 18 ? "Ya, Anda bisa pemilih!" : "Maaf, Anda terlalu muda untuk pemilihan umum.";
console.log(canVote);

Ini akan mencetak: "Ya, Anda bisa pemilih!"

mari kita lihat apa yang terjadi:

  • Kita mengatur age ke 20.
  • Kondisi kita adalah age >= 18 (apakah umur sama atau lebih besar dari 18?).
  • Jika benar, kita mengembalikan "Ya, Anda bisa pemilih!".
  • Jika salah, kita mengembalikan "Maaf, Anda terlalu muda untuk pemilihan umum."

Coba mengubah umur ke 16 dan lihat bagaimana output berubah!

Contoh 3: Penentuk Nilai

mari kita membuat lebih kompleks. Kita akan membuat program yang menentukan nilai berdasarkan skor.

let score = 85;
let grade = score >= 90 ? 'A' :
score >= 80 ? 'B' :
score >= 70 ? 'C' :
score >= 60 ? 'D' : 'F';
console.log(`Nilai Anda adalah: ${grade}`);

Ini akan mencetak: "Nilai Anda adalah: B"

Wah, itu terlihat berbeda! Kita sebenarnya menggabungkan beberapa operator ternary bersamaan. Itu seperti air terjun keputusan:

  • Pertama, kita memeriksa jika skor adalah 90 atau lebih. Jika ya, itu 'A'.
  • Jika tidak, kita memeriksa jika skor adalah 80 atau lebih. Jika ya, itu 'B'.
  • Ini terus berlanjut ke 'F' untuk skor di bawah 60.

Itu teknik yang kuat, tapi gunakanlah dengan bijak - terlalu banyak rangkaian bisa membuat kode Anda sulit untuk dibaca!

Menangani nilai null: Operator Null Coalescing

kadang-kadang, kita harus berurusan dengan nilai null atau undefined. Operator null coalescing: ??

let username = null;
let displayName = username ?? "Guest";
console.log(`Selamat datang, ${displayName}!`);

Ini akan mencetak: "Selamat datang, Guest!"

mari kita lihat apa yang terjadi:

  • Jika username adalah null atau undefined, kita gunakan "Guest" saja.
  • Jika username memiliki nilai, kita gunakan itu.

Itu cara praktis untuk menyediakan nilai default!

Cheatsheet Operator Kondisional

mari ini adalah tabel rujukan cepat dari operator yang kita pelajari:

Operator Nama Tujuan
?: Operator Ternary Buat keputusan antara dua nilai berdasarkan kondisi
?? Operator Null Coalescing Sediakan nilai default saat berurusan dengan null atau undefined

Ingat, latihan membuat sempurna! Cobalah membuat contoh Anda sendiri dan eksperimen dengan operator ini. Sebelum Anda tahu, Anda akan menjadi pengatur orkestra keputusan dalam kode Anda!

Selamat coding, dan may your conditionals always be true (when you want them to be)!

Credits: Image by storyset