JavaScript Operator Precedence Complete Guide with Examples

Operator precedence is the set of rules that determines the order JavaScript evaluates parts of an expression. It is why an expression like 5 + 3 * 2 does not just evaluate left to right. Without these rules, expressions with multiple operators would be ambiguous.

Think of it like the order of operations you learned in math class (PEMDAS). JavaScript has the same idea, but with many more operators.

Why Precedence Matters

Precedence decides which operator runs first when an expression mixes several of them. Run these two lines and notice the difference a single pair of parentheses makes:

javascript

console.log(5 + 3 * 2);   // 11
console.log((5 + 3) * 2); // 16

Multiplication has higher precedence than addition, so the first line multiplies before it adds, giving 11. Parentheses in the second line override that default order and force the addition to run first, giving 16.

If JavaScript just read left to right with no precedence rules, both lines would produce the same result. Precedence is what makes expressions behave predictably instead of ambiguously.

The Precedence Table

Here is the order from highest priority to lowest, covering the operators you will use most often:

Associativity decides the direction when operators at the same level compete. Left-to-right means the leftmost operator runs first. Right-to-left means the rightmost runs first.

Precedence in Action

Arithmetic before comparison

Comparison operators have lower precedence than arithmetic, so math runs before the check:

javascript

console.log(10 + 5 > 12); // true: (10 + 5) > 12, then 15 > 12

This reads naturally: calculate the sum first, then compare the result. If you need a refresher on the operators themselves, see the operators overview.

Comparison before logical

Comparison operators have higher precedence than logical operators, so each comparison runs before they are combined:

javascript

const age = 25;
const hasLicense = true;
 
console.log(age >= 18 && hasLicense); // true: (age >= 18) && hasLicense

JavaScript checks the age comparison first. Since it is true, it then evaluates the AND with hasLicense, which is also true. You do not need parentheses here, but they do not hurt readability.

AND before OR

AND has higher precedence than OR, the same way multiplication has higher precedence than addition:

javascript

console.log(true || false && false); // true
 
// What actually happens:
// false && false evaluates first -> false
// true || false evaluates next -> true

This reads ambiguously at first glance. The expression above behaves like OR combined with a parenthesized AND on the right, not like an AND applied across the whole line. If you intended the AND to apply first across both sides, you need to add parentheses yourself.

Because AND-before-OR is easy to misread, always use parentheses when mixing AND and OR. This is also why logical short-circuiting behaves differently when you nest AND and OR without parentheses:

javascript

// Clear intent, no guessing needed
const result = (isWeekend || isHoliday) && storeIsOpen;

Assignment Operators Come Last

Assignment has the lowest precedence of all. Everything on the right side evaluates completely before the result is assigned:

javascript

let total = 10 + 5 * 2; // 10 + 10 = 20, then total = 20

JavaScript calculates the entire right-hand expression first, following normal precedence, then assigns the final result to total. The assignment always happens last.

Common Precedence Pitfalls

Mixing string concatenation with arithmetic

The plus operator does both addition and string concatenation. When both appear in one expression, precedence alone does not save you:

javascript

console.log("Result: " + 10 + 5);   // "Result: 105" (left-to-right concatenation)
console.log("Result: " + (10 + 5)); // "Result: 15"  (parentheses force addition first)

In the first line, both plus operators have equal precedence, so JavaScript evaluates them strictly left to right. It joins the string with 10 first, then joins that result with 5.

Add parentheses around the numbers to force addition before the string join, as shown in the second line.

Negation without parentheses

The NOT operator has very high precedence. Be careful when negating a comparison:

javascript

console.log(!5 > 3);   // false: (!5) > 3, then false > 3, which is false
console.log(!(5 > 3)); // false: !(true), which is false (intent is clearer)

NOT runs before the comparison, so it flips the number to false first, and only then does the greater-than check run against that false value. If you meant to negate the whole comparison, wrap it in parentheses so NOT applies to the comparison's result instead of to the number alone.

How to Never Get Precedence Wrong

You do not need to memorize the entire precedence table. Follow these three rules instead:

• Multiplication/division before addition/subtraction -- same as math class.
• AND before OR -- think of AND as multiplication and OR as addition of logic.
• When an expression has more than two operators, add parentheses. They make intent obvious and cost nothing.

This expression is technically correct without parentheses:

javascript

const valid = age >= 18 && hasLicense || isStaff;

Both lines run identically because AND already binds tighter than OR by default. But the version below makes that grouping visible instead of relying on memorized precedence rules, which matters once other people start reading and maintaining your code:

javascript

const valid = (age >= 18 && hasLicense) || isStaff;

The second version tells the reader "either you are an adult with a license, or you are staff." The first version makes the reader stop and think about precedence. Write for humans, not just for the JavaScript engine.