🧮 Operator Precedence and Expressions

What Is an Expression?

An expression is any piece of code that produces a value. That's the whole definition — and it covers a lot of ground:

Expressions nest: price * quantity + tax is an expression made of smaller expressions. The moment you combine operators, JavaScript needs rules to decide the order — and that's what precedence and associativity are.

💡 Analogy — a recipe. A chef follows an order: cream the butter and sugar before folding in flour. Swap the steps and you get a different cake. JavaScript follows precedence the same way — combine the same ingredients in a different order and you get a different result.

Operator Precedence

Precedence decides which operator binds more tightly when several appear in one expression. Higher precedence runs first — exactly like "multiplication before addition" from school math.

Here is a working subset, from highest to lowest. You don't need to memorise all of it; you need to know the shape and where the surprises live.

console.log(2 + 3 * 4);   // 14 — * binds tighter than +
console.log((2 + 3) * 4); // 20 — parentheses win

console.log(5 > 3 && 2 < 4); // true — comparisons run before &&
console.log(-2 * 4);          // -8  — unary - binds before *

// The one everyone forgets: && is higher than ||
console.log(true || false && false); // true — reads as true || (false && false)

Associativity

When two operators have the same precedence, associativity breaks the tie. Most operators are left-associative (evaluated left to right); a few important ones — assignment and exponentiation — are right-associative.

// Left-associative: subtraction and division go left → right
console.log(10 - 5 - 2); // 3   → ((10 - 5) - 2)
console.log(20 / 5 / 2); // 2   → ((20 / 5) / 2)

// A subtle trap: relational operators are left-associative too
console.log(3 > 2 > 1);   // false! → (3 > 2) > 1 → true > 1 → 1 > 1 → false

// Right-associative: assignment chains resolve right → left
let a, b, c;
a = b = c = 5;           // c = 5, then b = 5, then a = 5

// Right-associative: exponentiation
console.log(2 ** 3 ** 2); // 512 → 2 ** (3 ** 2) = 2 ** 9

💡 Analogy — assembly-line direction. Left-associative is a standard line moving left to right; each station takes the piece from its left. Right-associative runs in reverse — a station waits for the one on its right to finish before it acts. Assignment chains work that way: the far-right value is produced first.

Grouping with Parentheses

Parentheses have the highest precedence of all. They do two jobs: they override the default order, and — just as importantly — they document your intent so the next reader (often future-you) doesn't have to recall the whole table.

// Override the default order
console.log(2 + 3 * 4);     // 14
console.log((2 + 3) * 4);   // 20

console.log(true || false && false);   // true
console.log((true || false) && false); // false — forces || first

// Document intent, even when not strictly required
const a = 5, b = 10, c = 15;
const clear = a + (b * c) - (a / b); // identical result, obvious reading

Expressions & Side Effects

An expression's job is to produce a value, but some expressions also change the world along the way — that change is a side effect. Assignment, increment/decrement, and function calls can all carry side effects.

// Assignment is an expression AND a side effect
let x = 5;
let y = (x = 10); // side effect: x becomes 10; value: 10
console.log(x, y); // 10 10

// Increment side effects depend on prefix vs postfix
let counter = 0;
const sum = increment() + increment() + increment();
function increment() { counter += 1; return counter; }
console.log(counter); // 3
console.log(sum);     // 1 + 2 + 3 = 6

💡 Analogy — ripples in a pond. The splash is the expression's value; the ripples spreading outward are the side effects. Ripples can reach shores you didn't intend to touch — which is why hiding side effects inside a big expression makes bugs hard to trace.

Precedence Pitfalls

These are the mistakes precedence actually causes in production code. Seeing them once makes them easy to catch in review.

1. && binds tighter than ||

let name = '';
const allowEmpty = false;
const defaultName = 'Guest';

// Intended: "use name, or if empty fall back to Guest"
let displayName = name || allowEmpty && defaultName;
// Actually parsed as: name || (allowEmpty && defaultName)
// → '' || (false && 'Guest') → '' || false → false
console.log(displayName); // false — a bug!

