• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

JavaScript

coding learning websites codepractice

JS Basics

JS Variables & Operators

JS Data Types & Conversion

JS Numbers & Math

JS Strings

JS Dates

JS Arrays

JS Control Flow

JS Loops & Iteration

JS Functions

JS Objects

JS Classes & Modules

JS Async Programming

JS Advanced

JS HTML DOM

JS BOM (Browser Object Model)

JS Web APIs

JS AJAX

JS JSON

JS Graphics & Charts

JavaScript Precedence

← Previous Next →

In JavaScript, operator precedence determines the order in which operations are evaluated in an expression. When multiple operators appear together, understanding precedence is essential to ensure correct calculations and logic. Operator precedence, combined with associativity, dictates how JavaScript interprets complex expressions, helping prevent errors and unexpected results.

In this tutorial, you will learn about JavaScript operator precedence, associativity, practical examples, common mistakes, best practices, and real-world applications.

Why Operator Precedence Is Important

Operator precedence is important because it allows you to:

  • Predict how expressions will be evaluated

  • Avoid logical and arithmetic errors in calculations

  • Write concise and correct code

  • Understand and debug complex expressions

  • Maintain readability and prevent unexpected behavior

Without a clear understanding of precedence, code that appears straightforward may produce incorrect results due to unexpected evaluation order.

JavaScript Operator Precedence

JavaScript operators have a predefined hierarchy. Operators with higher precedence are evaluated before operators with lower precedence. Operators with the same precedence are evaluated according to their associativity, which can be left-to-right or right-to-left.

Example: Basic Precedence

let result = 10 + 5 * 2;
console.log(result); // 20

Here, multiplication (*) has higher precedence than addition (+), so 5 * 2 is calculated first, resulting in 10 + 10 = 20.

Example: Using Parentheses

Parentheses () have the highest precedence and can override the default order:

let result = (10 + 5) * 2;
console.log(result); // 30

In this case, the addition is performed first due to parentheses, resulting in 15 * 2 = 30.

Operator Precedence Table (Simplified)

Precedence Operator Type Example Associativity
21 Grouping (a + b) n/a
20 Member, Function Call obj.prop(), arr[i] left-to-right
19 New (with arguments) new Object() right-to-left
18 Postfix Increment/Decrement i++, i-- left-to-right
17 Unary Operators +a, -a, !a right-to-left
16 Exponentiation a ** b right-to-left
15 Multiplication, Division, Mod *, /, % left-to-right
14 Addition, Subtraction +, - left-to-right
13 Relational <, <=, >, >= left-to-right
12 Equality ==, !=, ===, !== left-to-right
11 Logical AND && left-to-right
10 Logical OR `  
9 Conditional (Ternary) ? : right-to-left
8 Assignment =, +=, -= right-to-left
7 Comma , left-to-right

This table helps developers understand which operators will be evaluated first in complex expressions.

Associativity

Associativity determines the order in which operators of the same precedence are evaluated:

  • Left-to-right: Evaluated from left to right. Example: 5 - 3 + 2 → (5 - 3) + 2 = 4

  • Right-to-left: Evaluated from right to left. Example: x = y = 5 → x = (y = 5)

Practical Examples

Example 1: Arithmetic Precedence

let a = 10 + 5 * 2 - 3;
console.log(a); // 17

Explanation:

  1. 5 * 2 = 10

  2. 10 + 10 = 20

  3. 20 - 3 = 17

Example 2: Parentheses to Control Precedence

let a = (10 + 5) * (2 - 3);
console.log(a); // -15

Here, parentheses change the evaluation order:

  1. 10 + 5 = 15

  2. 2 - 3 = -1

  3. 15 * -1 = -15

Example 3: Logical Operators

let isAvailable = true;
let isLoggedIn = false;
console.log(isAvailable && isLoggedIn || !isLoggedIn); // true

Explanation:

  1. !isLoggedIn = true

  2. isAvailable && isLoggedIn = false

  3. false || true = true

Logical AND (&&) has higher precedence than OR (||), so && is evaluated first.

Example 4: Assignment with Right-to-Left Associativity

let x, y;
x = y = 5 + 10;
console.log(x, y); // 15, 15

Here, 5 + 10 = 15 is assigned to y first, then x.

Example 5: Ternary Operator

let score = 85;
let grade = score >= 90 ? "A" : score >= 75 ? "B" : "C";
console.log(grade); // B

The ternary operator ? : is right-to-left associative, allowing nested conditions.

Common Mistakes

  • Ignoring operator precedence, leading to unexpected results

  • Overusing nested expressions without parentheses

  • Assuming assignment is left-to-right instead of right-to-left

  • Confusing logical operator precedence in complex conditions

  • Misunderstanding exponentiation associativity (** is right-to-left)

Best Practices

  • Use parentheses to make the order of operations explicit

  • Avoid overly complex expressions; break them into smaller statements

  • Understand the precedence table for common operators

  • Test expressions in the console to verify expected results

  • Use consistent formatting to improve readability

Real-World Applications

  • Calculating complex mathematical expressions

  • Implementing conditional logic in forms or validations

  • Writing concise algorithms for financial, scientific, or statistical computations

  • Combining multiple logical conditions in decision-making processes

  • Ensuring correct evaluation of chained assignment operations

Summary of JavaScript Precedence

JavaScript operator precedence determines the order in which expressions are evaluated. Understanding precedence and associativity ensures that arithmetic, logical, and assignment operations are performed correctly. Using parentheses can help clarify the intended order and prevent errors. By mastering precedence, developers can write more reliable, readable, and maintainable code while avoiding subtle bugs in complex expressions.

Practice Questions

  1. Evaluate the expression 2 + 3 * 4 and explain why the result is what it is.

  2. Use parentheses to change the result of 2 + 3 * 4 so that the addition is performed first.

  3. Determine the result of 10 - 2 * 3 / 2 and explain the order of operations.

  4. Evaluate the logical expression true || false && false and explain why the output is true.

  5. Use parentheses to change the logical expression true || false && false so that it evaluates to false.

  6. Evaluate the ternary expression 5 > 3 ? 10 : 20 + 5 and explain the result.

  7. Assign multiple variables in one line using a = b = c = 15 and explain the order in which values are assigned.

  8. Determine the result of ++a + b-- * 2 given let a = 5, b = 3 and explain each step.

  9. Evaluate 10 / 2 * 3 and explain why multiplication and division are evaluated in a specific order.

  10. Write a complex expression combining arithmetic, comparison, and logical operators, such as (5 + 3 > 6 && 10 - 4 < 8) || false, and explain step by step how JavaScript evaluates it.

← Previous Next →

Try a Short Quiz.

coding learning websites codepractice

No quizzes available.

JavaScript

online coding class codepractice

JS Basics

JS Variables & Operators

JS Data Types & Conversion

JS Numbers & Math

JS Strings

JS Dates

JS Arrays

JS Control Flow

JS Loops & Iteration

JS Functions

JS Objects

JS Classes & Modules

JS Async Programming

JS Advanced

JS HTML DOM

JS BOM (Browser Object Model)

JS Web APIs

JS AJAX

JS JSON

JS Graphics & Charts

codepractice logo
Login
Go Back Top