JavaScript

Operator precedence determines the order in which operations are performed in an expression. Understanding precedence is crucial to writing correct and predictable JavaScript code.

---

1. What is Operator Precedence?

Operator precedence defines the order in which JavaScript evaluates different operators in an expression. When multiple operators appear in a single expression, those with higher precedence execute before those with lower precedence.

Example:

let result = 10 + 5 * 2;
console.log(result); // Output: 20 (Multiplication occurs before addition)

---

2. Associativity

Associativity defines the direction in which operators of the same precedence are processed. It can be left-to-right or right-to-left.

Example:

// Left-to-right (e.g., subtraction)
let result = 10 - 5 - 2;  // (10 - 5) - 2 = 3

// Right-to-left (e.g., assignment)
let a = b = c = 5; // c = 5, b = 5, a = 5

---

3. JavaScript Operator Precedence Table

Here’s a simplified table of JavaScript operators in order of precedence (from highest to lowest):

Precedence	Operator(s)	Type	Associativity
1	()	Grouping	N/A
2	new (with argument list)	Object creation	Right-to-left
3	++, -- (postfix)	Postfix increment/decrement	Left-to-right
4	++, -- (prefix), +, -, ~, !	Unary	Right-to-left
5	**	Exponentiation	Right-to-left
6	*, /, %	Multiplication/division/modulo	Left-to-right
7	+, -	Addition/subtraction	Left-to-right
8	<<, >>, >>>	Bitwise shift	Left-to-right
9	<, <=, >, >=, in, instanceof	Comparison	Left-to-right
10	==, !=, ===, !==	Equality	Left-to-right
11	&	Bitwise AND	Left-to-right
12	^	Bitwise XOR	Left-to-right
13	`	`	Bitwise OR
14	&&	Logical AND	Left-to-right
15	`		`
16	??	Nullish coalescing	Left-to-right
17	?:	Conditional (ternary)	Right-to-left
18	=, +=, -=, etc.	Assignment	Right-to-left
19	yield	Yield	Right-to-left
20	...	Spread/rest	N/A
21	,	Comma	Left-to-right

---

4. Examples by Category

a. Grouping

let result = (2 + 3) * 4;  // 5 * 4 = 20

b. Unary and Exponentiation

let x = -3 ** 2; // Error: must use parentheses: -(3 ** 2)
let x = -(3 ** 2); // -9

c. Logical vs Assignment

let a = true && false;  // false
let b = false || true;  // true
let c = a = b;          // assignment after logical eval

d. Conditional Operator

let age = 20;
let status = age >= 18 ? "Adult" : "Minor";
console.log(status); // "Adult"

---

5. Best Practices

• Use parentheses to make complex expressions more readable.
• Know your operator types (unary, binary, ternary).
• Avoid tricky combinations in a single line. Break them up.

---

6. Conclusion

Understanding JavaScript operator precedence helps prevent logic errors and write cleaner, more predictable code. While JavaScript handles precedence rules internally, being aware of them allows you to use parentheses effectively and control how your expressions are evaluated.

Always refer to the precedence table when dealing with complex expressions and make use of parentheses to explicitly define execution order.