This site is mobile accessible. Press the "Tap Here" button to use a different font-size.

Smartphone icons created by Freepik - Flaticon

7.7 JS Precedence

Operator precedence describes the order in which operations are performed in an arithmetic expression.
Multiplication (*) and division (/) have higher precedence than addition (+) and subtraction (-).

As in traditional mathematics, multiplication is done first:

let x = 100 + 50 * 3;

Try it yourself

When using parentheses, operations inside the parentheses are computed first:

let x = (100 + 50) * 3;

Try it yourself

Operations with the same precedence (like * and /) are computed from left to right:

let x = 100 / 50 * 3;

Try it yourself

Operator Precedence Values

Expressions in parentheses are computed before the rest of the expression
Function are executed before the result is used in the rest of the expression

Val	Operator	Description	Example
18	( )	Expression Grouping	(100 + 50) * 3
17	.	Member Of	person.name
17	[]	Member Of	person["name"]
17	?.	Optional Chaining ES2020	x ?. y
17	()	Function Call	myFunction()
17	new	New with Arguments	new Date("June 5,2022")
16	new	New without Arguments	new Date()

Increment Operators

Postfix increments are executed before prefix increments

Val	Operator	Description	Example
15	++	Postfix Increment	i++
15	--	Postfix Decrement	i--
14	++	Prefix Increment	++i
14	--	Prefix Decrement	--i

NOT Operators

Val	Operator	Description	Example
14	!	Logical NOT	!(x==y)
14	~	Bitwise NOT	~x

Unary Operators

Val	Operator	Description	Example
14	+	Unary Plus	+x
14	-	Unary Minus	-x
14	typeof	Data Type	typeof x
14	void	Evaluate Void	void(0)
14	delete	Property Delete	delete myCar.color

Arithmetic Operators

Exponentiations are executed before multiplications
Multiplications and divisions are executed before additions and subtractions

Val	Operator	Description	Example
13	**	Exponentiation ES2016	10 ** 2
12	*	Multiplication	10 * 5
12	/	Division	10 / 5
12	%	Division Remainder	10 % 5
11	+	Addition	10 + 5
11	-	Subtraction	10 - 5
11	+	Concatenation	"John" + "Doe"

Shift Operators

Val	Operator	Description	Example
10	<<	Shift Left	x << 2
10	>>	Shift Right (signed)	x >> 2
10	>>>	Shift Right (unsigned)	x >>> 2

Comparison Operators

Val	Operator	Description	Example
9	<	Less than	x < y
9	<=	Less than or equal	x <= y
9	>	Greater than	x > y
9	>=	Greater than or equal	x >= Array
8	==	Equal	x == y
8	===	Strict equal	x === y
8	!=	Unequal	x != y
8	!==	Strict unequal	x !== y

Bitwise Operators

Val	Operator	Description	Example
7	&	Bitwise AND	x & y
6	^	Bitwise XOR	x ^ y
5	\|	Bitwise OR	x \| y

Logical Operators

Val	Operator	Description	Example
4	&&	Logical AND	x && y
3	\|\|	Logical OR	x \|\| y
3	??	Nullish Coalescing ES2020	x ?? y

Conditional (ternary) Operator

Val	Operator	Description	Example
2	? :	Condition	? "yes" : "no"

Assignment Operators

Assignments are executed after other operations

Val	Operator	Description	Example
2	=	Simple Assignment	x = y
2	:	Colon Assignment	x: 5
2	+=	Addition Assignment	x += y
2	-=	Subtraction Assignment	x -= y
2	*=	Multiplication Assignment	x *= y
2	**=	Exponentiation Assignment	x **= y
2	/=	Division Assignment	x /= y
2	%=	Remainder Assignment	x %= y
2	<<=	Left Shift Assignment	x <<= y
2	>>=	Right Shift Assignment	x >>= y
2	>>>=	Unsigned Right Shift	x >>>= y
2	&=	Bitwise AND Assignment	x &= y
2	\|=	Bitwise OR Assignment	x \|= y
2	^=	Bitwise XOR Assignment	x ^= y
2	&&=	Logical AND Assignment	x &≈= y
2	\|\|=	Logical OR Assignment	x \|\|= y
2	=>	Arrow	x => y
2	yield	Pause / Resume	yield x
2	yield*	Delegate	yield* x
2	...	Spread	... x
1	,	Comma	x , y

JavaScript Fundamentals course home
Module 7. Miscellaneous

Navigate this module

Eventually the navigation links, above, will be replaced by these << (previous) and >> (next) buttons below.

JavaScript icons used in the buttons provided by ICONS8.COM. Smartphone icons created by Freepik - Flaticon

Example files created in this module:
JS Sets Map Objects part 1 JS Sets Map Objects part 2 JS Sets Map Objects part 3 JS Sets Map Objects part 4 JS Sets Map Objects part 5 JS Sets Delete Map Objects JS Sets Map.has() part 1 JS Sets Map.has() part 2 JS Sets Map Objects forEach() JS Sets Map Objects Map.entries() JS Map Objects JS Map Objects - Map.set() part 1 JS Map Objects - Map.set() part 2 JS Map Objects Map.get() JS Map Objects - Map.size JS Map Objects - Map.delete() JS Map Objects - Map.has() part 1 JS Map Objects - Map.has() part 2 JS Map Objects - Map.forEach() JS Map Objects - Map.entries() JS typeof Operator part 1 JS typeof Operator part 2 JS typeof Operator part 3 JS typeof Properties - constructor Property part 1 JS typeof Properties - constructor Property part 2 JS typeof Properties - Array Object JS typeof Operator - Date Object JS typeof Operator - Date Function JS typeof Operator - undefined part 1 JS typeof Operator - undefined part 2 JS typeof Operator - empty values JS typeof Operator - null JS typeof Operator - undefined Data Type JS instanceof Operator JS void Operator JS Operators - typeof Operator JS Properties - constructor Property JS Arrays - isArray() function part 1 JS Arrays - isArray() function part 2 JS Date Object - isDate() function part 1 JS Date Object - isDate() function part 2 JS Converting Numbers to Strings part 1 JS Converting Numbers to Strings part 2 JS typeof Operator part 1 JS typeof Operator part 2 JS Bitwise AND JS Bitwise OR JS Bitwise XOR JS Bitwise NOT JS Bitwise Left JS Bitwise Right JS Unsigned Bitwise Right JS Convert Decimal to Binary JS Convert Binary to Decimal JS String Methods JS Regular Expressions part 1 JS String Methods - String replace() JS Regular Expressions part 2 JS Regular Expressions part 3 JS Error Handling part 1 JS try catch JS Errors - RangeError JS Errors - ReferenceError JS Errors - SyntaxError JS Errors - TypeError JS Errors - URIError JS Scope - Local Variables JS Scope - GLOBAL Variable JS Global Variables JS Scope - Global HTML variables JS Hoisted Declarations part 1 JS Hoisted Declarations part 2 JS Hoisting part 1 JS Hoisting part 2 JS Initializations are Not Hoisted part 1 JS Initializations are Not Hoisted part 2 JS Initializations are Not Hoisted part 3 JS "use strict" Mode part 1 JS "use strict" Mode part 2 JS this Keyword JS this Keyword [object Window] part 1 JS this Keyword - window object JS this Keyword [object Window] part 2 JS this Keyword - Function JS this Keyword - Event Handler JS this Keyword - Event Handler JS this Keyword - person object part 1 JS this Keyword - person object part 2 JS this Keyword - Explicit Function Binding JS this Keyword - Function bind() JS this Keyword - Arrow Function part 1 JS this Keyword - Arrow Function part 2