JavaScript Operators: A Practical Guide to Every Operator Category

What Is an Operator?

Anoperatoris a symbol that performs an action on values (calledoperands) and produces a result:

let total = 10 + 5;

JavaScript operators fall into6 main categories. Master these, and you can express almost any logic.

Arithmetic Operators — The Calculator

These do math. You know most of them already:

The Two You Don't Know Yet

%(modulus)gives you theremainderafter division:

console.log(10 % 3);
// 1 → 10 ÷ 3 = 3 remainder 1
console.log(10 % 2);
// 0 → divides evenly!

💡Real-world use:% 2is how every programmer checks even/odd numbers. Ifnumber % 2is0→ even. This appears ineverycoding interview ever.

++and--are shortcuts for counting:

let likes = 100;
likes++;
// same as: likes = likes + 1
console.log(likes);
// 101
likes--;
console.log(likes);
// 100

⚠️ The+Double Agent:+does math with numbers butglues strings together. This causes the #1 beginner bug in JavaScript:

script.js

Copy Code Run Online

console.log(5 + 5);
// 10   → math ✅
console.log("5" + 5);
// "55" → string wins! 😱
console.log("5" - 5);
// 0    → but subtraction forces math! 🤯

With+, ifeitherside is a string, JavaScript joins text instead of adding. With-,*,/, it always converts to numbers. Remember this — it will save you hours of debugging.

Assignment Operators — Storing Results

You already know=. Its family lets you update variables in shorthand:

Operator	Example	Long Form
=	x = 10	—
+=	x += 5	x = x + 5
-=	x -= 5	x = x - 5
*=	x *= 2	x = x * 2
/=	x /= 2	x = x / 2
%=	x %= 3	x = x % 3

script.js

Copy Code Run Online

let cartTotal = 500;
cartTotal += 200;
// added an item → 700
cartTotal -= 100;
// applied discount → 600
console.log(cartTotal);
// 600

Beginner warning:=isassignment("put this value in"), NOT comparison ("are these equal?"). Mixing them up is a classic bug — which brings us to…

---

3️⃣ Comparison Operators — Asking Questions

Comparison operatorsask a questionand answer with a boolean:trueorfalse.

Operator	Meaning	Example	Result
===	Strictly equal (valueandtype)	5 === 5	true
!==	Strictly not equal	5 !== 3	true
>	Greater than	10 > 5	true
<	Less than	10 < 5	false
>=	Greater than or equal	10 >= 10	true
<=	Less than or equal	5 <= 3	false

script.js

Copy Code Run Online

let age = 18;
console.log(age >= 18);
// true → allowed to vote ✅
console.log(age < 13);
// false → not a kid's account
console.log(age === "18");
// false! number ≠ string

🥊 == vs === — The Most Famous Question in JavaScript

This isguaranteedto appear in interviews, and it confuses every beginner:

• ==(loose equality)— compares values, butsecretly converts typesfirst
• ===(strict equality)— compares valueAND type, no conversion

script.js

Copy Code Run Online

console.log(5 == "5");
// true  😬 — string "5" was converted to number 5
console.log(5 === "5");
// false ✅ — different types, no conversion
console.log(0 == false);
// true  😬
console.log(0 === false);
// false ✅
console.log(null == undefined);
// true  😬
console.log(null === undefined);
// false ✅

🏆 The Professional Rule

Always use===and!==.Pretend==doesn't exist. Loose equality's hidden conversions cause subtle, nightmare bugs —===means your code does exactly what it says.

4️⃣ Logical Operators — Combining Conditions

Real decisions rarely depend on one question."Is the user logged inANDdo they have a subscription?"Logical operators combine booleans:

Operator	Name	Rule
&&	AND	trueonly ifbothsides are true
||	OR	trueifat least oneside is true
!	NOT	Flips the value:!true→false

AND (&&) — Both Must Pass

script.js

Copy Code Run Online

let isLoggedIn = true;
let hasSubscription = true;
console.log(isLoggedIn && hasSubscription);
// true → show premium content! 🎬
let hasCoupon = false;
console.log(isLoggedIn && hasCoupon);
// false → one failed

OR (||) — Either One Passes

script.js

Copy Code Run Online

let isAdmin = false;
let isModerator = true;
console.log(isAdmin || isModerator);
// true → can edit posts ✅

NOT (!) — The Flipper

script.js

