When you’re writing JavaScript code, you often use multiple operators in the same expression. For example:
javascriptCopyEditlet result = 5 + 3 * 2;
What will result be? Is it 16 or 11? Understanding operator precedence will help you answer that. In JavaScript, operator precedence determines the order in which operations are performed in an expression.
What Is Operator Precedence?
Operator precedence is a set of rules that JavaScript follows to decide which operators are evaluated first in an expression with more than one operator. Operators with higher precedence are evaluated before those with lower precedence.
For example:
javascriptCopyEditlet x = 2 + 3 * 4; // x is 14, not 20
Multiplication (*) has higher precedence than addition (+), so 3 * 4 is evaluated first, resulting in 12, and then 2 + 12 gives 14.
Associativity
When two operators have the same precedence, JavaScript uses associativity to determine the order. Associativity can be either:
- Left-to-right: Most operators (like
+,-,*,/) are left-associative. - Right-to-left: Some operators like assignment (
=) and exponentiation (**) are right-associative.
Example of left-associative:
javascriptCopyEditlet y = 10 - 5 - 2; // (10 - 5) - 2 = 3
Example of right-associative:
javascriptCopyEditlet a = b = c = 10; // Same as: let a = (b = (c = 10))
Operator Precedence Table (Simplified)
Here’s a simplified list of some common operators in JavaScript, from highest to lowest precedence:
| Precedence | Operator | Description | Associativity |
|---|---|---|---|
| 1 | () | Grouping | N/A |
| 2 | . [] | Member access, array indexing | Left |
| 3 | ! + - | Logical NOT, unary plus/minus | Right |
| 4 | ** | Exponentiation | Right |
| 5 | * / % | Multiplication, division | Left |
| 6 | + - | Addition, subtraction | Left |
| 7 | < > <= >= | Comparison | Left |
| 8 | == != === | Equality | Left |
| 9 | && | Logical AND | Left |
| 10 | ` | ` | |
| 11 | ? : | Ternary conditional | Right |
| 12 | = += -= | Assignment | Right |
Using Parentheses
When in doubt, or to make code more readable, always use parentheses to control precedence:
javascriptCopyEditlet value = (5 + 3) * 2; // Forces addition first → value is 16
Common Pitfalls
1. Assignment and Comparison
Be careful not to confuse = (assignment) with == (equality). Assignment has lower precedence than most operations.
javascriptCopyEditlet x;
let result = (x = 5) == 5; // true, assignment happens before comparison
2. Logical Operators
The logical AND (&&) and OR (||) operators short-circuit, which means evaluation may stop early.
javascriptCopyEditlet a = false && doSomething(); // doSomething() is not called
Practical Examples
Example 1: Mixing Arithmetic
javascriptCopyEditlet result = 10 + 5 * 2; // 5 * 2 = 10 → 10 + 10 = 20
Example 2: Combining Logical and Comparison
javascriptCopyEditlet isValid = 5 > 3 && 2 < 4; // true && true → true
Example 3: Assignment vs Evaluation
javascriptCopyEditlet a = 2;
let b = 3;
let result = a + b * (a = 4); // b * (a = 4) → 3 * 4 = 12, a is now 4 → 2 + 12 = 14
Conclusion
Understanding JavaScript’s operator precedence and associativity is essential for writing correct and readable code. When expressions become complex, use parentheses to clarify the order of operations. This not only avoids bugs but also makes your code easier to understand for others (and your future self!).