Sign in Subscribe

Pahami Operator Logika JavaScript Biar Kode Kamu Nggak Gampang Error.

Angga Pixa

Angga Pixa

— 8 min read
Pahami Operator Logika JavaScript Biar Kode Kamu Nggak Gampang Error.
Photo by Patrick Martin/Unsplash

Bro, Sista, atau siapapun kamu yang lagi berkutat sama kode JavaScript, pernah nggak sih ngerasa pusing tujuh keliling pas nemu bug di logika program cuma gara-gara salah pakai operator? Atau, kok aneh ya, padahal logikanya udah bener tapi kok hasilnya malah beda? Nah, kemungkinan besar masalahnya ada di pemahaman kita tentang operator logika JavaScript.

Jangan salah sangka, operator logika itu bukan cuma buat nentuin true atau false doang, lho. Mereka punya kekuatan lebih yang kalau kamu kuasai, bisa bikin kode kamu jadi jauh lebih bersih, efisien, dan yang paling penting: nggak gampang error! Di artikel ini, kita bakal kupas tuntas gimana sih operator logika ini bekerja, tips dan trik pakainya, biar kode kamu makin jagoan. Siap? Yuk, kita bedah satu per satu!

Kenalan Sama Operator Logika JavaScript

Di JavaScript, ada tiga operator logika utama yang wajib banget kamu tahu:

  1. && (AND)
  2. || (OR)
  3. ! (NOT)

Kelihatannya simpel, ya? Tapi di balik kesederhanaannya itu, ada banyak hal menarik yang bisa kamu gali. Yuk, kita mulai dari yang paling sering dipakai.

---

1. && (Logical AND): Si "Dua-duanya Harus Oke!"

Operator && ini kerjanya mirip banget sama kamu lagi mau jalan bareng temen tapi punya dua syarat. Misalnya, "Aku mau jalan kalau cuacanya cerah dan kalau aku lagi nggak ada tugas." Kalau salah satu syarat nggak terpenuhi, ya nggak jadi jalan.

Secara teknis, && akan mengembalikan nilai true hanya jika kedua operand (nilai di kiri dan kanan operator) yang dievaluasi bernilai true. Kalau ada salah satu aja yang false, atau bahkan falsy (akan kita bahas nanti), maka hasilnya langsung false.

Contoh Dasar:

javascript
const umur = 20;
const punyaKTP = true;// Kedua kondisi harus true
if (umur >= 18 && punyaKTP) {
  console.log("Boleh masuk bar!"); // Ini yang akan dieksekusi
} else {
  console.log("Maaf, belum boleh masuk.");
}const adaDiskon = true;
const stokCukup = false;

Kekuatan Tersembunyi: Short-Circuiting dan Truthy/Falsy

Ini nih bagian yang bikin && jadi powerful dan sering bikin bingung. JavaScript itu cerdas, bro. Ketika ketemu &&, dia nggak akan selalu mengevaluasi kedua sisi. Ini namanya short-circuiting.

Gini logikanya: Kalau operand pertama sudah false atau falsy, JavaScript tahu nih kalau hasil akhirnya PASTI false (karena true && false hasilnya false, false && true hasilnya false, dan false && false hasilnya false). Jadi, dia nggak perlu repot-repot ngecek operand kedua. Langsung aja balikin nilai dari operand pertama yang falsy itu.

Apa itu Truthy/Falsy? Di JavaScript, nggak cuma nilai true dan false aja yang dianggap boolean. Ada banyak nilai lain yang kalau diubah jadi boolean, dia akan dianggap true (truthy) atau false (falsy).

Nilai Falsy:

  • false
  • 0 (angka nol)
  • "" (string kosong)
  • null
  • undefined
  • NaN (Not a Number)

Semua nilai lainnya dianggap Truthy. Contohnya: true, 1, -1, "halo", [] (array kosong), {} (object kosong), dan lain-lain.

Nah, balik lagi ke && dan short-circuiting.

  • Kalau operand pertama falsy: && akan mengembalikan operand pertama itu tanpa mengevaluasi operand kedua.
javascript
    const nama = "";
    const defaultNama = nama && "Tamu"; // nama adalah falsy (""), jadi defaultNama = ""
    console.log(defaultNama); // Output: ""
  • Kalau operand pertama truthy: && akan melanjutkan mengevaluasi operand kedua, dan mengembalikan nilai dari operand kedua tersebut.