// Fix with parentheses (or better, restructure)
displayName = name || defaultName;
console.log(displayName); // 'Guest'

2. = (assign) where you meant === (compare)

let x = 5;
if (x = 10) {           // assigns 10, which is truthy — always runs
  console.log('oops');  // this line always executes, and x is now 10
}
// Meant: if (x === 10) { ... }

3. Relational chaining doesn't mean what math means

// You cannot write "is 5 between 1 and 10" as 1 < 5 < 10 directly
console.log(1 < 5 < 10);  // true, but by accident: (1 < 5) < 10 → true < 10 → 1 < 10
console.log(10 < 5 < 1);  // ALSO true! (10 < 5) < 1 → false < 1 → 0 < 1
// Correct range check:
const x2 = 5;
console.log(x2 > 1 && x2 < 10); // true, and actually correct

// BUGGY: precedence makes this "(user && user.isActive) || (user.isAdmin && resource.isPublic)"
function canAccess(user, resource) {
  return user && user.isActive || user.isAdmin && resource.isPublic;
}
// An active regular user passes the first clause and gets into PRIVATE resources.

// FIXED: parenthesise to state the real rule
function canAccessFixed(user, resource) {
  return Boolean(user) &&
         (user.isActive || user.isAdmin) &&
         (user.isAdmin || resource.isPublic);
}

const active = { isActive: true, isAdmin: false };
const privateDoc = { isPublic: false };
console.log(canAccess(active, privateDoc));      // true  ← leak
console.log(canAccessFixed(active, privateDoc)); // false ← correct

Refactoring for Clarity

The cure for a scary expression is rarely "more parentheses" alone — it's naming the pieces. Break a compound condition into well-named variables or small functions, and precedence stops mattering because each step is simple.

// Hard to audit at a glance
const allowed = user && user.roles &&
  (user.roles.includes('admin') || user.roles.includes('editor')) &&
  (resource.isPublic || resource.ownerId === user.id);

// Refactored: each line is a plain-English claim
const canEdit  = user?.roles?.includes('admin') || user?.roles?.includes('editor');
const owns     = resource.isPublic || resource.ownerId === user?.id;
const allowed2 = Boolean(user) && canEdit && owns;

The same idea scales to arithmetic. A pricing formula crammed into one line becomes obvious when each concept gets a function:

function discounted(price, percent) { return price - price * (percent / 100); }
function withTax(price, rate)        { return price * (1 + rate / 100); }
function shipping(subtotal, free, cost) { return subtotal >= free ? 0 : cost; }

const net   = discounted(subtotal, 10);
const total = withTax(net, 8) + shipping(subtotal, 50, 5.99);

Hands-on Exercise

let a = 5, b = 10, c = 15;
console.log(a + b * c);          // ?

let x = 20, y = 10;
console.log(x / y + y / x * 2);  // ?

const m = true, n = false, p = true;
console.log(m && n || p);         // ?

let count = 0;
console.log(count++ + ++count + count++); // ?
console.log(count);                        // ?

function cappedDiscount(price, percent, max) {
  return price - price * percent / 100 > max ? max : price * percent / 100;
}

// Part A
a + b * c            // 155  → 5 + (10 * 15)
x / y + y / x * 2    // 3    → (20/10) + ((10/20) * 2) = 2 + 1
m && n || p          // true → (true && false) || true
count++ + ++count + count++ // 0 + 2 + 2 = 4
count                       // 3

// Part B — name the discount, compare the right thing
function cappedDiscount(price, percent, max) {
  const discount = price * percent / 100;
  return discount > max ? max : discount;
}
console.log(cappedDiscount(200, 30, 50)); // 50  (30% = 60, capped at 50)
console.log(cappedDiscount(200, 10, 50)); // 20  (10% = 20, under the cap)

Summary & Quiz

📚 Further Reading

• MDN — Operator Precedence (full table)
• MDN — Expressions and Operators
• JavaScript.info — Operators
• Exploring JS — Operators

🚀 What's Next?

You can now read and write any expression with confidence. Next we use them to steer a program's flow in Conditional Statements (if, else, switch), where these Boolean expressions finally decide which code runs.