JavaScript Operators: Null Coerced to 0 by == Causes Outage

Every single JavaScript program that has ever been written — from a simple age checker to a full e-commerce platform — relies on operators. They're the invisible machinery behind every calculation, every if/else decision, every loop condition, and every value assignment. Without operators, your code would just be a pile of data with nothing happening to it. They are, quite literally, how JavaScript thinks.

Before operators existed in programming languages, doing anything useful with data was painfully complex. Operators solve a fundamental problem: how do you tell a computer to compare two values, combine them, or use one to modify another? Operators give you a clean, readable shorthand for all of that. Instead of writing a paragraph of instructions to add two numbers, you just write a + b.

By the end of this article, you'll know every major category of JavaScript operator, understand exactly when and why to use each one, spot the classic mistakes that trip up beginners (and even some experienced devs), and be able to confidently answer operator-related questions in a JavaScript interview. Let's build this up piece by piece.

How JavaScript Operators Actually Break Production

JavaScript operators are symbols that perform operations on operands, but their behavior is defined by the ECMAScript specification's abstract operations — not intuition. The == operator, for instance, triggers the Abstract Equality Comparison algorithm, which coerces null to 0 when compared to a number. This is not a bug; it's the spec. The core mechanic is that == invokes type conversion before comparison, unlike === which checks both value and type without coercion. In practice, this means null == 0 evaluates to true, while null === 0 is false. This coercion path is defined in step 11 of the algorithm: if one operand is null and the other is a number, null becomes +0. The key property is that coercion is asymmetric — it only happens when the operands are of different types. This matters in real systems because a simple null check like if (value == 0) will silently treat null as zero, masking bugs until the null propagates. Use === by default to avoid this; reserve == only when you explicitly want coercion, and even then, prefer explicit conversion like Number(value) for clarity. In production, this nuance has caused outages when null values from a database were compared to 0 in a conditional, leading to incorrect logic branches.

Arithmetic Operators — Making JavaScript Do the Math

Arithmetic operators are the most intuitive place to start because you already know them from school. They perform mathematical operations on numbers. JavaScript gives you the standard four — addition (+), subtraction (-), multiplication (), and division (/) — plus two more that often surprise beginners: modulus (%) and exponentiation (*).

The modulus operator is the one people forget exists. It gives you the remainder after division, not the result of division. So 10 % 3 gives you 1, because 3 goes into 10 three times with 1 left over. This is incredibly useful for things like figuring out if a number is odd or even, or cycling through items in a list.

Exponentiation () is the power operator. 2 8 means '2 to the power of 8', which is 256. You'll use this whenever you need to calculate areas, compound interest, or work with any kind of exponential growth.

JavaScript also has the ++ (increment) and -- (decrement) operators which add or subtract exactly 1 from a value. They look small but they're everywhere — especially inside loops.

Beware: JavaScript's floating-point arithmetic can produce unexpected results. 0.1 + 0.2 is 0.30000000000000004, not 0.3. This isn't a JavaScript bug — it's how IEEE 754 floating-point works in every language. For financial calculations, always use integers (cents) or a dedicated decimal library.

// --- Arithmetic Operators in JavaScript ---

const applePrice = 1.50;      // price of one apple
const orangePrice = 2.00;     // price of one orange
const basketSize = 12;        // total items in basket
const appleCount = 5;         // number of apples bought

// + Addition: total cost of one apple and one orange
const combinedPrice = applePrice + orangePrice;
console.log('Combined price:', combinedPrice); // 3.5

// - Subtraction: how much more an orange costs than an apple
const priceDifference = orangePrice - applePrice;
console.log('Price difference:', priceDifference); // 0.5

// * Multiplication: total cost of 5 apples
const totalAppleCost = applePrice * appleCount;
console.log('Total apple cost:', totalAppleCost); // 7.5

// / Division: average price per item
const averagePrice = (applePrice + orangePrice) / 2;
console.log('Average price:', averagePrice); // 1.75

// % Modulus: how many apples are left over if we pack them into groups of 3
const applesLeftOver = appleCount % 3;
console.log('Leftover apples after packing in 3s:', applesLeftOver); // 2

// ** Exponentiation: a 3x3 storage crate holds this many items
const crateCapacity = 3 ** 2;
console.log('Crate capacity:', crateCapacity); // 9

