JavaScript Operator Precedence and Associativity

In JavaScript, operator precedence determines the order in which operators are evaluated in an expression. Associativity defines how operators of the same precedence are evaluated.

1. Operator Precedence

Operator precedence refers to the order in which operators are executed in an expression. Operators with higher precedence are executed first.

Operator Precedence Order (from highest to lowest):

1. Grouping ()
2. Member Access .
3. Function Call ()
4. Unary ++, --, +, -, ~, !
5. Multiplication, Division, Modulus *, /, %
6. Addition, Subtraction +, -
7. Relational <, <=, >, >=
8. Equality ==, ===, !=, !==
9. Logical AND &&
10. Logical OR ||
11. Assignment =, +=, -=, etc.
12. Comma , (lowest precedence)

Example:

let result = 3 + 4 * 2; // 3 + (4 * 2) = 3 + 8 = 11
console.log(result); // 11

Explanation:

• The * operator has higher precedence than +, so 4 * 2 is calculated first, then added to 3.

2. Operator Associativity

When operators have the same precedence, associativity determines the order in which they are evaluated.

• Left-to-right associativity: Most operators (like +, -, *, etc.) are evaluated from left to right.
• Right-to-left associativity: Assignment operators (=, +=, -=, etc.) and the ternary operator (? :) are evaluated from right to left.

Example of Left-to-Right Associativity:

let result = 10 - 5 + 3; // (10 - 5) + 3 = 5 + 3 = 8
console.log(result); // 8

Explanation:

• - and + have the same precedence and are evaluated from left to right, so 10 - 5 is calculated first.

Example of Right-to-Left Associativity (Assignment):

let a = 10;
let b = 20;
let result = a = b = 5; // Right to left, b = 5, then a = 5
console.log(a, b); // 5 5

Explanation:

• The assignment operators are evaluated from right to left. So, b = 5 happens first, followed by a = 5.

3. Priority of Operations

When you have multiple operations in an expression, JavaScript follows the precedence and associativity rules to determine the order of evaluation.

Example:

let result = 2 + 3 * 4 - 6 / 2;
console.log(result); // 2 + (3 * 4) - (6 / 2) = 2 + 12 - 3 = 11

Explanation:

• Multiplication (*) and division (/) have higher precedence than addition (+) and subtraction (-), so they are evaluated first.

4. The Comma Operator

The comma operator allows you to evaluate multiple expressions, but it returns the value of the last expression.

Example:

let result = (1, 2, 3);
console.log(result); // 3

Explanation:

• The expressions 1, 2, and 3 are evaluated from left to right, but the value of 3 is returned.

JavaScript Operator Precedence & Associativity Chart

Conclusion:

• Operator precedence determines the order of operations in an expression.
• Associativity decides the evaluation direction when operators have the same precedence.
• Use parentheses () to control the order of operations explicitly.