javascript
    const namaPengguna = "Budi";
    const namaTampilan = namaPengguna && "Selamat datang, " + namaPengguna; // namaPengguna truthy, jadi akan mengevaluasi dan mengembalikan operand kedua
    console.log(namaTampilan); // Output: "Selamat datang, Budi"

Tips Penggunaan && yang Cerdas:

  1. Conditional Rendering di React/Vue (atau JS Vanilla):

Ini sering banget dipakai buat nampilin komponen cuma kalau ada data tertentu.

javascript
    const user = { nama: "Alice", isLoggedIn: true };
    // const user = null; // Contoh kalau user null// Di React/JSX
    {user && user.isLoggedIn && (
      Halo, {user.nama}! Selamat datang kembali.
    )}

Kalau user itu null atau undefined, ekspresi user && ... akan langsung jadi null atau undefined, dan nggak akan ada output yang aneh-aneh. Ini jauh lebih ringkas daripada if (user !== null && user.isLoggedIn).

  1. Menjalankan Fungsi Bersyarat:
javascript
    function kirimData(data) {
      console.log("Mengirim data:", data);
      // Logika kirim data ke server
    }const dataInput = { id: 1, nama: "Produk A" };
    const isValid = true; // Anggap ini hasil validasi

Ini adalah cara ringkas untuk menjalankan sesuatu hanya jika suatu kondisi terpenuhi.

  1. Mengakses Properti Objek dengan Aman (sebelum Optional Chaining):

Sebelum ES2020 ada ?. (Optional Chaining), developer sering pakai && untuk mencegah error saat mengakses properti objek yang mungkin null atau undefined.

javascript
    const userProfile = {
      address: {
        street: "Jl. Merdeka",
        city: "Jakarta"
      }
    };// const userProfile = {}; // Contoh tanpa address
    // const userProfile = null; // Contoh nullconst kota = userProfile && userProfile.address && userProfile.address.city;
    console.log(kota); // Output: Jakarta (atau undefined kalau userProfile/address null)

Meskipun sekarang ada ?., paham && ini tetap penting karena kadang kita butuh logikanya lebih dari sekadar pengecekan null/undefined.

---

2. || (Logical OR): Si "Salah Satu Aja Cukup!"

Kalau && itu "dua-duanya harus oke," || ini kebalikannya, yaitu "salah satu aja cukup, Bro!" Operator || akan mengembalikan true jika salah satu dari operand-nya bernilai true atau truthy. Dia baru akan mengembalikan false kalau kedua-duanya false atau falsy.

Contoh Dasar:

javascript
const cuacaBagus = false;
const adaPromo = true;// Salah satu true, jadi hasilnya true
if (cuacaBagus || adaPromo) {
  console.log("Yuk, jalan-jalan atau belanja!"); // Ini yang akan dieksekusi
} else {
  console.log("Mending di rumah aja.");
}const bateraiLow = true;
const sinyalBuruk = true;

Kekuatan Tersembunyi ||: Short-Circuiting dan Default Values

Sama seperti &&, operator || juga punya fitur short-circuiting. Tapi logikanya sedikit beda.

  • Kalau operand pertama truthy: JavaScript tahu nih kalau hasil akhirnya PASTI true (karena true || false hasilnya true, true || true hasilnya true). Jadi, dia nggak perlu repot-repot ngecek operand kedua. Langsung aja balikin nilai dari operand pertama yang truthy itu.
javascript
    const namaPengguna = "Andi";
    const namaDefault = namaPengguna || "Guest"; // namaPengguna truthy, jadi namaDefault = "Andi"
    console.log(namaDefault); // Output: "Andi"
  • Kalau operand pertama falsy: || akan melanjutkan mengevaluasi operand kedua, dan mengembalikan nilai dari operand kedua tersebut.
javascript
    const nama = "";
    const defaultNama = nama || "Tamu"; // nama falsy (""), jadi akan mengembalikan operand kedua
    console.log(defaultNama); // Output: "Tamu"

Tips Penggunaan || yang Cerdas:

  1. Memberikan Nilai Default (Sangat Umum!):

Ini adalah penggunaan || yang paling populer dan efisien. Kamu bisa memberikan nilai fallback atau default jika suatu variabel tidak ada (null/undefined) atau bernilai falsy (seperti string kosong atau 0).