// ++ Increment: one more apple added to the count
let currentAppleCount = appleCount; // let because we're about to change it
currentAppleCount++;
console.log('Apple count after adding one:', currentAppleCount); // 6

// -- Decrement: one apple removed
currentAppleCount--;
console.log('Apple count after removing one:', currentAppleCount); // 5

Assignment Operators — Storing and Updating Values Efficiently

You already know the basic assignment operator: =. It takes the value on the right and stores it in the variable on the left. But JavaScript has a whole family of compound assignment operators that combine assignment with arithmetic in one step, and they'll make your code much cleaner once you know them.

Compound assignment operators like +=, -=, *=, /=, and %= are shortcuts. Instead of writing score = score + 10, you write score += 10. It means exactly the same thing but it's shorter, less repetitive, and reads more naturally. Senior developers use these constantly.

Think of it like this: if you have a savings account with £200 in it and you deposit £50, you don't empty the account and refill it with £250. You just add £50 to what's already there. Compound assignment operators work the same way — they modify what's already in the variable rather than replacing it from scratch.

There's also the nullish assignment operator (??=) which only assigns a value if the variable is currently null or undefined. It's a newer addition but incredibly useful for setting default values safely.

A subtle danger: using assignment operators inside conditions (e.g., if (score = 10)) is a classic bug. The single = always assigns, not compares. Linters catch this — but they only work if you run them. Always prefer deliberate assignment before the condition.

// --- Assignment Operators in JavaScript ---

// Basic assignment: store the starting score
let playerScore = 0;
console.log('Starting score:', playerScore); // 0

// += Add and assign: player earns 10 points
playerScore += 10;
console.log('After earning 10 points:', playerScore); // 10

// += again: player earns a bonus 25 points
playerScore += 25;
console.log('After 25 point bonus:', playerScore); // 35

// -= Subtract and assign: player loses 5 points (penalty)
playerScore -= 5;
console.log('After 5 point penalty:', playerScore); // 30

// *= Multiply and assign: double score powerup activated!
playerScore *= 2;
console.log('After double score powerup:', playerScore); // 60

// /= Divide and assign: score halved due to wrong answer
playerScore /= 2;
console.log('After score halved:', playerScore); // 30

// %= Modulus and assign: only the remainder of score divided by 7 remains (a weird game rule!)
playerScore %= 7;
console.log('After modulus penalty:', playerScore); // 2  (30 divided by 7 = 4 remainder 2)

// **= Exponentiation and assign: score raised to the power of 3
playerScore **= 3;
console.log('After exponent powerup:', playerScore); // 8  (2 to the power of 3)

// ??= Nullish assignment: only sets a value if the variable is null or undefined
let playerName = null;
playerName ??= 'Guest Player'; // playerName is null, so this WILL assign
console.log('Player name:', playerName); // 'Guest Player'

let returningPlayer = 'Alex';
returningPlayer ??= 'Guest Player'; // returningPlayer has a value, so this will NOT assign
console.log('Returning player name:', returningPlayer); // 'Alex' — unchanged

Comparison Operators — How JavaScript Makes Decisions

Comparison operators are the foundation of every decision your code makes. They compare two values and always return either true or false. This true/false result is what powers every if statement, every loop condition, and every ternary expression.

JavaScript has two equality operators and that trips everyone up: == (loose equality) and === (strict equality). The difference is huge. Loose equality (==) attempts to convert both values to the same type before comparing — so '5' == 5 is true because JavaScript quietly converts the string '5' into the number 5. Strict equality (===) compares both the value AND the type — so '5' === 5 is false because one is a string and one is a number.

For almost all situations, you should use === (strict equality). It does exactly what you think it does with no surprise type conversions happening behind the scenes. The == operator's type coercion behaviour is a notorious source of bugs.

The same logic applies to inequality: != (loose) vs !== (strict). Always prefer !== in your code.

Beyond equality, you have >, <, >=, <=. These work across strings too — JavaScript compares strings lexicographically by Unicode code point. That means '2' > '10' is true because '2' has a higher code point than '1'. Be careful comparing strings that represent numbers. Always convert to number first: Number('2') > Number('10').

// --- Comparison Operators in JavaScript ---
// Comparison operators always return true or false

const userAge = 20;
const minimumAge = 18;
const seniorAge = 65;
const inputAge = '20'; // this is a STRING, not a number — important!