Copy Code Run Online

let isOnline = false;
console.log(!isOnline);
// true → "User is offline"
console.log(!!isOnline);
// false → double-NOT reveals the "truthiness"

🧠 Truth Tables (Worth Memorizing)

A	B	A && B	A || B
true	true	true	true
true	false	false	true
false	true	false	true
false	false	false	false

Memory trick:&&is a strict parent —everyonemust agree.||is an easygoing friend —anyonesaying yes is enough.

---

5️⃣ The Ternary Operator — One-Line Decisions

Theternaryis JavaScript's shortcut for simple if/else decisions — the only operator takingthreeparts:

script.js

Copy Code Run Online

condition ? valueIfTrue : valueIfFalse

script.js

Copy Code Run Online

let age = 20;
let status =(age >= 18) ? "Adult ✅" : "Minor 🧒";
console.log(status);
// "Adult ✅"

Read it as a sentence:"Is age ≥ 18? If yes → 'Adult', otherwise → 'Minor'."

Compare with the long version:

script.js

Copy Code Run Online

// The long way (4 lines)
let status;
if (age >= 18) {
  status = "Adult ✅";
} else {
  status = "Minor 🧒";
}

Ternaries shine forshort, simple choices. If your logic is complex, use a properif/else— unreadable clever code helps no one. (Full lesson on conditionals is coming next in this series!)

---

6️⃣ Modern Operators You'll Meet Soon

These appeared in recent JavaScript versions and you'll see them everywhere in real code:

Optional Chaining (?.) — Safe Property Access

script.js

Copy Code Run Online

const user = {
  name: "Priya"
};
console.log(user.address.city);
// ❌ TypeError — address doesn't exist!
console.log(user.address?.city);
// undefined ✅ — fails gracefully

?.says:"If the thing before me doesn't exist, stop and returnundefinedinstead of crashing."

Nullish Coalescing (??) — Smart Defaults

script.js

Copy Code Run Online

let userInput = null;
let name = userInput ?? "Guest";
console.log(name);
// "Guest" — fallback because input was null

??means:"Use the left value — unless it'snullorundefined, then use the right."

You don't need to master these today — but when you see?.or??in code tutorials, you'll know exactly what they do.

Operator Precedence: What Runs First?

When operators mix, JavaScript follows priority rules — like math's BODMAS:

script.js

Copy Code Run Online

console.log(2 + 3 * 4);
// 14, NOT 20 → multiplication first!
console.log((2 + 3) * 4);
// 20 → parentheses always win

Simplified priority order(high → low):

1. ()parentheses — always first
2. **→*/%→+-(arithmetic)
3. <><=>=→===!==(comparison)
4. &&then||(logical)
5. =assignments — always last

💡 Pro tip:Don't memorize the full table —use parentheses to make your intent obvious.(a > 5) && (b < 10)is clearer than relying on precedence rules, and clear code beats clever code.

---

Common Beginner Mistakes (And Fixes)

❌ Mistake	🔍 What Happens	✅ Fix
if (x = 5)	Assigns5 instead of comparing! Always true	if (x === 5)
5 == "5"in conditions	Hidden type conversion, surprise results	Always use===
"10" + 5	"105"— string gluing	Number("10") + 5→15
10 % 2thinking it gives percent	Returns0(remainder)	%= remainder, not percentage
let x = x + 1before x exists	NaNor error	Initialize first:let x = 0;
Long unreadable ternaries	Code nobody can maintain	Useif/elsefor complex logic

---

Quick Self-Check: Lesson 6 Quiz 🧠

1. What's the output ofconsole.log(17 % 5);?
2. Why doesconsole.log("7" + 3);print"73"butconsole.log("7" - 3);prints4?
3. What's the difference between==and===?
4. IfisAdminisfalseandisModeratoristrue, what doesisAdmin || isModeratorreturn? What aboutisAdmin && isModerator?
5. Rewrite with a ternary: "If score ≥ 50, result is 'Pass', otherwise 'Fail'."

(Answers: 1.2— 17 ÷ 5 = 3 remainder 2 · 2. With+, a string operand triggers concatenation;-has no string meaning, so JavaScript converts and does math · 3.==converts types before comparing;===compares value AND type with no conversion · 4.true(OR needs one true) andfalse(AND needs both) · 5.let result = (score >= 50) ? "Pass" : "Fail";)