Operator Precedence & Associativity: The Order of Operations

When you write complex expressions with multiple operators, JavaScript needs a set of rules to determine the order in which those operations are performed. This is where operator precedence and associativity come into play. Understanding these concepts is crucial for writing correct and predictable JavaScript code.

---

1. What is Operator Precedence?

Precedence dictates the order in which operators are evaluated. Think of it like the "PEMDAS/BODMAS" rule from basic math (Parentheses, Exponents, Multiplication/Division, Addition/Subtraction). Operators with higher precedence are executed before operators with lower precedence.

For example, in 2 + 3 * 4, multiplication (*) has higher precedence than addition (+), so 3 * 4 is evaluated first (12), and then 2 + 12 is calculated, resulting in 14.

---

2. What is Associativity?

Associativity comes into play when you have two or more operators with the same precedence in an expression. It determines the direction in which these operators are evaluated:

• Left-to-Right Associativity: The operators are evaluated from left to right. Most arithmetic and comparison operators are left-to-right.
  • Example: 10 - 5 - 2 is evaluated as (10 - 5) - 2, resulting in 3.
• Right-to-Left Associativity: The operators are evaluated from right to left. Assignment operators, unary operators, and the ternary operator are common examples.
  • Example: a = b = c is evaluated as a = (b = c). First c is assigned to b, then the result of that assignment is assigned to a.

---

3. Common Operator Precedence (Highest to Lowest)

While there's a full precedence table in the MDN documentation, here's a simplified overview of common operator groups from highest to lowest precedence:

1. Parentheses (): Overrides all other precedence rules.
2. Member Access . and [], new (with arguments), Function Calls (): (e.g., obj.prop, arr[0], new Date(), myFunc())
3. Unary Operators: (++, --, !, + (unary plus), - (unary minus), typeof, delete, void)
4. Exponentiation **
5. Multiplication, Division, Modulo *, /, %
6. Addition, Subtraction +, -
7. Relational Operators < , >, <=, >=
8. Equality Operators ==, !=, ===, !==
9. Logical AND &&
10. Logical OR ||
11. Ternary (Conditional) Operator ? : (Right-to-left associativity)
12. Assignment Operators =, +=, -=, etc. (Right-to-left associativity)

---

4. Interactive Examples

Let's explore how precedence and associativity affect the outcome of expressions.

Example 1: Basic Arithmetic

Example 2: Mixing Operators

Example 3: Associativity

---

5. Importance of Parentheses ()

Even when you know the precedence rules, it's often a good practice to use parentheses () to explicitly group operations.

Why?

• Clarity: Parentheses make your code's intent immediately clear, even to someone unfamiliar with specific precedence rules.
• Preventing Bugs: They eliminate ambiguity and reduce the chance of errors due to misremembering or misunderstanding precedence.
• Forcing Evaluation Order: They allow you to override default precedence when needed.

If in doubt, add parentheses!

---

Exercise: Operator Precedence Challenge

Predict the output of the following expressions before running the code. Then, write the expressions in the CodeEditor and use console.log() to verify your predictions.