⚙️ JavaScript Operator Precedence

? Quick Overview

Operator precedence defines the order in which JavaScript evaluates the parts of an expression. Operators with higher precedence are evaluated before operators with lower precedence. When multiple operators share the same precedence, JavaScript often evaluates them from left to right (or, for some operators like exponentiation, from right to left).

Understanding precedence is essential when reading or writing complex expressions so that you can predict the result correctly and avoid subtle bugs.

? Key Concepts

Higher precedence means “evaluated earlier” in the expression.
Parentheses () always take priority and are evaluated first.
Function calls and member access (., [], ?.) have very high precedence.
Arithmetic operators (*, /, +, -) follow the mathematical rules you already know.
Comparison and then logical operators (&&, ||, ??) come after arithmetic.
Assignment operators (=, +=, etc.) are evaluated near the end.

? Syntax and Theory

The table below shows a simplified precedence order, from highest value (evaluated first) to lowest value (evaluated last). You do not need to memorize every number, but you should know roughly which groups of operators come before others.

? Precedence Table (Highest to Lowest)

Precedence	Operator(s)	Description	Example
18	( )	Expression grouping	(100 + 50) * 3
17	.	Member of (dot notation)	person.name
17	[]	Member of (bracket notation)	person["name"]
17	?.	Optional chaining	x?.y
17	()	Function call	myFunction()
17	new ...()	`new` with arguments	new Date("2022")
16	new	`new` without arguments	new Date
15	++ / --	Postfix increment/decrement	i++ , i--
14	++ / --	Prefix increment/decrement	++i , --i
14	! ~ + - typeof void delete	Unary operators	!true , typeof x
13	**	Exponentiation (right-to-left)	10 ** 2
12	* / %	Multiplication/division/modulus	10 * 5
11	+ -	Addition/subtraction	10 + 5
10	<< >> >>>	Bitwise shift operators	x << 2
9	< > <= >= in instanceof	Comparison operators	x < y , "PI" in Math
8	== != === !==	Equality operators	x === y
7	&	Bitwise AND	x & y
6	^	Bitwise XOR	x ^ y
5	\|	Bitwise OR	x \| y
4	&&	Logical AND	x && y
3	\|\| ??	Logical OR / nullish coalescing	x \|\| y
2	?:	Conditional (ternary)	x ? "yes" : "no"
2	= += -= = /= *= ...	Assignment operators	x += y
1	,	Comma operator	a = 1, b = 2

? Code Examples

The following examples show how the same numbers can produce different results depending on parentheses and operator precedence.

? View Code Example

let x = 5 + 3 * 2;      // 3 * 2 = 6, then 5 + 6 = 11
let y = (5 + 3) * 2;    // 5 + 3 = 8, then 8 * 2 = 16
let z = 10 > 5 && 4 < 6; // true && true = true

console.log(x); // 11
console.log(y); // 16
console.log(z); // true

? Live Output and Explanation

? What happens when this code runs?

5 + 3 * 2 → multiplication has higher precedence than addition.
First, 3 * 2 is evaluated, giving 6, then 5 + 6 becomes 11. So x is 11.
In (5 + 3) * 2, the parentheses force 5 + 3 to be evaluated first, giving 8, then 8 * 2 becomes 16. So y is 16.
10 > 5 and 4 < 6 are evaluated as two comparisons, both true.
Then true && true is evaluated by the logical AND operator, resulting in true for z.

Final console output:

11
16
true

? Tips and Best Practices

Use parentheses generously to make the intended order of evaluation obvious to both you and other readers.
Remember that function calls and member access happen before most arithmetic operations.
Know the big groups: arithmetic → comparison → logical → assignment; this is enough for most day-to-day coding.
When in doubt, rewrite complex expressions into smaller steps using intermediate variables.
Avoid writing very long, packed expressions that are hard to read and debug.

? Try It Yourself

Write an expression that uses +, *, and parentheses, such as 7 + 4 * 3 and (7 + 4) * 3. Predict the result, then run it in the console.
Combine comparison and logical operators, for example: 10 - 3 > 4 && 2 * 2 === 4. Step through it in the order JavaScript uses.
Create a few expressions that mix ||, &&, and comparison operators. Use parentheses to change the evaluation order and observe how the results change.
Take a complex expression from your own code, break it into multiple simpler statements, and verify that the result is the same. This helps you build intuition for precedence.