While performing an operation, the high precedence operators are considered the operands of lower precedence operators. This signifies that, in a given operation, the operator having the higher precedence are evaluated first.
This write-up will discuss the working of Operator Precedence in JavaScript.
Operator Precedence in JavaScript
Before writing any expression in JavaScript, it is important to know the order in which the added operations will be performed, as it ensures that you attain the desired results.
Each JavaScript operator has a “level of importance” or “Precedence order” compared to other operators, so the operators with high precedence are executed before the low precedence operators. Moreover, another term involved in this whole procedure is known as “Associativity”.
Operators Associativity in JavaScript
The associativity of the operators decides the direction of conducting operations which can be “left-to-right” or “right-to-left”.
“left-to-right” associativity exists for the arithmetic operators such as addition, multiplication, subtraction, and division. In comparison, other operators such as the Boolean “NOT” operator and all assignment operators are based on “right-to-left” associativity.
Example: Operators Associativity in JavaScript
Subtraction is an excellent example of an operation in which associativity is important. For instance, the result of subtracting “4 from 9” is not the same as subtracting “9 from 4”:
var y = 4 - 9;
console.log(x)
console.log(y)
Levels of Operator Precedence in JavaScript
Operator precedence in JavaScript is divided into 19 different levels. Check out the below-given table to know more about them:
| Type of Operator | Associativity | Individual operators | Precedence Order |
| Grouping | n/a | ( … ) | 19 |
| Optional chaining | left-to-right | ?. | 18 |
| new (with argument list) | n/a | new … ( … ) | |
| Member Access | left-to-right | … . … | |
| Computed Member Access | left-to-right | … [ … ] | |
| Function Call | left-to-right | … ( … ) | |
| new (without argument list) | right-to-left | new … | 17 |
| Postfix Increment | n/a | … ++ | 16 |
| Postfix Decrement | … — | ||
| Prefix Increment | right-to-left | ++ … | 15 |
| Bitwise NOT (~) | … | ||
| Unary plus (+) | + … | ||
| Logical NOT (!) | ! … | ||
| Unary negation (-) | – … | ||
| Prefix Decrement | — … | ||
| void | void … | ||
| await | await … | ||
| delete | delete … | ||
| typeof | typeof … | ||
| Exponentiation (**) | right-to-left | … ** … | 14 |
| Multiplication (*) | left-to-right | … * … | 13 |
| Remainder (%) | … % … | ||
| Division | … / … | ||
| Addition (+) | left-to-right | … + … | 12 |
| Subtraction (-) | … – … | ||
| Bitwise Left Shift (<<) | left-to-right | … << … | 11 |
| Bitwise Right Shift (>>) | … >> … | ||
| Bitwise Unsigned Right Shift (>>>) | … >>> … | ||
| Greater Than (>) | left-to-right | … > … | 10 |
| less Than (>) | … < … | ||
| Greater Than Or Equal (>=) | … >= … | ||
| Less Than Or Equal (<=) | … <= … | ||
| instanceof | … instanceof … | ||
| in | … in … | ||
| Inequality (!=) | left-to-right | … != … | 9 |
| Strict Inequality (!==) | … !== … | ||
| Strict Inequality (===) | … === … | ||
| Equality (==) | … == … | ||
| Bitwise AND (&) | left-to-right | … & … | 8 |
| Bitwise XOR (^) | left-to-right | … ^ … | 7 |
| Bitwise OR (|) | left-to-right | … | … | 6 |
| Logical AND (&&) | left-to-right | … && … | 5 |
| Nullish coalescing operator (??) | left-to-right | … ?? … | 4 |
| Logical OR (||) | left-to-right | … || … | |
| Conditional (ternary) operator | right-to-left | … ? … : … | 3 |
| Assignment | right-to-left | … = … | 2 |
| … += … | |||
| … -= … | |||
| … **= … | |||
| … *= … | |||
| … /= … | |||
| … %= … | |||
| … <<= … | |||
| … >>= … | |||
| … >>>= … | |||
| … &= … | |||
| … ^= … | |||
| … |= … | |||
| … &&= … | |||
| … ||= … | |||
| … ??= … | |||
| yield | right-to-left | yield … | |
| yield* | yield* … | ||
| Sequence / Comma | left-to-right | … , … | 1 |
Example: How does Operator Precedence work in JavaScript
Consider the following expression:
We have added three instances of the “+” addition operator in the above expression. Without any operator precedence, the stated expression may yield a different value; however, we will solve it as per precedence order.
According to the table given in the previous section, the multiplication operator “*” has higher precedence than the precedence of addition and subtraction operators, so it will be performed first. Both addition and subtraction operators have same precedence order, which means they are on the same level, and JavaScript will evaluate them from left to right.
JavaScript will perform the following steps behind the scenes to evaluate the given expression:
First of all, it will multiply 7 * 4 which equal to “28” and then update the equation as:
Next, the expression will be evaluated from “left-to-right” direction, starting from “4 + 5” addition operation which results “9”:
Then, “10” is subtracted from the “9” which yield “-2” value:
After doing so, “28” will be subtracted from “-1”:
In the last step, the addition operation is performed for the number “27 + 3” which results in “30”:
We have provided the essential information related to the working of operator precedence in JavaScript. You can explore this topic further according to your requirements.
Conclusion
In JavaScript, each operator has a Precedence Order, which works in such a way that operators with high precedence are executed before the low precedence operators, and the high precedence operators are considered as the operands of lower precedence operators. The operator precedence assists in evaluating a mathematical expression in the correct sequence. This write-up discussed the working of operator precedence in JavaScript.
