JS Precedence
Operator precedence decides which operator binds tighter in an expression — like PEMDAS, but for 50+ JavaScript operators.
The order you'll actually remember
| Tier | Operators | Example |
|---|---|---|
| Grouping | (…) | Always wins. |
| Member & call | obj.x, obj[x], fn(), new | a.b() |
| Postfix | x++, x-- | — |
| Unary | !, ~, typeof, void, delete, prefix ++/--, unary +/- | !found |
| Exponent | ** | Right-associative. |
| Multiplicative | * / % | — |
| Additive | + - | a + b * c → a + (b*c) |
| Shift | << >> >>> | — |
| Comparison | < > <= >= in instanceof | — |
| Equality | === !== == != | — |
| Bitwise AND / XOR / OR | & ^ | | Below comparisons! |
| Logical AND / OR / nullish | && || ?? | AND binds tighter than OR |
| Conditional (ternary) | ?: | Right-associative. |
| Assignment | =, +=, … | Right-associative. |
| Comma | , | Lowest of all. |
Common traps
JS
// Bitwise is lower than equality — surprises everyone a & 1 === 1 // parsed as a & (1 === 1) → a & true → ugly (a & 1) === 1 // ✓ what you meant // Cannot mix && and ?? without parens (syntax error) // a ?? b || c // SyntaxError a ?? (b || c) // ✓ // Exponent is right-associative 2 ** 3 ** 2 // 2 ** (3 ** 2) → 2 ** 9 → 512
Tip: When in doubt, add parentheses. They cost nothing and prevent the reader (or future you) from looking up the precedence table.
Example
Example
<!DOCTYPE html>
<html>
<body>
<p id="out"></p>
<script>
document.getElementById("out").textContent = "Hello from JS Precedence!";
</script>
</body>
</html>
Try it Yourself »
Exercise
Force the equality check to happen before the bitwise AND.
if ((a & 1)
1) { /* odd */ }
Strict equality, three characters.
Discussion
Loading…