Operator JavaScript: Panduan Lengkap dari Dasar sampai Advanced dengan Contoh Nyata

By | September 27, 2025
0 Comment

Operator JavaScript: Panduan Lengkap dari Dasar sampai Advanced dengan Contoh Nyata

Pernah nggak sih kamu bingung bedain antara == sama ===? Atau mungkin penasaran kenapa ++ bisa bikin angka nambah 1? Kalau iya, selamat! Kamu baru aja nemuin salah satu topik paling fundamental sekaligus powerful dalam JavaScript: operator.

Bayangkan operator itu seperti kata penghubung dalam bahasa. Kalau variabel adalah kata benda, operator adalah kata kerja yang menghubungkan dan memanipulasi kata-kata tersebut. Tanpa operator, kode JavaScript kita cuma jadi kumpulan data diam yang nggak bisa ngapa-ngapain. Tutorial ini bakal ngebahas semua jenis operator JavaScript dengan gaya santai, analogi sehari-hari, dan contoh kode yang langsung bisa kamu coba di browser. Siap untuk jadi master operator?

Apa Itu Operator? Memahami Konsep Dasar

Simple-nya, operator adalah simbol yang digunakan untuk melakukan operasi pada satu atau lebih nilai (yang disebut operand).

// Contoh sederhana:
let hasil = 10 + 5; // + adalah operator, 10 dan 5 adalah operand

JavaScript punya berbagai jenis operator yang dikelompokkan berdasarkan fungsinya. Mari kita jelajahi satu per satu!

1. Operator Aritmatika: Matematika Dasar

Ini adalah operator yang paling mudah dipahami karena mirip dengan matematika sehari-hari.

Operator Nama Contoh Hasil
+ Penjumlahan 10 + 5 15
– Pengurangan 10 – 5 5
* Perkalian 10 * 5 50
/ Pembagian 10 / 5 2
% Modulus (sisa bagi) 10 % 3 1
** Eksponen (pangkat) 2 ** 3 8

Contoh Penggunaan dalam Kode:

let a = 15;
let b = 4;

console.log(a + b);  // 19
console.log(a - b);  // 11
console.log(a * b);  // 60
console.log(a / b);  // 3.75
console.log(a % b);  // 3 (sisa dari 15 ÷ 4)
console.log(a ** 2); // 225 (15 pangkat 2)

2. Operator Penugasan (Assignment): Memberi Nilai

Operator ini digunakan untuk memberikan nilai ke variabel. Yang paling dasar adalah =, tapi ada variasinya yang lebih efisien.

Operator Contoh Sama Dengan
= x = 10 x = 10
+= x += 5 x = x + 5
-= x -= 5 x = x – 5
*= x *= 5 x = x * 5
/= x /= 5 x = x / 5
%= x %= 5 x = x % 5

Contoh Penggunaan:

let saldo = 1000;

saldo += 500;  // saldo sekarang 1500
saldo -= 200;  // saldo sekarang 1300  
saldo *= 2;    // saldo sekarang 2600
saldo /= 4;    // saldo sekarang 650

console.log(saldo); // 650

3. Operator Perbandingan: Membandingkan Nilai

Operator ini menghasilkan nilai boolean (true/false) dengan membandingkan dua nilai.

Operator Nama Contoh Hasil
== Sama dengan (nilai) 5 == “5” true
=== Sama dengan (nilai dan tipe) 5 === “5” false
!= Tidak sama dengan (nilai) 5 != “5” false
!== Tidak sama dengan (nilai dan tipe) 5 !== “5” true
> Lebih besar dari 10 > 5 true
< Lebih kecil dari 10 < 5 false
>= Lebih besar atau sama dengan 10 >= 10 true
<= Lebih kecil atau sama dengan 10 <= 5 false

Perbedaan Penting: == vs ===

Ini adalah konsep yang sering bikin bingung pemula:

console.log(5 == "5");   // true (hanya nilai yang dibandingkan)
console.log(5 === "5");  // false (nilai DAN tipe data dibandingkan)

console.log(0 == false); // true (0 dianggap sama dengan false)
console.log(0 === false); // false (tipe data berbeda: number vs boolean)

// Best Practice: Selalu gunakan === dan !== untuk menghindari bug tak terduga!

4. Operator Logika: Untuk Logika Boolean

Operator ini digunakan untuk menggabungkan atau memanipulasi nilai boolean.

Operator Nama Deskripsi Contoh
&& AND True jika KEDUA operand true (5 > 3) && (10 > 5) // true
|| OR True jika SALAH SATU operand true (5 > 10) || (10 > 5) // true
! NOT Membalikkan nilai boolean !(5 > 3) // false

Contoh Real-World:

let usia = 25;
let punyaSIM = true;

// Bisa menyetir jika usia >= 17 DAN punya SIM
let bisaMenyetir = (usia >= 17) && punyaSIM;
console.log(bisaMenyetir); // true

// Bisa dapat diskon jika member ATAU belanja di atas 500rb
let isMember = true;
let totalBelanja = 300000;
let dapatDiskon = isMember || (totalBelanja > 500000);
console.log(dapatDiskon); // true (karena isMember true)

