Jika kamu belajar JavaScript dari dasar, maka salah satu materi paling penting untuk dipahami sejak awal adalah operator JavaScript.
Operator adalah simbol atau karakter khusus yang digunakan untuk melakukan operasi pada nilai atau variabel seperti penjumlahan, pengecekan kondisi, perbandingan nilai, dan lain sebagainya.
Dalam dunia pemrograman, operator berfungsi sebagai alat matematika, alat logika, dan alat evaluasi kondisi. Sebagai contoh:
- Menjumlahkan angka menggunakan
+ - Mengecek apakah suatu nilai lebih besar menggunakan
> - Mengevaluasi apakah dua kondisi benar menggunakan
&& - Menggabungkan string menggunakan
+ - Menentukan apakah dua nilai sama menggunakan
===
Untuk kamu yang sedang belajar JavaScript untuk pemula, memahami operator adalah fondasi penting karena semua struktur logika—seperti perulangan, percabangan, dan manipulasi data—akan selalu melibatkan operator.
Daftar isi
Baca juga: Tipe Data JavaScript Lengkap Dengan Contoh
Apa Itu Operator JavaScript?
Secara sederhana:
Operator JavaScript adalah simbol khusus yang digunakan untuk melakukan operasi pada nilai, variabel, atau ekspresi.
Contohnya:
var hasil = 10 + 5;Code language: JavaScript (javascript)Operator di atas adalah:
+→ operator aritmatika untuk menjumlahkan=→ operator assignment untuk menempatkan hasil ke variabel
Operator menghubungkan operand — yaitu nilai atau variabel yang diproses ― menjadi sebuah ekspresi.
Contoh lain:
let cek = 8 > 5;Code language: JavaScript (javascript)Operator > adalah operator perbandingan dan akan menghasilkan nilai true.
Kenapa Operator Penting Dipahami?
Tanpa operator, JavaScript tidak bisa melakukan apa pun yang melibatkan:
- Perhitungan angka
- Logika (if, while, for)
- Evaluasi kondisi
- Manipulasi teks
- Pengambilan keputusan dalam kode
Operator adalah fondasi, bahkan sebelum kamu mempelajari:
- Function
- Array
- Object
- DOM manipulation
- Async programming
Karena itu, mempelajari operator adalah langkah wajib dalam tutorial JavaScript pemula.
Kategori Utama Operator JavaScript
JavaScript memiliki banyak jenis operator, tetapi dalam artikel ini kita fokus pada 3 kategori utama yang paling sering digunakan dan sangat penting:
1. Operator Aritmatika JavaScript
Digunakan untuk menghitung nilai numerik:
+→ operator penjumlahan-→ operator pengurangan*→ operator perkalian/→ operator pembagian%→ operator sisa pembagian**→ operator perpangkatan++→ operator increment--→ operator decrement
2. Operator Perbandingan JavaScript
Digunakan untuk membandingkan dua nilai:
>→ operator lebih besar<→ operator lebih kecil>=→ operator lebih besar atau sama dengan<=→ operator lebih kecil atau sama dengan==→ operator sama dengan===→ operator sama dengan (loose equality)!=→ operator tidak sama dengan!==→ operator tidak sama dengan (loose inequality)
3. Operator Logika JavaScript
Digunakan untuk mengevaluasi kondisi:
&&→ operator logika AND||→ operator logika OR!→ operator logika NOT
Dari semua operator JavaScript di atas kita akan bahas satu per satu secara detail.
Contoh Penggunaan Operator Secara Sederhana
Berikut contoh ekspresi yang menggunakan ketiga jenis operator sekaligus:
let x = 10 + 5; // operator aritmatika
let kondisi = x > 10; // operator perbandingan
let hasilAkhir = kondisi && true; // operator logika
console.log(hasilAkhir); // trueCode language: JavaScript (javascript)Penjelasan alurnya:
10 + 5menghasilkan1515 > 10menghasilkantruetrue && truemenghasilkantrue
Operator Aritmatika JavaScript
Operator aritmatika JavaScript adalah operator yang digunakan untuk melakukan operasi matematika seperti penjumlahan, pengurangan, perkalian, pembagian, dan sebagainya.
Operator ini termasuk yang paling sering digunakan dalam proses perhitungan nilai, manipulasi angka, perulangan, logika program, hingga pembuatan fitur interaktif di web.
Pada bagian ini kita akan membahas:
- Daftar lengkap operator aritmatika
- Tabel fungsi masing-masing operator
- Contoh dasar
- Contoh penggunaan untuk pemula
- Studi kasus nyata (kalkulator sederhana, konversi nilai, dsb.)
- Kesalahan umum pemula
- Best practice
1. Daftar Lengkap Operator Aritmatika JavaScript
Berikut daftar operator aritmatika yang tersedia di JavaScript:
| Operator | Nama | Fungsi |
|---|---|---|
+ | Penjumlahan | Menjumlahkan dua nilai |
- | Pengurangan | Mengurangi nilai kiri dengan nilai kanan |
* | Perkalian | Mengalikan dua nilai |
/ | Pembagian | Membagi nilai kiri dengan nilai kanan |
% | Modulus | Menghasilkan sisa pembagian |
** | Eksponensial | Pangkat atau perpangkatan |
++ | Increment | Menambah 1 |
-- | Decrement | Mengurangi 1 |
Operator-operator ini sangat mendasar dan digunakan dalam hampir semua aplikasi JavaScript yang melibatkan data numerik.
2. Contoh Penggunaan Dasar Operator Aritmatika
Mari kita lihat contoh sederhana dalam JavaScript:
let a = 10;
let b = 3;
let tambah = a + b; // 13
let kurang = a - b; // 7
let kali = a * b; // 30
let bagi = a / b; // 3.333...
let sisa = a % b; // 1
let pangkat = a ** b; // 1000
console.log(tambah, kurang, kali, bagi, sisa, pangkat);Code language: JavaScript (javascript)Output:
13 7 30 3.3333333333333335 1 1000Code language: CSS (css)3. Penjelasan Setiap Operator (Lengkap + Contoh)
Operator Penjumlahan (+)
Digunakan untuk menjumlahkan angka.
let hasil = 5 + 8;
console.log(hasil); // 13Code language: JavaScript (javascript)Catatan penting:
Jika salah satu operand berupa string, maka JavaScript akan melakukan concatenation (penggabungan string), bukan penjumlahan.
Contoh:
let x = "5" + 5;
console.log(x); // "55" (bukan 10)Code language: JavaScript (javascript)Operator Pengurangan (-)
let hasil = 10 - 3;
console.log(hasil); // 7Code language: JavaScript (javascript)Jika operand berupa string yang bisa dikonversi ke angka, JavaScript otomatis mengubahnya menjadi angka.
Operator Perkalian (*)
let hasil = 4 * 7;
console.log(hasil); // 28Code language: JavaScript (javascript)Operator Pembagian (/)
let hasil = 20 / 4;
console.log(hasil); // 5Code language: JavaScript (javascript)Jika membagi dengan 0, hasilnya Infinity, bukan error:
console.log(5 / 0); // InfinityCode language: JavaScript (javascript)Operator Modulus (%)
Menghasilkan sisa pembagian.
console.log(10 % 3); // 1
console.log(15 % 4); // 3Code language: JavaScript (javascript)Sangat berguna untuk:
- Menentukan bilangan ganjil/genap
- Membuat pola perulangan
- Logika permainan (game logic)
Operator Eksponensial ()**
console.log(2 ** 3); // 8
console.log(5 ** 2); // 25Code language: JavaScript (javascript)Increment (++)
Ada 2 bentuk:
1. Prefix (++a)
Nilai ditambah dulu baru dipakai.
let a = 5;
console.log(++a); // 6Code language: JavaScript (javascript)2. Postfix (a++)
Nilai dipakai dulu baru ditambah.
let b = 5;
console.log(b++); // 5
console.log(b); // 6Code language: JavaScript (javascript)Decrement (–)
Mirip seperti increment, hanya saja mengurangi nilai.
let x = 5;
console.log(x--); // 5
console.log(x); // 4Code language: JavaScript (javascript)4. Contoh Penggunaan Operator Aritmatika di Dunia Nyata
Operator aritmatika bukan hanya latihan dasar, tetapi digunakan untuk banyak hal seperti:
- Kalkulator digital
- Counter pada website
- Transaksi e-commerce
- Menghitung diskon
- Mengolah data statistik
- Logika permainan
Berikut beberapa contoh nyata.
Contoh 1: Menghitung Total Harga dan Diskon
let harga = 15000;
let qty = 3;
let diskon = 10; // persen
let subtotal = harga * qty;
let potongan = subtotal * (diskon / 100);
let totalBayar = subtotal - potongan;
console.log(totalBayar);Code language: JavaScript (javascript)Output:
40500Contoh 2: Menentukan Ganjil atau Genap
let angka = 7;
if (angka % 2 === 0) {
console.log("Genap");
} else {
console.log("Ganjil");
}Code language: JavaScript (javascript)Contoh 3: Counter untuk Website
let count = 0;
function tambah() {
count++;
console.log(count);
}Code language: JavaScript (javascript)Contoh 4: Konversi Suhu (Celsius ke Fahrenheit)
let c = 30;
let f = (c * 9/5) + 32;
console.log(f); // 86Code language: JavaScript (javascript)5. Error yang Sering Terjadi Saat Menggunakan Operator Aritmatika
Mengira bahwa
"5" + 5adalah10
Padahal hasilnya"55".Membagi dengan
0
Ini menghasilkan Infinity, bukan error.Tidak memahami perbedaan increment prefix vs postfix
Ini membuat logika hitungan sering kacau.Menjumlahkan string dan angka tanpa konversi terlebih dahulu
Solusi: pakaiNumber(),parseInt(), atauparseFloat().
Operator Perbandingan JavaScript
Operator perbandingan (comparison operators) digunakan untuk membandingkan dua nilai dalam JavaScript. Hasil dari perbandingan ini selalu berupa boolean:
true→ jika kondisi terpenuhifalse→ jika kondisi tidak terpenuhi
Operator ini sangat penting ketika kamu membuat kondisi menggunakan if, while, validasi form, logika game, dan hampir semua interaksi dinamis di JavaScript.
Jenis-Jenis Operator Perbandingan
Berikut operator perbandingan yang paling sering digunakan:
1. Sama dengan (==)
Membandingkan nilai, tetapi tidak membandingkan tipe data.
5 == "5" // trueCode language: JavaScript (javascript)JavaScript melakukan konversi otomatis (coercion), sehingga "5" dianggap sama dengan 5.
2. Tidak sama dengan (!=)
Mengecek apakah dua nilai berbeda, tanpa memperhatikan tipe data.
5 != "5" // falseCode language: JavaScript (javascript)Karena nilainya sama, hasilnya false.
3. Sama dengan identik (===)
Membandingkan nilai dan tipe data sekaligus.
Ini adalah operator perbandingan terbaik untuk menghindari bug.
5 === "5" // falseCode language: JavaScript (javascript)Karena number berbeda dengan string.
4. Tidak sama dengan identik (!==)
Mengecek apakah nilai atau tipe datanya berbeda.
5 !== "5" // trueCode language: JavaScript (javascript)5. Lebih besar dari (>)
10 > 5 // trueCode language: JavaScript (javascript)6. Lebih kecil dari (<)
3 < 9 // trueCode language: JavaScript (javascript)7. Lebih besar atau sama dengan (>=)
10 >= 10 // trueCode language: JavaScript (javascript)8. Lebih kecil atau sama dengan (<=)
3 <= 9 // trueCode language: JavaScript (javascript)Contoh Penggunaan Dalam Kondisi
Operator perbandingan sering dipakai di if-else.
let umur = 18;
if (umur >= 17) {
console.log("Kamu sudah cukup umur untuk membuat KTP");
} else {
console.log("Belum cukup umur");
}Code language: JavaScript (javascript)Kesalahan yang Sering Terjadi (Wajib Tahu!)
1. Menggunakan == dibanding ===
== melakukan coercion dan bisa bikin hasil tidak terduga:
0 == false // true
"" == 0 // trueCode language: JavaScript (javascript)Karena itu, untuk membangun aplikasi modern biasanya developer memakai ===.
2. Bingung antara assignment dan comparison
= adalah assignment (mengisi nilai).
== dan === adalah comparison.
Kesalahan fatal:
if (x = 5) { ... } // salah, tapi tidak errorCode language: JavaScript (javascript)3. Perbandingan String
String dibandingkan berdasarkan urutan alfabet (Unicode).
"apel" < "jeruk" // true
"Apa" < "apa" // true (huruf besar dianggap lebih kecil)Code language: JavaScript (javascript)4. Perbandingan Dengan Boolean
JavaScript akan mengonversi nilai:
true == 1 // true
false == 0 // trueCode language: JavaScript (javascript)Tapi:
true === 1 // false
false === 0 // falseCode language: JavaScript (javascript)Maka selalu utamakan ===.
5. Tabel Ringkas Operator Perbandingan
| Operator | Nama | Contoh | Hasil |
|---|---|---|---|
| == | Sama nilai | 5 == “5” | true |
| === | Sama nilai & tipe | 5 === “5” | false |
| != | Tidak sama nilai | 5 != “5” | false |
| !== | Tidak sama nilai & tipe | 5 !== “5” | true |
| > | Lebih besar | 7 > 3 | true |
| < | Lebih kecil | 3 < 2 | false |
| >= | Lebih besar atau sama | 5 >= 5 | true |
| <= | Lebih kecil atau sama | 4 <= 3 | false |
Operator Logika JavaScript
Operator logika (logical operators) digunakan untuk menggabungkan beberapa kondisi sekaligus dalam JavaScript. Operator ini sangat penting ketika kamu membuat logika keputusan yang kompleks seperti:
- Validasi form (email harus benar dan password harus sesuai)
- Logika login (username benar atau nomor telepon benar)
- Kondisi di dalam game (nyawa > 0 dan waktu belum habis)
- Filter data (harga < 100 ribu dan stok tersedia)
- Dan ratusan skenario lainnya dalam pengembangan web
Dengan memahami operator logika, kamu bisa menulis kode lebih efisien dan membuat keputusan yang lebih fleksibel.
Jenis-Jenis Operator Logika JavaScript
Ada tiga operator logika utama di JavaScript:
| Operator | Nama | Contoh | ||
|---|---|---|---|---|
&& | AND | A && B | ||
| ` | ` | OR | A | |
! | NOT | !A |
Mari kita bahas satu per satu secara detail.
Operator AND (&&)
Operator && menghasilkan nilai true hanya jika semua kondisi bernilai true.
Jika salah satu kondisi bernilai false → hasilnya langsung false.
Contoh dasar:
let umur = 20;
let punyaKTP = true;
if (umur >= 17 && punyaKTP) {
console.log("Boleh masuk ruang pendaftaran");
}Code language: JavaScript (javascript)Hanya akan dieksekusi jika dua kondisi benar:
- umur ≥ 17
- punyaKTP = true
Tabel Hasil Operator AND
| A | B | A && B |
|---|---|---|
| true | true | true |
| true | false | false |
| false | true | false |
| false | false | false |
Contoh pada validasi form
let emailValid = true;
let passwordValid = false;
if (emailValid && passwordValid) {
console.log("Login berhasil");
} else {
console.log("Email atau password salah");
}Code language: JavaScript (javascript)Short-Circuit Evaluation (penting!)
JavaScript akan berhenti mengevaluasi jika menemukan false terlebih dahulu.
Contoh:
false && console.log("Ini tidak akan pernah dieksekusi");Code language: JavaScript (javascript)Karena kondisi pertama saja sudah false → kode setelahnya tidak dijalankan.
Operator OR (||)
Operator || menghasilkan nilai true jika salah satu kondisi bernilai true.
Jika semua kondisi false → hasilnya false.
Contoh dasar:
let usernameBenar = false;
let nomorHPBenar = true;
if (usernameBenar || nomorHPBenar) {
console.log("Login berhasil");
}Code language: JavaScript (javascript)Login dianggap benar jika salah satu dari dua kondisi terpenuhi.
Contoh pada sistem akses:
let admin = false;
let moderator = true;
if (admin || moderator) {
console.log("Anda memiliki akses ke halaman ini");
}Code language: JavaScript (javascript)Short-Circuit Evaluation untuk OR
Jika menemukan true → JavaScript tidak mengevaluasi kondisi berikutnya.
Operator NOT (!)
Operator NOT (!) digunakan untuk membalik nilai boolean:
true→falsefalse→true
Contoh:
let login = false;
if (!login) {
console.log("Silakan login dulu");
}Code language: JavaScript (javascript)Contoh pada validasi input:
let input = "";
if (!input) {
console.log("Input tidak boleh kosong");
}Code language: JavaScript (javascript)Kenapa kosong menghasilkan true dalam negasi?
Karena string kosong ("") adalah falsy value.
Truthy dan Falsy: Dasar dari Operator Logika
JavaScript tidak hanya memproses boolean, tetapi juga nilai seperti:
0(number)""(string kosong)null(null)undefined(undefined)NaN(not a number)false(boolean)
Semua ini adalah falsy, sedangkan nilai lain adalah truthy.
Contoh:
if (0) console.log("Tidak muncul");
if ("Hello") console.log("Muncul");Code language: JavaScript (javascript)Penggunaan Operator Logika dalam Kondisi Kompleks
Contoh 1 — Login multi-metode**
let email = "user@mail.com";
let hp = "";
let username = "";
if (email || hp || username) {
console.log("Boleh lanjut login");
}Code language: JavaScript (javascript)Jika salah satu punya nilai → dianggap valid.
Contoh 2 — Validasi usia & izin orang tua
let umur = 15;
let izinOrtu = true;
if (umur >= 18 || izinOrtu) {
console.log("Boleh ikut lomba");
}Code language: JavaScript (javascript)Contoh 3 — Filter data produk
let harga = 45000;
let stok = 10;
if (harga < 50000 && stok > 0) {
console.log("Produk siap dibeli");
}Code language: JavaScript (javascript)Penggunaan Operator Logika di JavaScript Modern
JavaScript modern (ES6+) memberikan shortcut umum:
1. Default Value dengan OR (||)
let nama = inputNama || "Guest";Code language: JavaScript (javascript)Jika inputNama kosong → pakai “Guest”.
2. Optional Chaining dengan AND (&&)
let kota = user && user.alamat && user.alamat.kota;Code language: JavaScript (javascript)Tabel Ringkasan Operator Logika
| Operator | Nama | Fungsi | ||
|---|---|---|---|---|
&& | AND | True jika semua kondisi true | ||
| ` | ` | OR | True jika salah satu kondisi true | |
! | NOT | Membalik nilai boolean |
Studi Kasus & Penjelasan Lanjutan
Pada bagian ini kita akan menggabungkan seluruh operator JavaScript yang sudah dipelajari sebelumnya, yaitu:
- Operator Aritmatika
- Operator Perbandingan
- Operator Logika
Semua operator ini adalah fondasi untuk membangun logika program. Tanpa memahami bagaimana operator saling berinteraksi, kamu akan kesulitan membuat fitur yang lebih kompleks seperti:
- Validasi form
- Sistem login
- Perhitungan matematis
- Filter data
- Sistem rating
- Logika game
- Dan banyak lagi
Untuk itu, mari kita perdalam pemahaman melalui studi kasus nyata.
Studi Kasus 1 — Validasi Form Sederhana
Misalkan kamu membuat sebuah form pendaftaran yang memiliki tiga kondisi:
- Nama tidak boleh kosong
- Umur harus ≥ 17
- Jika umur < 17 maka harus ada izin orang tua
Kita kombinasikan operator perbandingan + logika.
Kode:
let nama = "Andi";
let umur = 15;
let izinOrtu = true;
if (!nama) {
console.log("Nama tidak boleh kosong");
} else if (umur >= 17 || izinOrtu) {
console.log("Pendaftaran berhasil");
} else {
console.log("Tidak memenuhi syarat");
}Code language: JavaScript (javascript)Penjelasan:
!namamemeriksa apakah string kosongumur >= 17 || izinOrtumengizinkan dua kondisi: cukup umur atau izin tersedia- Blok else digunakan jika semua kondisi gagal
Logika ini umum dipakai di website pendaftaran event, komunitas, sekolah coding, dan lain-lain.
Studi Kasus 2 — Sistem Diskon Produk
Aturan diskon:
- Jika pembelian ≥ 500.000 → diskon 25%
- Jika pembelian ≥ 250.000 → diskon 15%
- Jika pembelian ≥ 100.000 → diskon 10%
- Selain itu → tanpa diskon
Kode:
let totalBelanja = 380000;
let diskon = 0;
if (totalBelanja >= 500000) {
diskon = 25;
} else if (totalBelanja >= 250000) {
diskon = 15;
} else if (totalBelanja >= 100000) {
diskon = 10;
}
console.log("Diskon: " + diskon + "%");Code language: JavaScript (javascript)Penjelasan:
Kode di atas memanfaatkan operator perbandingan >= dan statement kondisional untuk menentukan diskon.
Studi Kasus 3 — Sistem Login Multi-Metode
Website modern biasanya mengizinkan beberapa cara login:
- Username
- Nomor telepon
Pengguna dianggap bisa login jika minimal satu metode valid.
Kode:
let emailValid = false;
let usernameValid = true;
let hpValid = false;
if (emailValid || usernameValid || hpValid) {
console.log("Login berhasil");
} else {
console.log("Login gagal");
}Code language: JavaScript (javascript)Kenapa OR?
Karena cukup satu true agar hasilnya true.
Demikian pembahasan mengenai operator logika di JavaScript. Mungkin kamu juga bisa membuat studi kasus sendiri untuk memahami bagaimana operator logika bekerja.
Kesimpulan
Operator dalam JavaScript merupakan fondasi utama dalam membangun logika program. Tanpa memahami operator aritmatika, operator perbandingan, dan operator logika, seorang developer akan kesulitan dalam membuat proses otomatisasi, validasi data, interaksi pengguna, perhitungan matematis, hingga fitur pengkondisian yang kompleks.
Dari pembahasan di bagian sebelumnya, kita dapat menarik beberapa poin penting:
1. Operator Aritmatika Menghadirkan Kekuatan Perhitungan
Operator seperti +, -, *, /, %, dan ** membuat JavaScript dapat melakukan berbagai operasi matematis. Ini berguna dalam fitur seperti:
- Hitung total harga
- Sistem poin pengguna
- Skor game
- Mengolah data numerik
Operator ini adalah pondasi untuk segala proses komputasi.
2. Operator Perbandingan Menentukan Logika Pengambilan Keputusan
Operator seperti ==, ===, !=, !==, <, >, <=, dan >= berfungsi untuk membandingkan dua nilai.
Penggunaan paling umum:
- Validasi input
- Penilaian nilai siswa
- Syarat usia
- Filter data (harga, rating, kategori)
- Logika conditional dalam projek nyata
Kunci utamanya: lebih aman memakai === daripada ==.
3. Operator Logika Menghubungkan Banyak Kondisi Sekaligus
Operator logika (&&, ||, !) memungkinkan kita membuat keputusan yang lebih kompleks. Mereka sering digunakan saat:
- Form registrasi dengan banyak syarat
- Sistem otorisasi pengguna
- Filter multi-kriteria
- Logika game
- Pengkondisian bertingkat
Operator logika adalah penghubung antar kondisi agar menghasilkan keputusan final.
4. Semua Operator Bisa Dikombinasikan dan Digunakan Bersama
Dari studi kasus, terlihat bahwa operator sering digunakan secara kombinasi:
- Aritmatika + perbandingan
- Perbandingan + logika
- Logika + string method
- Dan lainnya
Kombinasi ini menghasilkan logika aplikasi yang lengkap. Contoh nyata:
- Validasi form registrasi
- Sistem penilaian otomatis
- Sistem login multi-metode
- Filter e-commerce
5. Pahami Urutan Prioritas Operator
Urutan prioritas sangat penting agar kode berjalan sesuai maksud. Tanda kurung () sangat direkomendasikan untuk menegaskan alur logika.
6. Operator Adalah Fondasi, Bukan Sekadar Materi Pemula
Walaupun terlihat dasar, operator digunakan dalam:
- React, Vue, Svelte
- Backend Node.js
- Database logic
- Sistem autentikasi
- Algoritma dan struktur data
- Game development
- Machine learning berbasis JavaScript
Artinya, siapa pun yang ingin menguasai JavaScript wajib memahami operator secara mendalam.
