-
Hajipur, Bihar, 844101
Hajipur, Bihar, 844101
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 Functions
Function Definitions
Function Parameters
Function Invocation
Function Call
Function Apply
Function Bind
Function Closures
JS Arrow Function
JS Objects
JS Objects
JS Object Properties
JS Object Methods
JS Object Display
JS Object Constructors
Object Definitions
Object Get / Set
Object Prototypes
Object Protection
JS Classes & Modules
JS Async Programming
JS Advanced
JS Destructuring
JS Bitwise
JS RegExp
JS Precedence
JS Errors
JS Scope
JS Hoisting
JS Strict Mode
JS this Keyword
JS HTML DOM
DOM Intro
DOM Methods
DOM Document
DOM Elements
DOM HTML
DOM Forms
DOM CSS
DOM Animations
DOM Events
DOM Event Listener
DOM Navigation
DOM Nodes
DOM Collections
DOM Node Lists
JS BOM (Browser Object Model)
JS Web APIs
Web API Intro
Web Validation API
Web History API
Web Storage API
Web Worker API
Web Fetch API
Web Geolocation API
JS AJAX
AJAX Intro
AJAX XMLHttp
AJAX Request
AJAX Response
AJAX XML File
AJAX PHP
AJAX ASP
AJAX Database
AJAX Applications
AJAX Examples
JS JSON
JSON Intro
JSON Syntax
JSON vs XML
JSON Data Types
JSON Parse
JSON Stringify
JSON Objects
JSON Arrays
JSON Server
JSON PHP
JSON HTML
JSON JSONP
JS Graphics & Charts
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.
JavaScript operators can be grouped into categories:
Grouping Operator ()
Member Access .
and Function Call ()
Unary Operators (!
, typeof
, ++
, --
)
Arithmetic Operators (*
, /
, %
, +
, -
)
Relational Operators (<
, >
, <=
, >=
, in
, instanceof
)
Equality Operators (==
, ===
, !=
, !==
)
Logical Operators (&&
, ||
)
Conditional (Ternary) Operator ? :
Assignment Operators (=
, +=
, -=
)
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 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 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 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
? :
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 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.
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 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.
Memorize common operator precedence like arithmetic > comparison > logical > assignment.
Use parentheses for clarity, even if you know the precedence rules.
Remember associativity: most operators are left-to-right, assignment is right-to-left.
When combining multiple operators, break the expression into smaller steps for readability.
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:
a + b
→ 15
15 > c
→ 15 > 15
→ false
b - a
→ 5
5 < c
→ true
Logical AND: false && true → false
Ternary: false ? c : a → 5
This shows how understanding operator precedence avoids logical errors.
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.
Evaluate the expression 2 + 3 * 4
and explain why the result is what it is.
Use parentheses to change the result of 2 + 3 * 4
so that the addition is performed first.
Determine the result of 10 - 2 * 3 / 2
and explain the order of operations.
Evaluate the logical expression true || false && false
and explain why the output is true
.
Use parentheses to change the logical expression true || false && false
so that it evaluates to false
.
Evaluate the ternary expression 5 > 3 ? 10 : 20 + 5
and explain the result.
Assign multiple variables in one line using a = b = c = 15
and explain the order in which values are assigned.
Determine the result of ++a + b-- * 2
given let a = 5, b = 3
and explain each step.
Evaluate 10 / 2 * 3
and explain why multiplication and division are evaluated in a specific order.
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.
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 Functions
Function Definitions
Function Parameters
Function Invocation
Function Call
Function Apply
Function Bind
Function Closures
JS Arrow Function
JS Objects
JS Objects
JS Object Properties
JS Object Methods
JS Object Display
JS Object Constructors
Object Definitions
Object Get / Set
Object Prototypes
Object Protection
JS Classes & Modules
JS Async Programming
JS Advanced
JS Destructuring
JS Bitwise
JS RegExp
JS Precedence
JS Errors
JS Scope
JS Hoisting
JS Strict Mode
JS this Keyword
JS HTML DOM
DOM Intro
DOM Methods
DOM Document
DOM Elements
DOM HTML
DOM Forms
DOM CSS
DOM Animations
DOM Events
DOM Event Listener
DOM Navigation
DOM Nodes
DOM Collections
DOM Node Lists
JS BOM (Browser Object Model)
JS Web APIs
Web API Intro
Web Validation API
Web History API
Web Storage API
Web Worker API
Web Fetch API
Web Geolocation API
JS AJAX
AJAX Intro
AJAX XMLHttp
AJAX Request
AJAX Response
AJAX XML File
AJAX PHP
AJAX ASP
AJAX Database
AJAX Applications
AJAX Examples
JS JSON
JSON Intro
JSON Syntax
JSON vs XML
JSON Data Types
JSON Parse
JSON Stringify
JSON Objects
JSON Arrays
JSON Server
JSON PHP
JSON HTML
JSON JSONP
JS Graphics & Charts