JavaScript Operator Precedence

⭐ JavaScript Operator Precedence — Which Operator Runs First & Why It Matters

If you’ve ever written a JavaScript expression and thought “Why is this giving a weird result?” 👉 Operator Precedence is usually the reason.

This post will give you crystal-clear clarity on:

• what operator precedence is
• how JavaScript decides which operator executes first
• real examples (simple → tricky → interview-level)
• common mistakes developers make
• best practices to avoid bugs forever

We’ll start with the main point, then go deep and wide.

---

🚀 Main Point (Understand This First)

👉 Operator precedence determines the order in which operators are evaluated in an expression when parentheses are NOT used.

JavaScript does NOT evaluate expressions strictly left to right. It follows a predefined precedence table.

let result = 2 + 3 * 4;
console.log(result); // 14 (NOT 20)

Why?

• * has higher precedence than +
• So 3 * 4 runs first → 12
• Then 2 + 12 → 14

---

🧠 Simple Mental Model (Very Important)

Think of precedence like power levels:

Higher power operator runs first Lower power operator waits

And parentheses () beat everything.

---

🔹 Operator Precedence vs Associativity (DO NOT CONFUSE)

Concept	Meaning
Precedence	Which operator runs first
Associativity	Direction of execution when precedence is same

Example:

let x = 10 - 5 - 2;

Both - have same precedence, so associativity applies:

• - is left to right
• (10 - 5) - 2 = 3

---

🧮 High-Level Operator Precedence Order (Must Know)

From highest → lowest (simplified):

1️⃣ () – Parentheses 2️⃣ ++, -- (postfix) 3️⃣ !, typeof, unary + - 4️⃣ ** (exponentiation) 5️⃣ *, /, % 6️⃣ +, - 7️⃣ <, >, <=, >=, in, instanceof 8️⃣ ==, !=, ===, !== 9️⃣ && 🔟 || 1️⃣1️⃣ ?? (nullish coalescing) 1️⃣2️⃣ ?: (ternary) 1️⃣3️⃣ = += -= etc.

👉 Lower number = higher priority

---

🧪 Step-by-Step Examples (Very Important)

Example 1: Arithmetic

let result = 5 + 10 * 2;

Execution:

1. 10 * 2 = 20
2. 5 + 20 = 25

---

Example 2: Unary vs Binary

let x = -5 ** 2;

Execution:

• ** has higher precedence than unary -
• Equivalent to -(5 ** 2)

console.log(x); // -25

To change it:

let x = (-5) ** 2; // 25

---

Example 3: Comparison + Logical

console.log(5 > 3 && 10 > 20);

Order:

1. 5 > 3 → true
2. 10 > 20 → false
3. true && false → false

---

Example 4: Logical OR vs AND

true || (false && false);

Order:

• && runs first

true || (false && false);
true || false;
true;

---

🟣 Operator Precedence with Assignment

Assignment operators have very low precedence.

let x;
x = 5 + 2 * 3;

Execution:

1. 2 * 3 = 6
2. 5 + 6 = 11
3. x = 11

---

🟢 Ternary Operator Precedence

let result = 10 > 5 ? "Yes" : "No";

Ternary has lower precedence than most operators, but higher than assignment.

Complex example:

let x = 5 + 5 > 9 ? 100 : 200;

Execution:

1. 5 + 5 = 10
2. 10 > 9 → true
3. result → 100

---

🟡 Nullish Coalescing (??) Precedence (VERY IMPORTANT)

?? is lower than arithmetic but higher than assignment.

❌ Invalid:

let x = null || undefined ?? "default"; // SyntaxError

✔ Fix with parentheses:

let x = (null || undefined) ?? "default";

---

🔴 Common Mistakes Developers Make

❌ Mistake 1: Assuming Left-to-Right Always

2 + 3 * 4; // NOT 20

---

❌ Mistake 2: Forgetting Parentheses

let price = discount + tax * amount;

Better:

let price = discount + tax * amount;

---

❌ Mistake 3: Logical Short-Circuit Confusion

let value = false && expensiveFunction();

👉 expensiveFunction() never runs

---

🧩 Operator Precedence with Short-Circuiting

AND (&&)

Stops when first false found.

false && anything; // stops immediately

OR (||)

Stops when first true found.

true || anything; // stops immediately

---

🧠 Interview-Level Tricky Questions

Q1:

console.log(1 + 2 + "3");

Execution:

1. 1 + 2 = 3
2. 3 + "3" = "33"

---

Q2:

console.log("3" * 2 + 1);

Execution:

1. "3" * 2 = 6
2. 6 + 1 = 7

---

Q3:

let a = 10;
let b = a++ + ++a;

Step-by-step:

• a++ → 10 (a becomes 11)
• ++a → 12
• result → 22

---

✅ Best Practices (Write Bug-Free Code)

✔ Use parentheses for clarity ✔ Never rely on memory for complex precedence ✔ Break complex expressions into steps ✔ Avoid writing “clever” one-liners ✔ Readability > smartness

Bad:

let x = (a && b) || (c && d);

Good:

let x = (a && b) || (c && d);

---

🧾 Final Cheat Rule (Remember This Forever)

If you’re unsure which operator runs first — use parentheses.

Parentheses:

• improve readability
• prevent bugs
• make your intention clear
• save debugging time

---

🎯 Final Summary

Concept	Key Idea
Operator precedence	Order of execution
Parentheses	Highest priority
Associativity	Direction when same precedence
Logical operators	Short-circuit
Assignment	Runs last
Best practice	Use parentheses

---

If you want, next I can cover:

• Complete Operator Precedence Table (Interview Ready)
• Tricky MCQs on Operator Precedence
• Difference between precedence & evaluation order
• Real bugs caused by precedence (real-world cases)

Just tell me the next topic 🚀