// == Loose equality: compares values, NOT types (type coercion happens!)
console.log('Loose equality (number vs string):', userAge == inputAge); // true — JS converts '20' to 20

// === Strict equality: compares value AND type (no type coercion)
console.log('Strict equality (number vs string):', userAge === inputAge); // false — different types!
console.log('Strict equality (number vs number):', userAge === 20); // true — same value AND type

// != Loose inequality
console.log('Loose not-equal:', userAge != inputAge); // false — they ARE loosely equal

// !== Strict inequality (use this one!)
console.log('Strict not-equal:', userAge !== inputAge); // true — different types, so they are NOT strictly equal

// > Greater than
console.log('Is user old enough?', userAge > minimumAge); // true (20 > 18)

// < Less than
console.log('Is user under senior age?', userAge < seniorAge); // true (20 < 65)

// >= Greater than or equal to
console.log('Is user at least minimum age?', userAge >= minimumAge); // true (20 >= 18)

// <= Less than or equal to
console.log('Is user at or below senior age?', userAge <= seniorAge); // true (20 <= 65)

// Real-world usage: checking entry eligibility
if (userAge >= minimumAge) {
  console.log('Access granted — user meets the age requirement.');
} else {
  console.log('Access denied — user is too young.');
}

Logical Operators — Combining Conditions Like a Pro

Logical operators let you combine multiple conditions into one expression. Instead of nesting a dozen if statements inside each other, you can chain conditions together cleanly on a single line. There are three core logical operators: && (AND), || (OR), and ! (NOT).

Think of && like a bouncer at a club with two rules: 'You must be over 18 AND have ID.' Both conditions must be true for you to get in. If either one fails, you're not getting through. That's &&.

The || operator is more lenient: 'You can enter if you have a VIP pass OR a regular ticket.' Just one condition needs to be true. That's ||.

The ! operator simply flips a boolean: !true is false and !false is true. It's useful for toggling states, like switching a dark mode setting on and off.

JavaScript also has two powerful modern operators: ?? (nullish coalescing) which returns the right side only if the left is null or undefined, and the optional chaining operator ?. which safely accesses properties without crashing when something is null. These two are modern essentials.

A critical nuance: && and || evaluate to one of their operands, not strictly to true or false. This is called short-circuit evaluation. For example, 0 && true evaluates to 0 (not false), and 'hello' || false evaluates to 'hello' (not true). This behavior is often used for conditional rendering or fallbacks — but it can trip you up when you expect a boolean.

// --- Logical Operators in JavaScript ---

const hasValidTicket = true;
const hasVipPass = false;
const isAccountVerified = true;
const userAge = 17;
const minimumAge = 18;
let isDarkModeOn = false;

// && AND: BOTH conditions must be true
// Can user enter? They need a valid ticket AND must be old enough
const canEnterEvent = hasValidTicket && (userAge >= minimumAge);
console.log('Can enter event (ticket + age):', canEnterEvent); // false — age check fails

// What if the user WAS old enough?
const isOldEnough = true;
const canEnterIfOlderUser = hasValidTicket && isOldEnough;
console.log('Can older user enter with ticket:', canEnterIfOlderUser); // true — both pass

// || OR: at least ONE condition must be true
// Can user access premium content? They need EITHER a ticket OR a VIP pass
const canAccessPremium = hasValidTicket || hasVipPass;
console.log('Can access premium content:', canAccessPremium); // true — ticket alone is enough

// ! NOT: flips the boolean value
console.log('Is dark mode currently OFF?', !isDarkModeOn); // true — it's currently false, so !false = true

// Toggle dark mode using !
isDarkModeOn = !isDarkModeOn; // flip it from false to true
console.log('Dark mode after toggle:', isDarkModeOn); // true

// ?? Nullish Coalescing: use default only when value is null or undefined
const userDisplayName = null;
const displayName = userDisplayName ?? 'Anonymous User'; // null triggers the default
console.log('Display name:', displayName); // 'Anonymous User'

const savedUsername = 'techdev_99';
const safeDisplayName = savedUsername ?? 'Anonymous User'; // has a value, no default needed
console.log('Safe display name:', safeDisplayName); // 'techdev_99'

// ?. Optional chaining: safely access a property that might not exist
const userProfile = null;
// Without ?. this would CRASH with: TypeError: Cannot read properties of null
const profileCity = userProfile?.address?.city;
console.log('Profile city (safe access):', profileCity); // undefined — no crash!

