Operators

Operators are the verbs of JavaScript — they perform actions on values and variables. JavaScript has a rich set of operators covering arithmetic, comparison, logical operations, and modern shorthand patterns. Mastering operators — especially the critical difference between == and ===, and the nullish coalescing and optional chaining operators — is fundamental to writing correct, expressive JavaScript code.

Operator Categories #

== vs === (Loose vs Strict Equality) #

Modern Logical Operators (ES2020) #

Basic Example #

// ── Arithmetic operators ──────────────────────────────────────────────────
console.log(10 + 3);    // 13
console.log(10 - 3);    // 7
console.log(10 * 3);    // 30
console.log(10 / 3);    // 3.3333...
console.log(10 % 3);    // 1  (remainder / modulo)
console.log(2  ** 10);  // 1024 (exponentiation)

// Increment / decrement
let count = 5;
count++;       // count = 6  (post-increment)
count--;       // count = 5  (post-decrement)
++count;       // count = 6  (pre-increment — returns 6)

// ── String + number coercion trap ────────────────────────────────────────
console.log('5' + 3);      // '53'  ← string concatenation!
console.log('5' - 3);      // 2     ← subtraction coerces string to number
console.log(Number('5') + 3); // 8  ← explicit conversion: safe
console.log(+'5' + 3);        // 8  ← unary + converts to number

// ── Comparison ────────────────────────────────────────────────────────────
console.log(5 === 5);       // true
console.log(5 === '5');     // false — different types
console.log(5 ==  '5');     // true  — loose (avoid!)
console.log(null == undefined);  // true  (one valid use of ==)
console.log(null === undefined); // false

// ── Logical operators ─────────────────────────────────────────────────────
const user = null;
const name = user && user.name;  // null  — short-circuits when user is falsy
console.log(name);

const username = user?.name ?? 'Guest';  // 'Guest' — optional chain + nullish
console.log(username);

// || vs ?? for defaults
const config = { port: 0, debug: false, title: '' };
console.log(config.port  || 3000);   // 3000  ← WRONG — 0 is falsy!
console.log(config.port  ?? 3000);   // 0     ← CORRECT — 0 is not null/undefined
console.log(config.debug || true);   // true  ← WRONG — false is falsy!
console.log(config.debug ?? true);   // false ← CORRECT

// ── Ternary operator ──────────────────────────────────────────────────────
const age   = 20;
const label = age >= 18 ? 'adult' : 'minor';
console.log(label);   // 'adult'

// Nested ternary (use sparingly — prefer if/else for readability)
const score = 75;
const grade = score >= 90 ? 'A'
            : score >= 80 ? 'B'
            : score >= 70 ? 'C'
            : score >= 60 ? 'D' : 'F';
console.log(grade);   // 'C'

// ── Optional chaining ─────────────────────────────────────────────────────
const response = {
  data: {
    user: {
      profile: { avatar: 'img.jpg' }
    }
  }
};

// Without optional chaining — crashes if any level is undefined
// const avatar = response.data.user.profile.avatar;

// With optional chaining — returns undefined if any level is missing
const avatar  = response?.data?.user?.profile?.avatar;
const missing = response?.data?.orders?.[0]?.id;  // undefined — orders doesn't exist
console.log(avatar);   // 'img.jpg'
console.log(missing);  // undefined — no error

How It Works #

Step 1 — The + Operator Checks Types First #

When JavaScript sees +, it checks both operands. If either is a string, it converts the other to a string and concatenates. If both are numbers, it adds them. This is why '5' + 3 gives '53' — the number 3 is converted to the string '3' and appended.

Step 2 — && and || Return Values, Not Booleans #

&& returns the first falsy value it finds, or the last value if all are truthy. || returns the first truthy value, or the last value if all are falsy. This is called short-circuit evaluation — and it means user && user.name returns user if user is falsy, or user.name if user is truthy.

Step 3 — ?? Only Triggers on null/undefined #

Nullish coalescing ?? checks strictly for null or undefined — not all falsy values. This makes it the correct tool for default values when 0, false, or '' are meaningful values that should be preserved.

Step 4 — Optional Chaining Prevents Crashes #

a?.b first checks if a is null or undefined. If so, it returns undefined without throwing an error. If a has a value, it returns a.b normally. This short-circuits the entire chain — a?.b?.c?.d returns undefined at the first null link.

Step 5 — Strict Equality Compares Type and Value #

=== performs no type coercion — it checks both the type and value. 5 === '5' is false because one is a number and the other is a string. This predictable behaviour is why strict equality is the default choice in modern JavaScript.

Real-World Example: Config Parser with Safe Defaults #

// config-parser.js

function parseConfig(userConfig) {
  // ?? preserves 0, false, and '' as valid values
  const port    = userConfig?.port    ?? 3000;
  const debug   = userConfig?.debug   ?? false;
  const timeout = userConfig?.timeout ?? 5000;
  const host    = userConfig?.host    ?? 'localhost';
  const prefix  = userConfig?.apiPrefix ?? '/api/v1';

  // Validate port is a valid number
  if (!Number.isInteger(port) || port < 1 || port > 65535) {
    throw new RangeError(`Invalid port: ${port}. Must be 1–65535`);
  }

  // Short-circuit: only log in debug mode
  debug && console.log('[Config]', { port, host, prefix, timeout });

  return { port, debug, timeout, host, prefix };
}

// Tests
console.log(parseConfig({}));                         // all defaults
console.log(parseConfig({ port: 8080, debug: true })); // custom port
console.log(parseConfig({ port: 0 }));                // port 0 → RangeError
console.log(parseConfig(null));                       // all defaults (null safe)
console.log(parseConfig({ timeout: 0 }));             // timeout 0 preserved via ??

Common Mistakes #

Mistake 1 — Using == instead of === #

❌ Wrong — loose equality causes unexpected matches:

if (userInput == 0) { /* runs for '', false, null, undefined too! */ }

✅ Correct — strict equality checks type and value:

if (userInput === 0) { /* only runs when userInput is exactly the number 0 */ }

Mistake 2 — Using || for defaults when 0 or false are valid #

❌ Wrong — || replaces 0, false, and ” with the default:

const volume = settings.volume || 50;   // volume is 0? Gets replaced with 50!

✅ Correct — ?? only replaces null and undefined:

const volume = settings.volume ?? 50;   // 0 is preserved; only null/undefined → 50

Mistake 3 — Deeply accessing properties without optional chaining #

❌ Wrong — throws TypeError if any intermediate value is null/undefined:

const city = user.address.city;   // TypeError if address is undefined

✅ Correct — optional chaining returns undefined safely:

const city = user?.address?.city ?? 'Unknown';

▶ Try It Yourself

Quick Reference #