Why Precedence Matters
Operator precedence decides which parts of an expression run first. Misunderstanding it can flip results.
When in doubt, parentheses make your intent explicit.
JavaScript Tutorial
JavaScript Operator Precedence
Operator precedence determines the order in which JavaScript evaluates expressions.
Knowing the common rules and using parentheses prevents logic bugs and keeps code clear.
Why We Need It
Complex expressions can behave differently than you expect. A small precedence mistake can flip a condition or calculation.
Parentheses make intent explicit and help teammates read your code quickly.
Syntax
// Use parentheses to control order
(a + b) * c
a && b || c
a = b = cBasic Example
1. Arithmetic Precedence
console.log(2 + 3 * 4); // 14
console.log((2 + 3) * 4); // 20Multiplication happens before addition unless you use parentheses.
Real World Example
2. Logical Precedence
console.log(true || false && false); // true
console.log((true || false) && false); // false&& runs before ||, so use parentheses when mixing them.
Multiple Use Cases
Associativity
Operators with the same precedence are evaluated based on associativity (left-to-right or right-to-left).
For example, assignment is right-to-left, while addition is left-to-right.
Common Precedence Rules
Multiplication and division come before addition and subtraction.
Logical AND (&&) runs before logical OR (||).
Ternary has lower precedence than logical operators but higher than assignment.
Readable Expressions
Use parentheses to document intent, especially when mixing multiple operator types.
Readable expressions reduce bugs and make code review easier.
More Examples
3. Assignment Associativity
let a, b, c;
a = b = c = 5;
console.log(a, b, c); // 5 5 5Assignment is right-associative, so it evaluates from right to left.
4. Ternary with Other Operators
const score = 70;
const label = score >= 60 && score <= 100 ? "Pass" : "Fail";
console.log(label);Use parentheses if the ternary condition gets complex.
Comparison
Without
const result = 2 + 3 * 4; // 14With
const result = (2 + 3) * 4; // 20Common Mistakes and Fixes
Assuming left-to-right always
Check associativity for operators like assignment and exponentiation.
Mixing && and || without parentheses
Parentheses make intent clear and prevent logic bugs.
Overlooking exponentiation
`**` has higher precedence and is right-associative.
Overly complex expressions
Break them into intermediate variables for readability.
Interview Questions
What is operator precedence?
It is the order JavaScript uses to evaluate operators.
What is associativity?
It is the direction of evaluation for operators of the same precedence.
How do you make precedence clear?
Use parentheses or break expressions into variables.
Practice Problem
Practice: Evaluate a mixed expression and then rewrite it with parentheses to make the order explicit.
const value = 5 + 2 * 3 > 10 || false && true;
// TODO: rewrite with parentheses
One Possible Solution
const value = (5 + (2 * 3) > 10) || (false && true);
console.log(value);Frequently Asked Questions
What is operator precedence?
It defines the order in which operators are evaluated in an expression.
What is associativity?
It defines the direction of evaluation when operators have the same precedence.
Should I memorize the precedence table?
No. Know the common rules and use parentheses for clarity.
Why does 2 ** 3 ** 2 equal 512?
Exponentiation is right-associative, so it evaluates as 2 ** (3 ** 2).
Try It Yourself
Run the precedence examples and add parentheses to see the difference.