// Jika bukan weekend
let isWeekend = false;
let isWeekday = !isWeekend;
console.log(isWeekday); // true

5. Operator Ternary: If-Else dalam Satu Baris

Operator ternary adalah cara singkat menulis percabangan if-else.

// Sintaks: kondisi ? nilai_jika_true : nilai_jika_false

let usia = 20;
let status = (usia >= 17) ? "Dewasa" : "Anak-anak";
console.log(status); // "Dewasa"

// Contoh lain:
let score = 85;
let hasil = (score >= 70) ? "Lulus" : "Tidak Lulus";
console.log(hasil); // "Lulus"

6. Operator Typeof: Mengecek Tipe Data

Operator ini mengembalikan string yang menunjukkan tipe data dari operand.

console.log(typeof "Hello");     // "string"
console.log(typeof 42);          // "number"  
console.log(typeof true);        // "boolean"
console.log(typeof undefined);   // "undefined"
console.log(typeof null);        // "object" (ini adalah bug historical JavaScript!)
console.log(typeof []);          // "object"
console.log(typeof {});          // "object"
console.log(typeof function(){}); // "function"

7. Operator Increment/Decrement: Menambah/Mengurangi 1

Operator khusus untuk menambah atau mengurangi nilai numerik sebanyak 1.

Operator Nama Contoh Hasil
++ Increment x++ atau ++x x = x + 1
— Decrement x– atau –x x = x – 1

Perbedaan Prefix vs Postfix:

let x = 5;
let y = x++; // Postfix: assign dulu, baru increment
console.log(x); // 6
console.log(y); // 5

let a = 5;
let b = ++a; // Prefix: increment dulu, baru assign
console.log(a); // 6
console.log(b); // 6

8. Operator Spesial JavaScript

JavaScript punya beberapa operator unik yang tidak dimiliki bahasa lain:

Nullish Coalescing (??)

Mengembalikan operand kanan jika operand kiri adalah null atau undefined.

let nama = null;
let displayName = nama ?? "Tamu";
console.log(displayName); // "Tamu"

let age = 0;
let displayAge = age ?? 18; // 0 bukan null/undefined, jadi kembalikan 0
console.log(displayAge); // 0

Optional Chaining (?.)

Mengamankan akses properti object yang mungkin tidak ada.

let user = {
    name: "Budi",
    address: {
        city: "Jakarta"
    }
};

// Cara lama (ribet)
let city = user && user.address && user.address.city;

// Cara baru dengan optional chaining
let city = user?.address?.city;
console.log(city); // "Jakarta"

// Jika properti tidak ada, tidak error, hanya return undefined
let country = user?.address?.country;
console.log(country); // undefined

Studi Kasus: Kalkulator Sederhana

Mari terapkan berbagai operator dalam project nyata:

function kalkulator(angka1, angka2, operator) {
    switch(operator) {
        case '+':
            return angka1 + angka2;
        case '-':
            return angka1 - angka2;
        case '*':
            return angka1 * angka2;
        case '/':
            return angka2 !== 0 ? angka1 / angka2 : "Error: Pembagian dengan nol!";
        case '%':
            return angka1 % angka2;
        case '**':
            return angka1 ** angka2;
        default:
            return "Operator tidak valid!";
    }
}

// Test kalkulator
console.log(kalkulator(10, 5, '+'));   // 15
console.log(kalkulator(10, 5, '-'));   // 5
console.log(kalkulator(10, 5, '*'));   // 50
console.log(kalkulator(10, 5, '/'));   // 2
console.log(kalkulator(10, 0, '/'));   // Error: Pembagian dengan nol!
console.log(kalkulator(10, 3, '%'));   // 1
console.log(kalkulator(2, 3, '**'));   // 8

Tips dan Best Practices

  • Selalu gunakan === dan !== untuk menghindari type coercion yang tak terduga
  • Gunakan parentheses () untuk mengatur prioritas operasi yang jelas
  • Hati-hati dengan floating point arithmetic (0.1 + 0.2 !== 0.3)
  • Manfaatkan operator ternary untuk kode yang lebih bersih dan ringkas
  • Pahami operator spesial JavaScript seperti ?? dan ?. untuk kode yang lebih aman

Kesimpulan: Operator adalah Pondasi JavaScript

Dengan menguasai operator JavaScript, kamu sudah memiliki fondasi yang kuat untuk membangun logika program yang kompleks. Ingatlah bahwa practice makes perfect—cobalah bereksperimen dengan berbagai kombinasi operator dan lihat hasilnya.

Operator mungkin terlihat sederhana, tapi mereka adalah building block dari segala sesuatu yang akan kamu bangun dengan JavaScript. Mulai dari kalkulator sederhana sampai aplikasi web yang kompleks, semuanya bergantung pada pemahaman yang solid tentang bagaimana operator bekerja.

Selamat berlatih, dan selamat mengeksplorasi kekuatan JavaScript!