Operator JavaScript: Aritmetika, Perbandingan, dan Logika

Operator adalah cara ekspresi bekerja

Setiap baris JavaScript yang tidak sepele dibangun dari operator, yaitu simbol yang mengambil satu atau dua nilai lalu menghasilkan nilai baru. + menjumlahkan, === membandingkan, && menggabungkan boolean, ? : memilih di antara dua nilai. Sebagian besar sudah familier dari bahasa lain; segelintir punya keanehan khas JavaScript yang sebaiknya kamu ketahui sejak awal.

Kita akan membahasnya per kategori, dan diakhiri dengan operator yang paling jarang kamu pakai tapi tetap penting saat dibutuhkan.

Operator aritmetika

Operator dasarnya berperilaku seperti yang kamu harapkan:

console.log(7 + 3);    // 10
console.log(7 - 3);    // 4
console.log(7 * 3);    // 21
console.log(7 / 3);    // 2.3333...
console.log(7 % 3);    // 1   (remainder)
console.log(7 ** 3);   // 343 (exponent)

Beberapa hal yang perlu diperhatikan:

• / selalu melakukan pembagian floating-point. 7 / 2 hasilnya 3.5, bukan 3. Pakai Math.floor(7 / 2) atau Math.trunc(7 / 2) kalau kamu ingin bilangan bulat.
• % adalah sisa bagi, bukan modulo matematika yang sebenarnya. Ia mempertahankan tanda operand kiri: -7 % 3 hasilnya -1, bukan 2.
• + punya dua arti. Kalau salah satu sisinya string, ia menyambung string alih-alih menjumlahkan: "3" + 1 hasilnya "31". Penjelasan lebih lanjut sebentar lagi.

Increment dan decrement

let count = 5;
count++;           // post-increment: count is now 6
console.log(count);

let other = ++count;  // pre-increment: count becomes 7 first, then assigned
console.log(other, count);

Perbedaan count++ dan ++count hanya berpengaruh saat kamu memakai nilai ekspresinya di baris yang sama. Sebagai pernyataan yang berdiri sendiri, keduanya melakukan hal yang sama. Kebanyakan panduan gaya lebih menyukai count += 1 karena lebih jelas.

Operator + punya dua kepribadian

Yang satu ini menjebak semua orang setidaknya sekali:

console.log(1 + 2);         // 3
console.log("1" + 2);       // "12"
console.log(1 + "2");       // "12"
console.log("price: " + 5); // "price: 5"

Kalau salah satu operand berupa string, + menjadi penyambung string dan mengonversi sisi lainnya menjadi string. Semua operator aritmetika lain bekerja ke arah sebaliknya: mereka mengonversi string menjadi angka:

console.log("10" - 2);   // 8
console.log("10" * 2);   // 20
console.log("10" / "2"); // 5

Pelajarannya: saat menyusun string, utamakan template literal (`price: ${5}`). Saat berhitung, pastikan input-mu benar-benar angka: Number(x) atau parseInt(x, 10) mengonversinya secara eksplisit.

Operator perbandingan

Perbandingan menghasilkan boolean. Ada dua jenis: strict dan loose.

console.log(5 === 5);    // true
console.log(5 === "5");  // false  (different types)
console.log(5 == "5");   // true   (== coerces)
console.log(5 !== "5");  // true
console.log(5 != "5");   // false

=== dan !== bersifat strict: nilai dan tipenya harus sama. == dan != mengonversi tipe sebelum membandingkan, yang menimbulkan kejutan seperti null == undefined bernilai true atau [] == false bernilai true. Pakai === dan !== sebagai default. Satu-satunya pengecualian yang umum adalah x == null, jalan pintas praktis untuk "apakah x bernilai null atau undefined?"

Operator urutan bekerja seperti yang kamu harapkan pada angka, dan secara alfabetis pada string:

console.log(3 < 5);         // true
console.log(5 >= 5);        // true
console.log("apple" < "banana");  // true
console.log("Z" < "a");           // true (uppercase sorts before lowercase)

Perbandingan string didasarkan pada kode karakter, jadi bersifat case-sensitive. Kalau kamu butuh pengurutan yang ramah manusia, pakai String.prototype.localeCompare.

Operator logika

&& (AND), || (OR), dan ! (NOT) menggabungkan boolean, tapi perilakunya lebih menarik daripada aljabar boolean murni.

console.log(true && false);  // false
console.log(true || false);  // true
console.log(!true);          // false

Uniknya: && dan || tidak menghasilkan true atau false. Mereka mengembalikan salah satu operand-nya. && mengembalikan nilai falsy pertama, atau nilai terakhir kalau semuanya truthy. || mengembalikan nilai truthy pertama, atau nilai terakhir kalau semuanya falsy.

console.log("hi" && 42);      // 42     (both truthy, returns last)
console.log(0 && "hi");       // 0      (first falsy)
console.log("" || "fallback"); // "fallback"
console.log("name" || "anon"); // "name"

Itulah kenapa kamu akan melihat pola seperti const displayName = user.name || "Guest": ambil hal pertama yang tidak kosong. Ringkas, tapi hati-hati: || menganggap 0, "", dan false sebagai pemicu nilai cadangan. Kalau nilai-nilai itu sah untukmu, pakai ?? (dibahas di bawah).

Kedua operator ini juga melakukan short-circuit: kalau sisi kiri sudah menentukan jawabannya, sisi kanan tidak pernah dijalankan.

const user = null;
// Safe - the right side is skipped because user is falsy.
user && user.sendEmail();

Operator nullish coalescing ??

?? mirip ||, tapi hanya terpicu oleh null atau undefined, bukan oleh 0, "", atau false.

const count = 0;

console.log(count || 10);   // 10  (0 is falsy, so fallback wins)
console.log(count ?? 10);   // 0   (0 isn't nullish, so kept)

const name = undefined;
console.log(name ?? "Anon"); // "Anon"

Pakai ?? saat nilai yang sah bisa saja falsy: hitungan, string kosong, false yang disengaja. Pakai || saat semua nilai falsy berarti "tidak ada." Dalam kode modern, ?? adalah default yang lebih aman untuk nilai opsional dengan default yang tidak null.

Operator assignment

= melakukan assignment. Bentuk gabungannya menyatukan assignment dengan operator lain:

let x = 10;
x += 5;    // x = x + 5  → 15
x -= 3;    // 12
x *= 2;    // 24
x /= 4;    // 6
x %= 4;    // 2
x **= 3;   // 8
console.log(x);

Ada juga operator logical assignment, yaitu ||=, &&=, dan ??=, yang hanya melakukan assignment kalau nilai saat ini memenuhi suatu kondisi:

const config = { timeout: 0, retries: null };

config.timeout ??= 5000;   // only assigns if null/undefined; 0 stays
config.retries ??= 3;      // null, so assigned
config.host ||= "localhost"; // undefined is falsy, so assigned

console.log(config);

Operator ini praktis untuk mengisi nilai default tanpa pernyataan if yang bertele-tele.

Operator ternary

condition ? a : b adalah versi ekspresi dari if/else. Ia mengembalikan a saat kondisinya truthy, dan b kalau tidak:

const age = 20;
const status = age >= 18 ? "adult" : "minor";
console.log(status);

const count = 1;
const label = count === 1 ? "item" : "items";
console.log(`${count} ${label}`);

Ternary unggul untuk memilih nilai secara singkat. Begitu bersarang, ia langsung sulit dibaca. Kalau kamu mendapati dirimu menulis a ? b : c ? d : e, beralihlah ke if/else atau lookup object.

typeof dan instanceof

typeof mengembalikan string yang menjelaskan tipe operand-nya:

console.log(typeof 42);         // "number"
console.log(typeof "hi");       // "string"
console.log(typeof true);       // "boolean"
console.log(typeof undefined);  // "undefined"
console.log(typeof null);       // "object"  ← historical bug, can't be fixed
console.log(typeof []);         // "object"
console.log(typeof function(){}); // "function"

Dua jebakan yang perlu diingat: typeof null hasilnya "object" (bug dari tahun 1995 yang kini permanen), dan array juga melaporkan "object". Pakai Array.isArray(x) untuk array dan x === null untuk null.

instanceof mengecek apakah sebuah object dibuat dari constructor tertentu:

class Dog {}
const rex = new Dog();

console.log(rex instanceof Dog);     // true
console.log(rex instanceof Object);  // true (every object is)
console.log([] instanceof Array);    // true

Spread dan rest memakai ... yang sama

Kamu akan melihat ... di dua tempat. Sebagai spread, ia membentangkan iterable menjadi elemen-elemen terpisah:

const nums = [1, 2, 3];
const more = [0, ...nums, 4];
console.log(more);                // [0, 1, 2, 3, 4]

const user = { name: "Ada" };
const full = { ...user, age: 30 };
console.log(full);                // { name: "Ada", age: 30 }

console.log(Math.max(...nums));   // 3

Sebagai rest, ia mengumpulkan beberapa nilai ke dalam satu array, biasanya di parameter fungsi atau destructuring:

function sum(...numbers) {
    return numbers.reduce((a, b) => a + b, 0);
}

console.log(sum(1, 2, 3, 4));  // 10

const [first, ...others] = [10, 20, 30, 40];
console.log(first, others);    // 10 [20, 30, 40]

Sintaksnya sama, tugasnya berlawanan. Spread membongkar; rest mengumpulkan. Mana yang mana ditentukan oleh konteks: di pemanggilan fungsi atau literal, ia melakukan spread; di daftar parameter atau pola destructuring, ia mengumpulkan.

Operator precedence (kalau ragu, pakai tanda kurung)

Operator punya urutan prioritas yang menentukan mana yang dijalankan lebih dulu saat kamu mencampurnya. Perkalian mengalahkan penjumlahan, perbandingan mengalahkan logika, dan seterusnya:

console.log(1 + 2 * 3);          // 7,  not 9
console.log((1 + 2) * 3);        // 9
console.log(true || false && false);  // true, because && binds tighter than ||

Tabel lengkapnya panjang, dan tidak ada yang hafal semuanya. Satu kebiasaan sederhana sudah mencakup 99% kasus: saat kamu mencampur operator dan tidak yakin urutannya, tambahkan tanda kurung. Kodenya jadi lebih mudah dibaca dan tidak bergantung pada ingatan pembacanya.

Operator bitwise (jarang yang kamu butuhkan)

Supaya lengkap: &, |, ^, ~, <<, >>, dan >>> bekerja pada representasi biner bilangan bulat. Kamu akan melihatnya di kode grafis, protokol tingkat rendah, dan sesekali di API yang memakai bitmask flag.

console.log(5 & 3);   // 1   (0101 & 0011 = 0001)
console.log(5 | 3);   // 7
console.log(5 ^ 3);   // 6
console.log(~5);      // -6
console.log(1 << 3);  // 8

Satu trik yang umum tapi patut dipertanyakan: n | 0 memotong angka menjadi bilangan bulat 32-bit, yang dulu sering disalahgunakan sebagai Math.trunc yang lebih cepat. Jangan lakukan itu: Math.trunc lebih jelas dan berfungsi untuk angka di luar rentang 32-bit.

Berikutnya: if/else

Operator menghasilkan nilai; if/else memakai nilai itu untuk memilih cabang kode yang akan dijalankan. Sebagian besar yang akan kamu lakukan dengan operator perbandingan dan logika di atas adalah memasukkan hasilnya ke percabangan, dan itulah topik halaman berikutnya.