Operator precedence

The order in which operators are evaluated in an expression is referred to as operator precedence. It is particularly noticeable in algebra when solving equations. In algebra, for example, division and multiplication have higher precedence over addition and subtraction. In the following simple arithmetic equation:

multiplication is performed first. Thus the result will be 5 + 8 + 4 = 17, not 30 if you added first and then multiplied by 2! If you wanted to force a particular precedence order, you may use parenthesis because expressions grouped with parentheses are evaluated first. If we wanted to perform addition before multiplication in the previous example, we may write our expression as:

 

Associativity in JavaScript

Expression evaluation is also influenced by the operator associativity. Associativity means the direction (right to left or left to right) in which entire expression is evaluated. If two or more operators with the same level of precedence appear in an expression, which will be evaluated first? The operator associativity answers this question. Consult table 1 to resolve any associativity or precedence issue in JavaScript.

Table 1 operator precedence and associativity in JavaScript
Operator	Operator Use	Operator Associativity	Operator Precedence
()	Method/function call, grouping	Left to right	Highest — 1
[]	Array access	Left to right	1
.	Object property access	Left to right	1
++	Increment	Right to left	2
--	Decrement	Right to left	2
-	Negation	Right to left	2
!	Logical NOT	Right to left	2
~	Bitwise NOT	Right to left	2
delete	Removes array value or object property	Right to left	2
new	Creates an object	Right to left	2
typeof	Returns data type	Right to left	2
void	Specifies no value to return	Right to left	2
/	Division	Left to right	3
*	Multiplication	Left to right	3
%	Modulus	Left to right	3
+	Plus	Left to right	4
+	String Concatenation	Left to right	4
-	Subtraction	Left to right	4
>>	Bitwise right-shift	Left to right	5
<<	Bitwise left-shift	Left to right	5
>, >=	Greater than, greater than or equal to	Left to right	6
<, <=	Less than, less than or equal to	Left to right	6
==	Equality	Left to right	7
!=	Inequality	Left to right	7
===	Identity operator — equal to (and same data type)	Left to right	7
!==	Non-identity operator — not equal to (or don't have the same data type)	Left to right	7
&	Bitwise AND	Left to right	8
^	Bitwise XOR	Left to right	9
|	Bitwise OR	Left to right	10
&&	Logical AND	Left to right	11
||	Logical OR	Left to right	12
?:	Conditional branch	Left to right	13
=	Assignment	Right to left	14
*=, /=, %=, +=,, -=, <<=, >>=, >>>=, &=, ^=, |=	Assignment according to the preceding operator	Right to left	14
,	Multiple evaluation	Left to right	Lowest: 15

Consider the following example:

In this example, we are using three instances of the addition/plus (+) operator. Without a predefined operator order precedence, we'll likely all have different answers. Fortunately, we can use the precedence and associativity of JavaScript's operators information shown in table 1 to avoid any conflicting results. According to this table, the multiplication operator (*) has higher precedence than plus and subtraction operators. Also, the table indicates the plus operator and the subtraction operator has the same level of precedence and their associativity indicates that we evaluate them left to right.

So to evaluate this expression, we'll first multiply 8 * 5 which will equal 40. After this operation is performed, our arithmetic expression becomes

We evaluate this expression left to right starting with adding 5 + 6. This yields 11. Next we subtract 11 from 11 and this yields 0. So, we are left with 0 + 40 + 4 which equals 44. The following shows sequence of operations used to obtain the final result: