Setelah belajar variabel dan tipe data di artikel sebelumnya, sekarang waktunya kita main-main sama operator. Operator itu alat buat ngoperasikan data — tambah, kurang, bandingin, ngegabungin, dan banyak lagi.
Tanpa operator, variabel cuma data yang diam. Operator yang bikin data itu bergerak dan ngasilin sesuatu.
1. Apa Itu Operator dan Expression?
Sebelum masuk ke jenis-jenis operator, penting buat ngerti dua istilah dulu.
Operator itu simbol yang nyatahin operasi tertentu — kayak +, -, ==, &&. Operator bekerja sama dengan operand (nilai yang dioperasikan).
Expression itu kombinasi operator dan operand yang ngasilin suatu nilai.
// Ini expression
5 + 3
// Operator: +
// Operand: 5 dan 3
// Hasil expression: 8
Gampangnya: kalau ada simbol yang ngoperasikan angka atau variabel, itu operator. Kalau seluruh kombinasinya ngasilin satu nilai, itu expression.
2. Arithmetic Operator
Ini operator yang paling familiar — buat aritmatika dasar. Kayak kalkulator, tapi di kode.
| Operator | Nama | Contoh | Hasil |
|---|---|---|---|
+ |
Penjumlahan | 5 + 3 |
8 |
- |
Pengurangan | 10 - 4 |
6 |
* |
Perkalian | 6 * 7 |
42 |
/ |
Pembagian | 20 / 4 |
5 |
% |
Modulus (sisa bagi) | 17 % 5 |
2 |
** |
Eksponen (pangkat) | 2 ** 8 |
256 |
let a = 10;
let b = 3;
console.log(a + b); // 13
console.log(a - b); // 7
console.log(a * b); // 30
console.log(a / b); // 3.3333...
console.log(a % b); // 1
console.log(a ** b); // 1000
Tip: Operator % (modulus) sering dipake buat cek angka ganjil/genap. Kalau angka % 2 === 0, berarti genap.
let angka = 7;
if (angka % 2 === 0) {
console.log("Genap");
} else {
console.log("Ganjil");
}
// Output: Ganjil
3. String Operator
Di JavaScript, operator + juga bisa dipake buat menggabungkan string (concatenation). Satu simbol, dua kegunaan — tergantung data yang dioperasikan.
let namaDepan = "Budi";
let namaBelakang = "Santoso";
let namaLengkap = namaDepan + " " + namaBelakang;
console.log(namaLengkap); // "Budi Santoso"
Tapi kalau salah satunya angka, hati-hati — JavaScript otomatis convert angka jadi string:
let harga = 50;
let pesan = "Harga: Rp" + harga;
console.log(pesan); // "Harga: Rp50"
Ini aman buat string, tapi bisa jebak kalau Anda mau nambah angka:
console.log("5" + 3); // "53" — jadi string, bukan 8!
console.log(5 + "3"); // "53" — sama juga
console.log("5" + "3"); // "53" — string + string = string
Best practice: Kalau mau operasi angka, jangan campur sama string di satu expression. Paksa tipenya dulu:
let angka1 = "5";
let angka2 = "3";
console.log(Number(angka1) + Number(angka2)); // 8
4. Comparison Operator
Comparison operator dipake buat membandingkan dua nilai. Hasilnya selalu true atau false.
4.1 Equality dan Inequality
| Operator | Nama | Contoh | Hasil |
|---|---|---|---|
== |
Equality (loose) | "5" == 5 |
true |
=== |
Equality (strict) | "5" === 5 |
false |
!= |
Inequality (loose) | "5" != 5 |
false |
!== |
Inequality (strict) | "5" !== 5 |
true |
Ini salah satu jebakan paling sering di JavaScript.
console.log(5 == "5"); // true — loose equality, type di-coerce
console.log(5 === "5"); // false — strict, beda type = false
console.log(null == undefined); // true
console.log(null === undefined); // false
== bakal otomatis convert tipe data sebelum dibandingin (type coercion). === nggak — kalau tipenya beda, langsung false.
Best practice: Selalu pake === dan !==. Loose equality sering bikin bug yang susah ditemukan.
4.2 Relational
| Operator | Nama | Contoh | Hasil |
|---|---|---|---|
> |
Lebih besar | 5 > 3 |
true |
< |
Lebih kecil | 5 < 3 |
false |
>= |
Lebih besar atau sama | 5 >= 5 |
true |
<= |
Lebih kecil atau sama | 5 <= 3 |
false |
let umur = 17;
console.log(umur >= 18); // false
console.log(umur < 21); // true
5. Logical Operator
Logical operator dipake buat nggabungin atau membalikkan kondisi boolean. Sangat penting buat control flow (yang bakal kita bahas di artikel selanjutnya).
| Operator | Nama | Contoh | Hasil |
|---|---|---|---|
&& |
AND | true && false |
false |
\|\| |
OR | true \|\| false |
true |
! |
NOT | !true |
false |
AND (&&)
Kedua sisi harus true supaya hasilnya true.
let umur = 20;
let punyaKTP = true;
console.log(umur >= 18 && punyaKTP); // true
console.log(umur >= 18 && false); // false
OR (||)
Cukup satu sisi true supaya hasilnya true.
let hari = "Minggu";
console.log(hari === "Sabtu" || hari === "Minggu"); // true
console.log(hari === "Senin" || hari === "Minggu"); // true
NOT (!)
Membalikkan nilai boolean — dari true jadi false, atau sebaliknya.
let isLogin = true;
console.log(!isLogin); // false
let isAdmin = false;
console.log(!isAdmin); // true
Short-circuit Evaluation
JavaScript juga punya fitur short-circuit. Artinya kalau hasilnya sudah bisa dipastikan dari sisi pertama, sisi kedua gak dieksekusi.
// AND: kalau sisi pertama false, langsung false (sisi kedua gak dieksekusi)
console.log(false && console.log("Ini gak akan jalan")); // false
// OR: kalau sisi pertama true, langsung true (sisi kedua gak dieksekusi)
console.log(true || console.log("Ini juga gak akan jalan")); // true
Fitur ini sering dipake buat default value:
let nama = "";
let displayName = nama || "Guest";
console.log(displayName); // "Guest"
6. Assignment Operator
Assignment operator dipake buat ngasih nilai ke variabel. Yang paling basic sudah kita pakai: =.
| Operator | Contoh | Sama dengan |
|---|---|---|
= |
x = 5 |
x = 5 |
+= |
x += 3 |
x = x + 3 |
-= |
x -= 2 |
x = x - 2 |
*= |
x *= 4 |
x = x * 4 |
/= |
x /= 2 |
x = x / 2 |
%= |
x %= 3 |
x = x % 3 |
**= |
x **= 2 |
x = x ** 2 |
let x = 10;
x += 5; // x sekarang 15
x -= 3; // x sekarang 12
x *= 2; // x sekarang 24
x /= 4; // x sekarang 6
x **= 3; // x sekarang 216
console.log(x); // 216
Assignment shorthand kayak += dan -= itu lebih efisien dan lebih mudah dibaca dari x = x + 5. Kebiasaan pake yang shorthand ini bakal bikin kode Anda lebih clean.
7. Ternary Operator
Ternary operator itu versi singkat dari if...else. Bentuknya:
kondisi ? nilaiJikaTrue : nilaiJikaFalse
let umur = 20;
let status = umur >= 18 ? "Dewasa" : "Anak-anak";
console.log(status); // "Dewasa"
Kalau ditulis pakai if...else, bentuknya sama:
let status;
if (umur >= 18) {
status = "Dewasa";
} else {
status = "Anak-anak";
}
Lebih ringkas kan? Tapi jangan sampai abuse — kalau kondisinya kompleks, lebih baik pakai if...else biar kode tetap mudah dibaca.
Tip: Ternary operator paling cocok buat kondisi sederhana — kayak cek login, ganjil/genap, atau nge-set default value.
let isLoggedIn = true;
let pesan = isLoggedIn ? "Selamat datang!" : "Silakan login";
let harga = 0;
let label = harga > 0 ? `Rp${harga}` : "Gratis";
8. Operator Precedence
Ketika ada beberapa operator dalam satu expression, JavaScript ngikuti precedence (prioritas) tertentu. Yang paling tinggi dijalankan duluan, kayak aturan hitung di matematika (kali/dulu, tambah belakangan).
Beberapa yang harus diingat:
| Prioritas | Operator | Keterangan |
|---|---|---|
| 1 | () |
Kurung — paling tinggi |
| 2 | ** |
Eksponen |
| 3 | *, /, % |
Perkalian, pembagian, modulus |
| 4 | +, - |
Penjumlahan, pengurangan |
| 5 | ==, ===, !=, !== |
Equality |
| 6 | && |
AND |
| 7 | \|\| |
OR |
| 8 | = |
Assignment |
let hasil = 2 + 3 * 4;
console.log(hasil); // 14, bukan 20 (kali duluan)
let hasil2 = (2 + 3) * 4;
console.log(hasil2); // 20 (paksa tambah duluan pakai kurung)
Best practice: Kalau ragu soal precedence, paksa pakai kurung. Lebih jelas dan gak bikin bingung orang lain yang baca kode Anda.
9. Recap
| Konsep | Penjelasan Singkat |
|---|---|
| Arithmetic | +, -, *, /, %, ** — operasi matematika |
| String | + untuk menggabungkan string |
| Comparison | ==, ===, !=, !==, >, <, >=, <= |
| Logical | &&, \|\|, ! — operator boolean |
| Assignment | =, +=, -=, *=, /=, %=, **= |
| Ternary | kondisi ? true : false — singkat dari if/else |
| Precedence | Urutan eksekusi operator |
| Best practice | Selalu pake ===, hindari loose equality |
Penutup
Operator itu tulang punggung logika di JavaScript. Dari sekadar nambah angka sampai ngebandingin kondisi login — semuanya pakai operator.
Di artikel selanjutnya, kita bakal bahas Control Flow — bagaimana pakai operator dan kondisi buat bikin program yang bisa bikin keputusan dan ngulang sesuatu. Itu di mana JavaScript mulai keliatan beneran powerful.
