JavaScript Operators: Complete Practical Guide from Basic to Modern ES2024+

An operator is a specialized mathematical or logical symbol that performs operations on one, two, or three operands to produce a calculated result. JavaScript provides a rich arsenal of operators, ranging from classical arithmetic to modern ES2020+ safety features.

1. Arithmetic & Assignment Operators

Used to perform mathematical computations and store updated values in memory:

// Classical Arithmetic
let a = 15, b = 4;
console.log(a + b);  // Addition: 19
console.log(a - b);  // Subtraction: 11
console.log(a * b);  // Multiplication: 60
console.log(a / b);  // Division: 3.75
console.log(a % b);  // Modulus (Remainder): 3
console.log(a ** b); // Exponentiation (15^4): 50625

// Prefix vs. Postfix Increment
let count = 5;
console.log(count++); // Postfix: Outputs 5 (increments to 6 after)
console.log(++count); // Prefix: Increments to 7 first, then outputs 7

// Compound Assignment
let balance = 1000;
balance += 250; // balance = balance + 250 (1250)
balance *= 2;   // balance = balance * 2 (2500)

2. Comparison Operators (Loose vs. Strict)

3. Logical Operators & Short-Circuit Evaluation

Logical operators (&&, ||, !) power conditional decision-making and support high-performance short-circuit evaluation:

// AND (&&): Returns first falsy value, or last truthy if all true
console.log(true && "Active"); // "Active"
console.log(null && "Active"); // null (Short-circuits immediately!)

// OR (||): Returns first truthy value, or last falsy if all false
let defaultTheme = "dark";
let userTheme = ""; // Empty string is falsy!
let activeTheme = userTheme || defaultTheme;
console.log(activeTheme); // "dark"

// NOT (!): Inverts boolean truthiness
console.log(!true);  // false
console.log(!!"JS"); // true (Double negation forces boolean type)

4. Modern Safety Operators: Nullish Coalescing (??) & Optional Chaining (?.)

Introduced in ES2020, these two operators eliminate thousands of runtime crashes in production web applications:

// 1. NULLISH COALESCING (??) vs. LOGICAL OR (||)
let userConfig = {
    animationSpeed: 0, // 0 is a completely VALID setting!
    showAvatar: false  // false is a completely VALID setting!
};

// BUG WITH ||: 0 is falsy, so it incorrectly overwrites with 300!
let speedWithOr = userConfig.animationSpeed || 300;
console.log("With ||:", speedWithOr); // 300 (WRONG!)

// SAFE WITH ??: Only falls back for null or undefined!
let speedWithNullish = userConfig.animationSpeed ?? 300;
console.log("With ??:", speedWithNullish); // 0 (CORRECT!)

// 2. OPTIONAL CHAINING (?.)
const user = {
    profile: {
        name: "Vikram"
        // address is undefined
    }
};

// Old code crashed: user.profile.address.city -> TypeError!
// Modern Safe Syntax:
let city = user.profile?.address?.city ?? "City Not Provided";
console.log(city); // "City Not Provided" (Zero crashes!)

5. Ternary Conditional Operator ( ? : )

The only operator in JavaScript that takes three operands, providing a concise alternative to multi-line if..else blocks:

let marks = 78;
let result = (marks >= 50) ? "Passed with Flying Colors" : "Needs Improvement";
console.log(result); // "Passed with Flying Colors"