// Combining && and || in a real check
const canPostComment = isAccountVerified && (hasValidTicket || hasVipPass);
console.log('Can post comment (verified + ticket/VIP):', canPostComment); // true

Ternary and Conditional Operators — Compact Decision Making

The ternary operator (? :) is a concise way to write an if-else statement on a single line. Its syntax is: condition ? exprIfTrue : exprIfFalse. It returns one of two values based on the truthiness of the condition.

It's not just a shorthand — it's an expression, meaning it can be used directly in assignments, return statements, or even inside other expressions. This makes it incredibly powerful for short conditional logic.

However, misuse is common. Nesting ternaries (ternary inside ternary) quickly becomes unreadable. A general rule: if the logic fits on one line and is obvious, use a ternary. If you start thinking 'else if', use a regular if-else or a switch statement instead.

The ternary operator is also a common source of bugs when developers forget that ? : returns a value and accidentally use assignment (=) inside one of the branches. Also, operator precedence can trip you up — wrap the ternary in parentheses if combined with other operators.

// --- Ternary and Conditional Operators ---

const userAge = 17;
const minimumAge = 18;

// Ternary: condition ? ifTrue : ifFalse
const canAccess = userAge >= minimumAge ? 'Access granted' : 'Access denied';
console.log(canAccess); // 'Access denied'

// Using ternary in a return statement
function getGreeting(isMorning) {
  return isMorning ? 'Good morning' : 'Good evening';
}
console.log(getGreeting(true));  // 'Good morning'
console.log(getGreeting(false)); // 'Good evening'

// Nested ternary (use sparingly!)
const score = 85;
const grade = score >= 90 ? 'A' : score >= 80 ? 'B' : score >= 70 ? 'C' : 'D';
console.log('Grade:', grade); // 'B'

// Common pitfall: forgetting precedence — parentheses clarify
const x = 5, y = 10;
const result = (x > y) ? x : y; // result = 10 (max)
// Without parentheses around the condition, expression might be parsed incorrectly

// Avoid: assignment inside ternary
// const a = condition ? (b = 5) : (b = 10); // confusing, prefer if-else

The Comma Operator and Other Odd Operators — Using the Less Common Ones

JavaScript has a few lesser-known operators that you won't use every day, but when you need them, they're indispensable. The comma operator (,) evaluates both operands and returns the second one. It's often used in for loops: for (let i = 0, j = 10; i < j; i++, j--). Outside loops, it can make code cryptic — use sparingly.

