JS Operators

JavaScript Operators: Arithmetic, Comparison, & Logical

Operators perform operations on one or more operands (variables or values). JavaScript provides arithmetic, comparison, logical, assignment, bitwise, and ternary operators, along with modern operators like nullish coalescing (??) and optional chaining (?.).

Operator Precedence & Categories

flowchart TD
    Operators["JavaScript Operators"] --> Arith["Arithmetic (+, -, *, /, %, **)"]
    Operators --> Comp["Comparison (===, !==, >, <, >=, <=)"]
    Operators --> Logic["Logical (&&, ||, !, ??)"]
    Operators --> Ternary["Ternary Condition (? :)"]

Key Operator Types Comparison

Practical Code Example

// Demonstrating modern JavaScript operators

// 1. Strict vs Loose Comparison
console.log("--- Comparison Operators ---");
console.log(`Loose ("10" == 10): ${"10" == 10}`);   // true
console.log(`Strict ("10" === 10): ${"10" === 10}`); // false

// 2. Nullish Coalescing (??) vs Logical OR (||)
const userSettings = {
  theme: "",          // Falsy string
  retryCount: 0,      // Falsy number
  timeout: null       // Nullish
};

// Logical OR treats "" and 0 as falsy and replaces them
const themeOR = userSettings.theme || "light";            // "light"
const countOR = userSettings.retryCount || 5;             // 5 (Unexpected fallback!)

// Nullish Coalescing preserves valid falsy values ("" and 0)
const themeNullish = userSettings.theme ?? "light";       // ""
const countNullish = userSettings.retryCount ?? 5;        // 0 (Correct!)
const timeoutNullish = userSettings.timeout ?? 3000;      // 3000

console.log(`Nullish Theme: "${themeNullish}", Retry: ${countNullish}, Timeout: ${timeoutNullish}`);

// 3. Optional Chaining (?.) with Ternary Operator
const account = {
  profile: {
    getAvatar: () => "https://avatar.example/user.png"
  }
};

const avatarUrl = account?.profile?.getAvatar ? account.profile.getAvatar() : "default.png";
console.log(`Avatar URL: ${avatarUrl}`);

Best Practices & Gotchas

• Always Use Strict Equality (=== / !==): Loose equality (==) relies on complex type coercion rules that cause obscure logic bugs.
• Prefer ?? Over || for Numeric or String Defaults: Use ?? when 0 or "" are valid user input values.
• Chain ?. Safely: Avoid over-chaining ?. everywhere; use it only when deep properties may genuinely be null or undefined.

Self-Check Challenge

Evaluate the output of:

1. 0 || 100
2. 0 ?? 100