JavaScript Operator Precedence: Order of Operations

Operator Precedence Fundamentals

Operator precedence determines which operators are evaluated first in expressions.

Higher precedence operators execute before lower precedence ones.

Without explicit precedence rules, expressions would be ambiguous.

JavaScript follows a well-defined precedence hierarchy.

Understanding precedence prevents bugs from unexpected evaluation order.

// Multiplication has higher precedence than addition
console.log(2 + 3 * 4);      // 14 (not 20)
console.log((2 + 3) * 4);    // 20 (parentheses override)

// Exponentiation before multiplication
console.log(2 * 3 ** 2);     // 18 (3^2=9, then 2*9)
console.log((2 * 3) ** 2);   // 36 (6^2)

// Comparison before logical AND
console.log(5 > 3 && 2 < 4); // true
console.log(5 > 3 && 2 > 4); // false

// Assignment last (lowest precedence)
let x = 5 + 3;
let y = x * 2;
console.log(x, y); // 8, 16

// Chained comparisons need careful precedence
console.log(3 < 5 < 7);      // true (but not what you might think)
// Evaluates as: (3 < 5) < 7 -> true < 7 -> 1 < 7 -> true

Precedence Level Hierarchy

Highest to lowest: Member access → Exponentiation → Multiply/Divide → Add/Subtract → Comparison → Logical

Member access (.), indexing ([]), and calls have highest precedence.

Exponentiation (**) higher than arithmetic operators.

Arithmetic operators: *, /, % before +, -.

Comparison operators: <, >, <=, >=, ==, ===, !==, !=.

Logical: ! (NOT) before && (AND) before || (OR).

Assignment operators have lowest precedence.

Associativity: Left vs Right

Associativity determines evaluation order when operators have same precedence.

Left-associative: evaluates left to right (most operators).

Right-associative: evaluates right to left (assignment, exponentiation, NOT).

Critical for chains of same-precedence operators.

Unexpected associativity causes subtle bugs.

// Left-associative (most operators)
console.log(10 - 5 - 2);     // 3 (not 7)
// Evaluates as: (10 - 5) - 2 = 5 - 2 = 3

console.log(20 / 4 / 2);     // 2.5 (not 10)
// Evaluates as: (20 / 4) / 2 = 5 / 2 = 2.5

// Right-associative: Assignment
let a, b, c;
a = b = c = 5;
console.log(a, b, c);        // 5, 5, 5

// Right-associative: Exponentiation
console.log(2 ** 3 ** 2);    // 512 (not 64)
// Evaluates as: 2 ** (3 ** 2) = 2 ** 9 = 512
console.log((2 ** 3) ** 2);  // 64

Using Parentheses to Override Precedence

Parentheses have highest precedence and force specific evaluation order.

Always use parentheses for clarity even when not required.

Prevents colleague confusion and future maintenance issues.

Makes expressions more readable and predictable.

Essential defensive programming practice.

Common Pitfalls

• Forgetting multiplication/division precedence: Remember * and / have same precedence and evaluate left-to-right, before + and -.
• Confusing && and || precedence: AND (&&) has higher precedence than OR (||). Use parentheses to clarify.
• Relying on exponentiation left-associativity: Exponentiation is RIGHT-associative: 2**3**2 = 2**(3**2) = 512, not 64.
• Not using parentheses in complex expressions: Always use parentheses for clarity. Code is read more than written.
• Assuming all operators are left-associative: Assignment, exponentiation, and NOT are right-associative.

Frequently Asked Questions