Learning JavaScript tutorial – JavaScript Operator Precedence and Associativity

n our last article "Learning JavaScript tutorial – JavaScript Expressions and Operators", we take a look at JavaScript Operators. JavaScript Operators have a predefined order of precedence which are used to process and evaluate a JavaScript expression. JavaScript Operator Precedence is similar to the Mathematical Operator Precedence and Associativity. Like basic algebra Operator Precedence, JavaScript multiplication and division Operator have higher precedence over addition and subtraction Operator. For example:

alert(4 + 3 * 2);  // alert ’10′

Using parentheses, we can group expressions so that we can evaluate any JavaScript expressions in an order of our choice. For example:

alert(4 + 3 * 2);  // alert ’10′
alert((4 + 3) * 2); // alert ’14′
alert((4 / 2) * 2); // alert ’4′

JavaScript expression evaluation is worked on the JavaScript operator associativity. JavaScript Operator Associativity essentially means the "direction" in which an expression containing an operator is evaluated. For example, consider the following combination of subtraction and string concatenation operations:

alert(8 - 6 + "I Love JavaScript"); // alert 2I Love JavaScript

The + and – operator is "left associative", meaning that it is evaluated left to right, so the numeric subtraction is performed first.

var y;
var x = y = 5 + 10 * 10;
alert(y); // alert ’105′

The multiplication operator * has a higher precedence than the addition operator +, so the multiplication is performed before the addition. Furthermore, the assignment operator = has the lowest precedence, so the assignment (because assignment (=) is "right associative") is performed after all the operations on the right side are completed. The result is that 105 is computed, then assigned to y, and only then assigned to x.

JavaScript operator precedence is indicated by a number, with lower numbers indicating higher precedence.

The precedence and associativity of the various JavaScript operators is presented in Table below.

Table 1 – JavaScript Operator Precedence and Associativity
Precedence	Associativity	Operator	Operator Meaning
Highest: 0	Left to right	.	Object property access
0	Left to right	[ ]	Array access
0	Left to right	( )	Grouping or function or method call
1	Right to left	++	Increment
1	Right to left	–	Decrement
1	Right to left	–	Negation
1	Right to left	~	Bitwise NOT
1	Right to left	!	Logical NOT
1	Right to left	delete	Remove object property or array value
1	Right to left	new	Create object
1	Right to left	typeof	Determine type
1	Right to left	void	Suppress expression evaluation
2	Left to right	*, /, %	Multiplication, division, modulus
3	Left to right	+, –	Addition, subtraction
3	Left to right	+	String concatenation
4	Left to right	>>	Bitwise right-shift with sign
4	Left to right	>>>	Bitwise right-shift with zero fill
4	Left to right	<<	Bitwise left-shift
5	Left to right	>,>=	Greater than, greater than or equal to
5	Left to right	<, <=	Less than, less than or equal to
6	Left to right	==	Equality
6	Left to right	!=	Inequality
6	Left to right	===	Equality with type checking (Identity)
6	Left to right	!==	Inequality with type checking (Non-identity)
7	Left to right	&	Bitwise AND
8	Left to right	^	Bitwise XOR
9	Left to right	|	Bitwise OR
10	Left to right	&&	Logical AND
11	Left to right	||	Logical OR
12	Right to left	? :	Conditional
13	Right to left	=	Assignment
13	Right to left	*=, /=, %=, +=, –=, <<=, >>=, >>>= , &=, ^=, |=	Assignment in conjunction with preceding operator
Lowest: 14	Left to right	,	Multiple evaluation