Prev Next

JavaScript Operator Precedence

Operator precedence determines the order in which operations are performed in an expression. Knowing precedence helps ensure correct calculations without excessive parentheses.

Key Topics

Basic Concepts

Operations like multiplication and division have higher precedence than addition and subtraction. Parentheses can override the default order.

console.log(2 + 3 * 4); // 2 + 12 = 14
console.log((2 + 3) * 4); // 5 * 4 = 20

Output

> 14

> 20

Explanation: Multiplication executes before addition without parentheses, changing the result.

Higher vs. Lower Precedence

For example, * and / have higher precedence than + and -. The typeof operator has higher precedence than arithmetic.

Associativity

Associativity defines the order of evaluation when operators have the same precedence. For instance, * and / are left-associative, meaning they evaluate from left to right.

JavaScript Usage in DOM

When performing calculations or manipulating styles dynamically, understanding precedence ensures correct results without unnecessary parentheses in code that updates the webpage.

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>Precedence in DOM</title></head>
<body>
    <h1>Precedence Demo</h1>
    <button onclick="calculate()">Calculate</button>
    <p id="display"></p>

    <script>
        function calculate() {
            let result = 2 + 3 * 4;
            document.getElementById("display").textContent = "2 + 3 * 4 = " + result;
        }
    </script>
</body>
</html>

Key Takeaways

  • Order of Operations: Certain operators run before others.
  • Multiplication/Division: Execute before addition/subtraction.
  • Associativity: Resolves ties in precedence.
  • DOM Integration: Correct calculations ensure accurate UI updates.
Prev Next