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


Operator precedence in JavaScript determines the order in which operators are evaluated in an expression. Understanding operator precedence is crucial to avoid unexpected results and write accurate calculations.

Operators with higher precedence are evaluated before operators with lower precedence. When operators have the same precedence, associativity determines the order (left-to-right or right-to-left).

JavaScript operator precedence applies to arithmetic, logical, comparison, assignment, and ternary operators, among others.

Operator Categories and Precedence

JavaScript operators can be grouped into categories:

  1. Grouping Operator ()

  2. Member Access . and Function Call ()

  3. Unary Operators (!, typeof, ++, --)

  4. Arithmetic Operators (*, /, %, +, -)

  5. Relational Operators (<, >, <=, >=, in, instanceof)

  6. Equality Operators (==, ===, !=, !==)

  7. Logical Operators (&&, ||)

  8. Conditional (Ternary) Operator ? :

  9. Assignment Operators (=, +=, -=)

Examples

Arithmetic Operator Precedence

let result = 2 + 3 * 4;
console.log(result); // 14, because * has higher precedence than +
  • Multiplication (*) is evaluated before addition (+).

  • Using parentheses changes the order:

let result2 = (2 + 3) * 4;
console.log(result2); // 20, parentheses are evaluated first

Unary Operators

Unary operators have higher precedence than arithmetic operators.

let a = 5;
let b = -a; // Unary minus
console.log(b); // -5

let c = ++a; // Pre-increment
console.log(c); // 6
  • Pre-increment (++a) is evaluated before arithmetic operations.

Comparison Operators

Comparison operators are evaluated after arithmetic operations.

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

Logical Operators

Logical AND && has higher precedence than logical OR ||.

let result = true || false && false;
console.log(result); // true, && evaluated first
  • Logical operators can be tricky without parentheses:

let result2 = (true || false) && false;
console.log(result2); // false

Ternary Operator ? :

The conditional operator has lower precedence than most operators except assignment.

let age = 20;
let status = age >= 18 ? "Adult" : "Minor";
console.log(status); // Adult
  • Parentheses can clarify complex expressions:

let a = 5;
let b = 10;
let max = a > b ? a : b + 1; // b + 1 evaluated first
console.log(max); // 11

Assignment Operators

Assignment operators have right-to-left associativity.

let a, b, c;
a = b = c = 10; // Assigns 10 to c, then b, then a
console.log(a, b, c); // 10 10 10
  • Right-to-left associativity ensures all variables get the correct value.

Operator Precedence Table (Simplified)

Precedence Operators Description
21 () Grouping
20 . Member access
19 ++, --, !, typeof Unary
17 *, /, % Multiplication, division, modulo
16 +, - Addition, subtraction
14 <, >, <=, >=, in Relational
13 ==, ===, !=, !== Equality
6 && Logical AND
5 `  
4 ? : Ternary
3 =, +=, -= Assignment

Parentheses Are Key

Parentheses can override precedence and improve readability.

let result = 2 + 3 * 4 / (1 + 1);
console.log(result); // 8, parentheses evaluated first
  • Always use parentheses for complex expressions to avoid confusion.

Practical Tips

  1. Memorize common operator precedence like arithmetic > comparison > logical > assignment.

  2. Use parentheses for clarity, even if you know the precedence rules.

  3. Remember associativity: most operators are left-to-right, assignment is right-to-left.

  4. When combining multiple operators, break the expression into smaller steps for readability.

Advanced Example

let a = 5;
let b = 10;
let c = 15;

let result = a + b > c && b - a < c ? c : a;
console.log(result); 

Step-by-step evaluation:

  1. a + b → 15

  2. 15 > c15 > 15 → false

  3. b - a → 5

  4. 5 < c → true

  5. Logical AND: false && true → false

  6. Ternary: false ? c : a → 5

  • This shows how understanding operator precedence avoids logical errors.

Summary of the Tutorial

  • Operator precedence determines the order of evaluation in expressions.

  • Parentheses can override precedence and improve readability.

  • Key points:

    • Arithmetic operators have higher precedence than comparison

    • Comparison operators have higher precedence than logical

    • Logical AND && has higher precedence than OR ||

    • Assignment operators have right-to-left associativity

  • Understanding precedence prevents bugs and unintended results.

Mastering JavaScript operator precedence is crucial for writing clean, error-free expressions and understanding how complex expressions are evaluated by the interpreter.


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.


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

Go Back Top