javascript
    function getUserSetting(settingName) {
      // Anggap ini mengambil setting dari database
      const settings = {
        theme: "dark",
        fontSize: null,
        language: "" // Ini falsy
      };
      return settings[settingName];
    }const theme = getUserSetting('theme') || 'light'; // Output: "dark"
    const fontSize = getUserSetting('fontSize') || 16; // Output: 16 (karena null adalah falsy)
    const language = getUserSetting('language') || 'en-US'; // Output: "en-US" (karena "" adalah falsy)
    const username = getUserSetting('username') || 'Guest'; // Output: "Guest" (karena undefined adalah falsy)

Penting! Hati-hati kalau kamu mau pakai || untuk nilai default di mana 0 atau "" (string kosong) adalah nilai yang valid. Misalnya, kalau fontSize bisa jadi 0 (misal untuk ukuran font minimal) dan kamu pakai fontSize || 16, maka kalau fontSize memang 0, dia akan dianggap falsy dan hasilnya malah jadi 16. Untuk kasus seperti ini, di ES2020 ada operator baru: ?? (Nullish Coalescing Operator).

Perbedaan || dan ?? (Nullish Coalescing Operator):

  • || (OR Operator): Memberikan nilai default jika operand pertama falsy (termasuk 0, "", null, undefined, NaN).
  • ?? (Nullish Coalescing Operator): Memberikan nilai default jika operand pertama null atau undefined SAJA. Nilai 0 atau "" masih dianggap valid.

Contoh Perbandingan:

javascript
const panjang = 0;
const lebar = null;
const tinggi = undefined;
const kedalaman = 10;
const namaProduk = "";const defaultPanjang_OR = panjang || 100; // 0 dianggap falsy, jadi hasilnya 100
const defaultPanjang_NULLISH = panjang ?? 100; // 0 BUKAN null/undefined, jadi hasilnya 0const defaultLebar_OR = lebar || 50; // null dianggap falsy, jadi hasilnya 50
const defaultLebar_NULLISH = lebar ?? 50; // null adalah null, jadi hasilnya 50const defaultTinggi_OR = tinggi || 20; // undefined dianggap falsy, jadi hasilnya 20
const defaultTinggi_NULLISH = tinggi ?? 20; // undefined adalah undefined, jadi hasilnya 20const defaultNamaProduk_OR = namaProduk || "Untitled"; // "" dianggap falsy, jadi hasilnya "Untitled"
const defaultNamaProduk_NULLISH = namaProduk ?? "Untitled"; // "" BUKAN null/undefined, jadi hasilnya ""console.log(|| defaultPanjang: ${defaultPanjangOR}, ?? defaultPanjang: ${defaultPanjangNULLISH});
// Output: || defaultPanjang: 100, ?? defaultPanjang: 0

Pilih || atau ?? tergantung kebutuhan kamu. Kalau 0 atau "" memang nggak boleh jadi nilai default, pakai ||. Tapi kalau 0 atau "" itu nilai yang valid, pakai ?? biar lebih akurat.

---

3. ! (Logical NOT): Si "Kebalikannya Dong!"

Operator ! ini paling gampang dipahami. Dia cuma punya satu operand dan kerjanya ngebalik nilai boolean dari operand itu. Kalau true jadi false, kalau false jadi true.

Contoh Dasar:

javascript
const isAdmin = false;
console.log(!isAdmin); // Output: trueconst isLoggedIn = true;
console.log(!isLoggedIn); // Output: false

Kekuatan Tersembunyi !: Mengubah Nilai Apapun Jadi Boolean Eksplisit

Mirip dengan && dan || yang bisa bekerja dengan nilai truthy/falsy, ! juga bisa. Kalau kamu pakai ! pada nilai truthy, hasilnya akan false. Kalau dipakai pada nilai falsy, hasilnya akan true.

javascript
console.log(!0);       // Output: true (0 adalah falsy)
console.log(!"");      // Output: true ("" adalah falsy)
console.log(!null);    // Output: true (null adalah falsy)
console.log(!"Hello"); // Output: false ("Hello" adalah truthy)
console.log(![]);      // Output: false ([] adalah truthy)

Double !! (The Double Bang): Mengubah Nilai Apapun Jadi Boolean Murni Ini trik yang sering dipakai buat mengubah nilai apapun menjadi true atau false secara eksplisit, tanpa mengubah makna truthy atau falsy-nya.

  • !!nilai akan menghasilkan true jika nilai itu truthy.
  • !!nilai akan menghasilkan false jika nilai itu falsy.

javascript
const hasData = "some string";
console.log(!!hasData); // Output: trueconst isEmpty = "";
console.log(!!isEmpty); // Output: falseconst isZero = 0;
console.log(!!isZero); // Output: false

