Understanding JavaScript Operator Precedence with Examples

In JavaScript, operator precedence determines the order in which operators are evaluated in an expression. When multiple operators appear in a single expression, the JavaScript engine uses precedence rules to decide which operator to execute first.

What is Operator Precedence?

Operator precedence defines the priority of operators in expressions. Operators with higher precedence are executed before those with lower precedence.

For example:

const result = 5 + 2 * 3; // Multiplication has higher precedence than addition
console.log(result); // 11

Associativity in JavaScript

When two operators have the same precedence, associativity determines the order of evaluation:

Left-to-Right Associativity: Operators are evaluated from left to right.
Right-to-Left Associativity: Operators are evaluated from right to left.

Example of Left-to-Right Associativity:

const result = 10 - 5 - 2; // Subtraction is left-to-right
console.log(result); // 3

Example of Right-to-Left Associativity:

const result = 2 ** 3 ** 2; // Exponentiation is right-to-left
console.log(result); // 512 (2 raised to the power of 9)

JavaScript Operator Precedence Table

Below is a list of JavaScript operators arranged in decreasing order of precedence.

Precedence	Operator Type	Operators	Associativity
20	Grouping	( )	N/A
19	Member Access	.	Left-to-Right
18	Function Call	( )	Left-to-Right
17	Increment/Decrement	++ (Post), `--` (Post)	Left-to-Right
16	Logical NOT	!, typeof, void, delete	Right-to-Left
15	Exponentiation	**	Right-to-Left
14	Multiplication	*, /, %	Left-to-Right
13	Addition/Subtraction	+, `-`	Left-to-Right
12	Relational	<, <=, >, >=	Left-to-Right
11	Equality	==, !=, ===, !==	Left-to-Right
10	Bitwise AND	&	Left-to-Right
9	Bitwise OR	`	`
8	Logical AND	&&	Left-to-Right
7	Logical OR	`
6	Conditional	? :	Right-to-Left
5	Assignment	=, +=, -=, *=, /=, etc.	Right-to-Left
4	Comma	,	Left-to-Right

Examples of Operator Precedence

1. Basic Example

const result = 10 + 2 * 5; 
// Multiplication (*) has higher precedence than addition (+).
console.log(result); // 20

2. Using Parentheses to Override Precedence

Parentheses ( ) have the highest precedence and can be used to control the order of operations.

const result = (10 + 2) * 5; 
// Parentheses ensure addition happens before multiplication.
console.log(result); // 60

3. Mixing Associativity

const result = 100 / 10 * 2; 
// Both division (/) and multiplication (*) have the same precedence.
// Evaluated left-to-right.
console.log(result); // 20

4. Right-to-Left Example

const result = 2 ** 3 ** 2;
// Exponentiation is evaluated right-to-left.
console.log(result); // 512

Operator Precedence in Logical Expressions

Logical operators (&&, | |, !) follow specific precedence rules:

Logical NOT ( ! ) has the highest precedence.
Logical AND (&&) is evaluated before Logical OR (| |).

Example:

const result = true || false && false; 
// AND (&&) is evaluated before OR (||).
console.log(result); // true

Practical Use Cases

1. Complex Calculations

Operator precedence simplifies expressions with multiple mathematical operations.

const result = (5 + 10) * (2 ** 3) / 4;
console.log(result); // 30

2. Conditional Checks

Using logical operators effectively requires understanding precedence.

const isEligible = (age >= 18 && hasLicense) || isSupervisor;

3. Assignments

Compound assignments like += have lower precedence.

let x = 10;
x += 5 * 2; // Multiplication is evaluated first.
console.log(x); // 20

Common Mistakes

Ignoring Parentheses:
Misunderstanding precedence can lead to unexpected results.

const result = 10 - 5 * 2; // Expected 10, but result is 0.
console.log(result); // 0

Fix:

const result = (10 - 5) * 2;
console.log(result); // 10

Overusing Parentheses:
Although parentheses clarify expressions, overuse can make code harder to read.

Assuming Associativity:
Always confirm the associativity of operators to avoid logic errors.

JavaScript Precedence