The delete operator removes a property from an object. It returns true if successful, false otherwise (it doesn't free memory directly). delete only works on object properties, not on variables or array elements (it leaves a hole).

The typeof operator returns a string indicating the type of an operand. Common traps: typeof null returns 'object' (a long-standing bug), and typeof array returns 'object' too. Use Array.isArray() to check arrays.

The instanceof operator checks whether an object is an instance of a specific constructor. It works across prototype chains, but fails across different execution contexts (e.g., iframes).

The grouping operator ( ) simply controls precedence in expressions. Use it liberally to make your intent clear.

// --- Odd Operators in JavaScript ---

// Comma operator: evaluates both, returns second
let a = (1, 2, 3);
console.log('a is:', a); // 3 (last value)

// Often used in for loops
for (let i = 0, j = 5; i < j; i++, j--) {
  console.log(i, j);
}
// Outputs: 0 5, 1 4, 2 3

// delete operator
const user = { name: 'Alice', age: 30 };
delete user.age;
console.log(user); // { name: 'Alice' }

// delete on array — leaves hole
const arr = [1, 2, 3];
delete arr[1];
console.log(arr); // [1, empty, 3] — length still 3

// typeof operator
console.log(typeof 'hello'); // 'string'
console.log(typeof 42);      // 'number'
console.log(typeof true);    // 'boolean'
console.log(typeof null);    // 'object' — known bug
console.log(typeof undefined); // 'undefined'
console.log(typeof []);      // 'object' — use Array.isArray()

// instanceof operator
const date = new Date();
console.log(date instanceof Date); // true
console.log(date instanceof Object); // true (Date extends Object)

// Grouping operator - clarify precedence
const result = (2 + 3) * 4; // 20, without parentheses would be 2 + 12 = 14
console.log(result); // 20

Why Bitwise Operators Exist (And When to Use Them)

Bitwise operators are the chainswords of JavaScript. They treat numbers as sequences of 32-bit integers, operating on individual binary digits. Why does ECMAScript keep them around? Because in 2024, they're one of the fastest ways to flag, mask, or toggle permissions in a flat object. A single bitwise AND (&) checks if a user has 'write' privileges faster than three Object.hasOwn() calls. The real trick is knowing when NOT to use them. If you're using bitwise OR (|) to floor numbers, write num | 0 and move on. But if you're building a permissions system, a 32-bit mask with bitwise AND and XOR (^) replaces arrays of strings and makes garbage collection smile. ES2024 didn't deprecate them because they solve one hard problem well: packed boolean flags in a single integer. Use them for state machines, enum flags, or color channels. Avoid them in CRUD apps where readability matters more than saving four bytes.

// io.thecodeforge
const READ = 1;    // 001
const WRITE = 2;   // 010
const EXECUTE = 4; // 100

let userPerms = READ | WRITE; // 011 = 3

// Check if user can write
if (userPerms & WRITE) {
  console.log('Can write');
}

// Toggle execute bit
userPerms ^= EXECUTE; // now 111 = 7

// Turn off read
userPerms &= ~READ;   // now 110 = 6

console.log(userPerms); // 6

Unary Operators: The Silent Performance Killers

A unary operator takes one operand and does something messy. The + and - signs aren't just for math — they force type coercion. +'42' returns 42. +true returns 1. That sounds helpful until you realize implicit coercion is why your shopping cart total showed 1000.0000000000001. In ES2024, the unary plus is a hammer that looks for nails in all the wrong places. The typeof operator is unary and returns a string — but typeof null === 'object' is a bug that will never be fixed. The delete operator removes object properties and returns a boolean. It's also why your array length looks wrong after you delete array[3] — it leaves a hole. Never use delete on an array. Use splice() or filter(). The void operator evaluates any expression and returns undefined. It's perfect for preventing link navigation in old-school HTML, but void(0) in modern frameworks is a code smell. Use unary operators intentionally. Every +string should have a comment explaining why parseFloat() wasn't the choice.

// io.thecodeforge
const priceInput = '29.99';
const tax = +priceInput * 0.08;

console.log(tax); // 2.3992 — fine for now

const badArray = ['a', 'b', 'c'];
delete badArray[1];
console.log(badArray.length); // 3 — still 3!
console.log(badArray);        // ['a', empty, 'c']

// typeof trap
console.log(typeof null);     // 'object' — always
console.log(typeof undefined); // 'undefined'

// void to discard
const result = void expensiveFunction();
console.log(result); // undefined

The Optional Chaining (?.) and Nullish Coalescing (??) Operators — Why They Saved Our Pager

Optional chaining (?.) and nullish coalescing (??) are the two operators that reduced my on-call alerts by 40%. Before ES2020, accessing deeply nested properties required guard clauses like if (user && user.profile && user.profile.email). One missed guard and you get TypeError: Cannot read properties of undefined. The ?. operator short-circuits: if the left side is null or undefined, the expression returns undefined immediately and stops evaluating the chain. user?.profile?.email returns undefined if any link is missing — no crash. The ?? operator handles the same nullish values differently than ||. 0 || 'default' returns 'default' because 0 is falsy. 0 ?? 'default' returns 0 because nullish coalescing only treats null and undefined as missing. This distinction saves your zero-indexed arrays and empty string states. In ES2024, you can also use ?.() for optional function calls and ?.[] for optional property access with dynamic keys. Production rule: always use ?? for default values when 0 or '' are valid states. Use ?. for any property access chain longer than two levels.

// io.thecodeforge
const apiResponse = {
  user: null,
  config: {
    retries: 0,
    timeout: 3000
  }
};

// Before: crash risk
// const email = apiResponse.user.email; // TypeError

// After: safe
const email = apiResponse?.user?.email;
console.log(email); // undefined

// Nullish coalescing vs OR
const retries = apiResponse.config?.retries ?? 10;
const retriesBad = apiResponse.config?.retries || 10;

console.log(retries);     // 0 — correct
console.log(retriesBad);  // 10 — bug!

// Optional function call
const logger = null;
logger?.('hello'); // no crash, no call