Ini berguna banget kalau kamu butuh nilai boolean yang murni dari suatu variabel yang bisa aja isinya angka, string, atau objek.

---

Operator Precedence (Urutan Prioritas)

Sama seperti di matematika ada kali-bagi duluan baru tambah-kurang, di JavaScript juga ada urutan prioritas operator. Operator logika punya prioritasnya sendiri:

  1. ! (NOT) punya prioritas tertinggi.
  2. && (AND) punya prioritas lebih tinggi dari ||.
  3. || (OR) punya prioritas terendah di antara operator logika.

Artinya, ! akan dievaluasi duluan, baru &&, lalu ||. Kalau ragu, selalu pakai tanda kurung () untuk memastikan urutan evaluasi sesuai keinginan kamu. Itu best practice banget!

Contoh:

javascript
const a = true;
const b = false;
const c = true;// Evaluasi tanpa kurung:
// Karena && lebih tinggi dari ||, maka (b && c) dievaluasi duluan
const hasil1 = a || b && c; // Sama dengan a || (b && c)
// a || (false && true)
// a || false
// true || false = true
console.log(hasil1); // Output: true// Evaluasi dengan kurung untuk mengubah prioritas:
// (a || b) dievaluasi duluan
const hasil2 = (a || b) && c;
// (true || false) && c
// true && c
// true && true = true
console.log(hasil2); // Output: trueconst d = false;
const e = true;

---

Kesalahan Umum & Tips Anti-Error

  1. Lupa Efek Short-Circuiting:

Ini sering kejadian! Developer pemula sering cuma mikir && dan || sebagai operator boolean murni. Padahal, mereka mengembalikan nilai dari operand yang di-short-circuit. Tips: Ingat selalu bahwa && mengembalikan falsy pertama atau truthy terakhir. || mengembalikan truthy pertama atau falsy terakhir.

  1. Salah Pakai || untuk Default 0 atau "":

Seperti yang sudah dibahas, kalau 0 atau string kosong "" itu nilai yang valid buat kamu, jangan pakai || untuk default. Pakai ?? (Nullish Coalescing) biar lebih tepat.

javascript
    const kuantitas = 0;
    const kuantitasDefault = kuantitas ?? 1; // Hasil: 0 (Benar!)
    // const kuantitasDefault = kuantitas || 1; // Hasil: 1 (Salah, karena 0 dianggap falsy)
  1. Terlalu Banyak Operator dalam Satu Baris:

Meskipun kodenya jadi ringkas, tapi kalau terlalu panjang dan banyak operator && atau || berderet, bisa bikin kode susah dibaca dan rawan error. Tips: Kalau kondisinya udah kompleks banget, pecah jadi beberapa variabel boolean yang lebih kecil dan jelas namanya. Atau, gunakan statement if/else biasa biar lebih eksplisit.

javascript
    // Kurang readable:
    if (user.isAdmin && user.isActive && user.hasPremium && !user.isSuspended && user.role === 'editor' || user.isSuperAdmin) { / ... / }// Lebih readable:
    const canEdit = user.isAdmin && user.isActive && user.hasPremium && !user.isSuspended && user.role === 'editor';
    const isSuperAdmin = user.isSuperAdmin;
  1. Membandingkan Objek dengan && atau ||:

Ingat, objek kosong {}, array kosong [], atau bahkan fungsi itu semua truthy. Jadi kalau kamu cek if ({}) hasilnya true. Tips: Kalau mau ngecek objek itu kosong atau enggak, jangan pakai cuma !!objek. Cek propertinya atau panjang array-nya (Object.keys(obj).length === 0 atau array.length === 0).

---

Penutup

Memahami operator logika &&, ||, dan ! di JavaScript itu fundamental banget, Bro dan Sista. Mereka lebih dari sekadar gerbang true/false di if statement. Dengan short-circuiting dan interaksi mereka dengan nilai truthy/falsy, kamu bisa menulis kode yang lebih elegan, singkat, dan pastinya meminimalisir bug yang sering muncul dari logika yang salah.

Praktikkan terus, coba-coba sendiri di console browser atau di VS Code kamu. Eksperimen dengan berbagai nilai dan lihat hasilnya. Semakin sering kamu pakai dan pahami nuansanya, semakin insting kamu terasah buat menulis kode JavaScript yang robust dan error-proof. Selamat ngoding!

Read more