JavaScript Operators

1. Operators & Unary Type Conversion

An operator is a reserved symbol that performs an operation on one or more operands (values or variables) and produces a result.

• Unary Operators: Act on a single operand (e.g., Unary Plus +x, Logical NOT !x, typeof x).
• Binary Operators: Act on two operands (e.g., a + b, a * b, a === b).
• Ternary Operator: Acts on three operands (conditional condition ? a : b).

// Unary Plus vs parseInt:
console.log(+"42");          // 42 (Number)
console.log(+true);          // 1 (Booleans coerce: true -> 1, false -> 0)
console.log(+false);         // 0
console.log(+"");            // 0 (Empty string coerces to 0)
console.log(+"hello");       // NaN (Cannot convert to number)

// Exponentiation operator (ES2016):
console.log(5 ** 2);         // 25

42
1
0
0
NaN
25

2. Strict Equality (===) vs Loose Equality (==)

JavaScript provides two comparison operators with fundamentally different evaluation algorithms:

• Strict Equality (===): Follows the Strict Equality Comparison Algorithm. It checks data types first. If the types differ, it returns false immediately without modifying any value.
• Loose Equality (==): Follows the Abstract Equality Comparison Algorithm. If the operands have different types, the JavaScript engine performs implicit type coercion behind the scenes, converting strings and booleans to numbers before comparing.

5 === "5"          // ❌ false (number vs string)
0 === false        // ❌ false (number vs boolean)
null === undefined // ❌ false (different types)

5 == "5"          // ⚠️ true (coerces "5" -> 5)
0 == false        // ⚠️ true (coerces false -> 0)
null == undefined // ⚠️ true (special language rule)

3. Logical Operators & Short-Circuit Evaluation (&&, ||)

A critical concept in JavaScript: logical operators && and || do not necessarily return a boolean (true or false). Instead, they return the actual operand value that determined the outcome.

Short-circuiting means the engine stops evaluating as soon as the final result is guaranteed:

"Alex" || "Default" // ➔ "Alex"
"" || "Guest"        // ➔ "Guest"

true && "Show UI"   // ➔ "Show UI"
false && "Show UI"  // ➔ false

// 1. Fallback pattern with ||
let username = "";
let greeting = username || "Anonymous User";
console.log(greeting); // "Anonymous User"

// 2. React Guard Pattern with &&
const user = { isLoggedIn: true, name: "Anshuman" };
const uiHeader = user.isLoggedIn && `Welcome back, ${user.name}!`;
console.log(uiHeader); // "Welcome back, Anshuman!"

Anonymous User
Welcome back, Anshuman!

4. Nullish Coalescing (??) vs Logical OR (||)

Why was the Nullish Coalescing Operator (??) added in ES2020?

The || operator treats all falsy values (0, false, "", NaN, null, undefined) as missing. This creates critical bugs when 0 is a completely valid value (such as a game score, zero balance, or quantity).

In contrast, ?? checks only for nullish values: strictly null and undefined.

let userScore = 0;
let finalScore = userScore || 50;
console.log(finalScore);
// ➔ 50 (Bug! Overwrote valid 0 score)

let userScore = 0;
let finalScore = userScore ?? 50;
console.log(finalScore);
// ➔ 0 (Correct! Preserved legitimate 0)

5. Safe Deep Navigation: Optional Chaining (?.)

In JavaScript, attempting to access a property on null or undefined throws a runtime exception: TypeError: Cannot read properties of undefined, which crashes web applications.

Optional Chaining (?.) safely short-circuits property access. If the value before ?. is null or undefined, JavaScript stops evaluation and immediately returns undefined without throwing an error.

const student = {
    name: "Alex",
    address: {
        city: "Bangalore"
    }
};

// 1. Safe Property Access
console.log(student.address?.city);     // "Bangalore"
console.log(student.contact?.phone);    // undefined (Safe! Does NOT crash)

// 2. Combining Optional Chaining (?.) with Nullish Coalescing (??)
const email = student.contact?.email ?? "No email provided";
console.log(email);                     // "No email provided"

// 3. Safe Method Calls (?.)
console.log(student.calculateGPA?.());  // undefined (Does not crash if method missing)

// 4. Safe Array Indexing (?.[index])
const userList = null;
console.log(userList?.[0]);             // undefined

Bangalore
undefined
No email provided
undefined
undefined

6. Modern Logical Assignment Operators (??=, ||=, &&=)

Introduced in ES2021, logical assignment operators combine short-circuiting logic with variable assignment:

// Practical Example: Setting default configuration
const serverConfig = {
    port: 8080,
    timeout: null
};

serverConfig.port ??= 3000;    // Remains 8080 (already defined)
serverConfig.timeout ??= 5000; // Updated to 5000 (was null)

console.log(serverConfig);     // { port: 8080, timeout: 5000 }

{ port: 8080, timeout: 5000 }

7. Operators Interview Deck

Test your understanding of JavaScript operator quirks and tricky interview evaluation scenarios:

const count = 0;
console.log(count || 50, count ?? 50);

console.log("5" == 5, "5" === 5);

const settings = {};
console.log(settings.theme?.fontSize);

let score = 0;
const result = false && (score += 10);
console.log(result, score);

let port = 8080;
port ??= 3000;
console.log(port);

8. Practice Challenge