JavaScript - Operators Precedence
JavaScript Operators Precedence
Operator precedence (order of operations) is a collection of rules that reflect conventions about which procedures to perform first in order to evaluate a given expression.
For example, multiplication has higher precedence than addition. Thus, the expression 1 + 2 × 3 is interpreted to have the value 1 + (2 × 3) = 7, and not (1 + 2) × 3 = 9. When exponent is used in the expression, it has precedence over both addition and multiplication. Thus 3 + 52 = 28 and 3 × 52 = 75.
Operator Associativity
Operator associativity is the direction in which an expression is evaluated. For example:
var x = 10; var y = 20; //associativity of = operator is //Left to Right, hence x will become 20 x = y;
As the associativity of = is left to right. Hence x is assigned the value of y.
Example:
The example below illustrates the operator precedence in JavaScript.
var txt, retval1, retval2, retval3; //evaluates 5 * 2 first retval1 = 15 - 5 * 2; //above expression is equivalent to retval2 = 15 - (5 * 2); //forcing compiler to evaluate 15 - 5 first retval3 = (15 - 5) * 2; txt = "15 - 5 * 2 = " + retval1 + "<br>"; txt = txt + "15 - (5 * 2) = " + retval2 + "<br>"; txt = txt + "(15 - 5) * 2 = " + retval3 + "<br>";
The output (value of txt) after running above script will be:
15 - 5 * 2 = 5 15 - (5 * 2) = 5 (15 - 5) * 2 = 20
JavaScript Operators Precedence Table
The following table lists the precedence and associativity of JavaScript operators. Operators are listed top to bottom, in descending precedence. Operators with higher precedence are evaluated before operators with relatively lower precedence. When operators have the same precedence, associativity of the operators determines the order in which the operations are performed.
Precedence | Operator | Description | Associativity |
---|---|---|---|
21 | ( ) | Grouping | NA |
20 | new | new (with argument list) | |
. | Member Access | Left to Right | |
[ ] | Computed Member Access | ||
( ) | Function Call | ||
?. | Optional chaining | ||
19 | new | new (without argument list) | Right to Left |
18 | a++ a-- | Postfix Increment, Postfix Decrement | NA |
17 | ! | Logical NOT | Right to Left |
~ | Bitwise NOT | ||
+a -a | Unary plus, Unary negation | ||
++a --a | Prefix Increment, Prefix Decrement | ||
typeof | Type | ||
void | void operator | ||
delete | delete operator | ||
await | await operator | ||
16 | ** | Exponentiation | |
15 | * / % | Multiplication, Division, Remainder | Left to Right |
14 | + - | Addition, Subtraction | |
13 | << >> >>> | Bitwise left shift, right shift and unsigned right shift | |
12 | < <= > >= | Less than, Less than or equal, Greater than, and Greater than or equal | |
in | Property in Object | ||
instanceof | Instance of Object | ||
11 | == != | Equality, Inequality | |
=== !== | Strict Equality, Strict Inequality | ||
10 | & | Bitwise AND | |
9 | ^ | Bitwise XOR | |
8 | | | Bitwise OR | |
7 | && | Logical AND | |
6 | || | Logical OR | |
5 | ?? | Nullish coalescing operator | |
4 | ?: | Conditional (ternary) operator | Right to Left |
3 | = | Direct assignment | |
+= -= **= *= /= %= | Compound assignment by sum, difference, exponentiation, product, quotient and remainder | ||
<<= >>= >>>= | Compound assignment by Bitwise left shift, right shift and unsigned right shift | ||
&= ^= |= | Compound assignment by Bitwise AND, XOR and OR | ||
&&= ||= | Compound assignment by Logical AND, OR | ||
??= | Compound assignment by nullish coalescing operator | ||
2 | yield yield* | Pause Function | |
1 | , | Comma / Sequence | Left to Right |
❮ JavaScript - Operators