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:

5 + 8 + 2 * 2

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:

(5 + 8 + 2) * 2

 

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:

5 + 6 - 11 + 8 * 5 + 4 = ?

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

5 + 6 - 11 + 40 + 4 = ?

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:

An example using operator precedence and associativity to evaluate an expression