Logika Bukan Sekadar True/False: Menguasai Operator Logika dan Ternary

Dec 15, 2025•3 min read
programming""javascript""clean-code""web-development

Dalam pemrograman, logika adalah "otak" di balik setiap fitur. Sebagai developer, kita sering terjebak membuat struktur if-else yang sangat panjang dan bertumpuk (nesting hell). Padahal, dengan memahami operator logika secara mendalam, kita bisa menulis kode yang jauh lebih elegan dan mudah dibaca.

1. The Big Three: Jantung dari Kondisional

Ada tiga operator logika dasar yang wajib kita kuasai di luar kepala.

OperatorSimbolFungsi
AND`&&`Menghasilkan `true` jika semua kondisi benar.
OR`||`Menghasilkan `true` jika salah satu kondisi benar.
NOT`!`Membalikkan nilai (True jadi False, dan sebaliknya).

Contoh Kasus:

Misalkan kamu sedang membangun fitur proteksi halaman di Next.js:

const canAccessDashboard = isLoggedIn && isAdmin && !isBanned;

if (canAccessDashboard) {
  // Render dashboard
}

Dibaca: User bisa akses jika sudah login DAN dia admin DAN TIDAK sedang di-ban.

2. Ternary Operator: Si Ringkas Pengganti If-Else

Ternary Operator

Ternary operator adalah cara singkat menulis if-else dalam satu baris. Sangat berguna di dalam komponen UI seperti React/Next.js.

Struktur: kondisi ? eksekusi_jika_true : eksekusi_jika_false

Perbandingan:

// Menggunakan If-Else Konvensional
let status;
if (score >= 75) {
  status = "Lulus";
} else {
  status = "Gagal";
}

// Menggunakan Ternary (Lebih Clean)
const status = score >= 75 ? "Lulus" : "Gagal";
⚠️

Jangan gunakan ternary bertumpuk (nested ternary) seperti a ? b : c ? d : e. Itu akan membuat rekan tim atau intern kamu pusing saat membacanya. Balik ke if-else atau switch jika kondisi terlalu kompleks.

3. Short-circuit Evaluation: Trik Pro Developer

JavaScript dan PHP modern punya fitur unik di mana mereka akan berhenti mengevaluasi logika jika hasilnya sudah pasti.

Logical AND (&&) untuk Rendering

Di React, kita sering memakai ini untuk menampilkan elemen secara kondisional:

{ hasNotification && <Badge count={5} /> }

Jika hasNotification bernilai false, JavaScript tidak akan mengecek komponen <Badge /> sama sekali.

Logical OR (||) untuk Default Value

const username = inputName || "Anonymous";

Jika inputName kosong/falsy, maka variabel akan otomatis mengambil nilai "Anonymous".

4. Perbedaan Vital: || vs ?? (Nullish Coalescing)

Ini adalah bagian yang sering membingungkan mahasiswa atau junior dev.

  • || (OR): Menganggap 0, "" (string kosong), dan false sebagai nilai yang salah (falsy).
  • ?? (Nullish): Hanya menganggap null atau undefined sebagai nilai yang salah.

Contoh Kasus:

const stock = 0;

const resultOR = stock || 10;      // Hasilnya 10 (karena 0 dianggap falsy)
const resultNullish = stock ?? 10; // Hasilnya 0 (karena 0 adalah nilai valid)

Gunakan ?? jika angka 0 adalah nilai yang valid dalam aplikasimu.

5. Tips Clean Code untuk Operator Logika

  1. Gunakan Variabel Deskriptif: Daripada menulis logika panjang di dalam if, simpan di variabel.
  • Bad: if (user.age > 18 && user.hasLicense && !user.isDrunk)
  • Good: const canDrive = isAdult && hasLicense && isSober;
  1. Early Return: Jika kondisi tidak terpenuhi, langsung keluar dari fungsi.
  2. Encapsulation: Jika logika dipakai berulang kali, buatlah fungsi helper seperti checkEligibility().

Logika yang bersih mencerminkan cara berpikir developer yang terstruktur. Mana dari operator di atas yang paling sering kamu gunakan di proyekmu?

Romi Muharom