HomeAll ToolsCoursesBlogAbout
Beginner⏱️ 7 min📘 Topic 4 of 13

➕ JavaScript Operators — Arithmetic, Logical & The Tricky Ones

Complete guide to JavaScript operators — arithmetic, comparison, logical, assignment, spread, nullish coalescing, optional chaining. With code examples and interview Q&A.

Operators are symbols that perform actions on values. JavaScript has a lot — here are the ones that matter.

➕ Arithmetic

+ - * / % ** ++ -- (the ** is exponent: 2 ** 3 === 8)

🟰 Comparison

=== !== > < >= <=. Prefer === over ==.

🔁 Logical

  • && — AND (returns first falsy or last)
  • || — OR (returns first truthy or last)
  • ! — NOT
  • ?? — Nullish coalescing (only falls through on null/undefined, not 0 or '')

✨ Modern essentials

  • ?. — Optional chaining: user?.address?.city won't crash if user is null
  • ??= — Nullish assign: config.port ??= 3000
  • ... — Spread: [...arr1, ...arr2]

💡 Truthy/Falsy

Falsy values: false, 0, -0, 0n, '', null, undefined, NaN. Everything else is truthy — including [] and {}.

💻 Code Examples

?? vs ||

const port1 = 0 || 3000;   // 3000  (0 is falsy)
const port2 = 0 ?? 3000;   // 0     (0 is not nullish)

const name = '' ?? 'Anon'; // ''    (empty string is not nullish)
Output:
?? is stricter — only null/undefined trigger the fallback.

Optional chaining

const user = null;
console.log(user?.profile?.email); // undefined (no crash)
console.log(user.profile.email);    // TypeError
Output:
undefined
TypeError: Cannot read properties of null

Ternary for quick branches

const status = age >= 18 ? 'adult' : 'minor';
Output:
Compact if/else expression.

⚠️ Common Mistakes

  • Using || for defaults when 0 or '' are valid values — use ?? instead.
  • Stacking ternaries deeply — it becomes unreadable. Use if/else.
  • Forgetting that ++ before vs after a variable behaves differently (++x increments first, x++ returns then increments).

🎯 Interview Questions

Real questions asked at top product and service-based companies.

Q1.What's the difference between || and ??Beginner
|| returns the right side for any falsy value (0, '', false, null, undefined, NaN). ?? returns the right side ONLY for null/undefined. Use ?? when 0 or '' are valid values.
Q2.What does the ternary operator do?Beginner
It's a 3-part conditional expression: `condition ? valueIfTrue : valueIfFalse`. Useful for short inline branches.
Q3.Explain optional chaining (?.)Intermediate
It short-circuits to undefined if any link in the chain is null or undefined, instead of throwing. Works on properties (a?.b), methods (a?.()) and arrays (a?.[0]).
Q4.What is the spread operator and where can you use it?Intermediate
... expands an iterable. Use it to clone/merge arrays ([...a, ...b]), clone objects ({...obj}), pass array as function args (fn(...arr)) and gather rest parameters.
Q5.What does `'5' + 3 - 2` return and why?Advanced
'51'. The + operator with a string concatenates: '5' + 3 → '53'. Then '53' - 2 forces numeric coercion: 53 - 2 = 51. Returns the number 51.

🧠 Quick Summary

  • === over == always.
  • ?? falls back only on null/undefined; || falls back on any falsy.
  • Optional chaining ?. prevents 'cannot read property of undefined'.
  • Spread ... clones and merges arrays/objects.
  • Memorize the 8 falsy values.