JavaScript Operators – Complete Guide with Examples

let a = 10, b = 3;

console.log(a + b);    // 13  — addition
console.log(a - b);    // 7   — subtraction
console.log(a * b);    // 30  — multiplication
console.log(a / b);    // 3.333... — division
console.log(a % b);    // 1   — remainder (modulo)
console.log(a ** b);   // 1000 — exponentiation (10³)

// Increment and decrement
let x = 5;
console.log(x++);      // 5  — post-increment: returns THEN adds
console.log(x);        // 6
console.log(++x);      // 7  — pre-increment: adds THEN returns
console.log(x--);      // 7  — post-decrement: returns THEN subtracts
console.log(x);        // 6

let n = 10;

n += 5;    console.log(n);   // 15  — same as n = n + 5
n -= 3;    console.log(n);   // 12  — same as n = n - 3
n *= 2;    console.log(n);   // 24  — same as n = n * 2
n /= 4;    console.log(n);   // 6   — same as n = n / 4
n %= 4;    console.log(n);   // 2   — same as n = n % 4
n **= 3;   console.log(n);   // 8   — same as n = n ** 3

// Logical assignment (ES2021)
let user = null;
user ??= "Guest";            // assigns only if null or undefined
console.log(user);           // "Guest"

console.log(5 > 3);     // true
console.log(5 < 3);     // false
console.log(5 >= 5);    // true
console.log(5 <= 4);    // false

// == (loose equality) — performs type coercion
console.log(5 == "5");   // true  — string coerced to number
console.log(0 == false); // true  — false coerced to 0
console.log(null == undefined); // true

// === (strict equality) — NO type coercion
console.log(5 === "5");   // false — different types
console.log(0 === false); // false — different types
console.log(null === undefined); // false

// != and !==
console.log(5 != "5");    // false — loose: they're equal after coercion
console.log(5 !== "5");   // true  — strict: different types

// && (AND) — returns first falsy value, or last value if all truthy
console.log(true && true);     // true
console.log(true && false);    // false
console.log("hello" && 42);    // 42 (both truthy, returns last)
console.log(0 && "hello");     // 0  (0 is falsy, short-circuits)

// || (OR) — returns first truthy value, or last value if all falsy
console.log(false || true);    // true
console.log(0 || "default");   // "default"
console.log("user" || "anonymous"); // "user"

// ! (NOT) — negates the boolean value
console.log(!true);            // false
console.log(!0);               // true
console.log(!"");              // true

// ?? returns right side only if left is null or undefined
// (unlike || which triggers for ALL falsy values like 0 and "")
let count = 0;
console.log(count || 10);   // 10 — 0 is falsy, so || uses right side
console.log(count ?? 10);   // 0  — 0 is not null/undefined, so ?? keeps it

let name = null;
console.log(name ?? "Anonymous");   // "Anonymous"

// ?. (optional chaining) — safely access nested properties
const user = { profile: { name: "Alice" } };
const noUser = null;

console.log(user?.profile?.name);    // "Alice"
console.log(noUser?.profile?.name);  // undefined (no error!)

// Useful with methods too
console.log(user?.greet?.());         // undefined (no error if greet doesn't exist)

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

// Nested ternary (use sparingly — can hurt readability)
const score = 75;
const grade = score >= 90 ? "A"
            : score >= 80 ? "B"
            : score >= 70 ? "C"
            : "F";
console.log(grade);     // "C"