The Power of Javascript: Operators concluded - Operator Precedence and Associativity
(Page 5 of 5 )
I know that many of you are asking if the expression 6 + 2 * 4 produces the value 14 or the value 32? Actually it produces the value 14 (not 32) because the interpreter knows in advance which operators must be done first, which operators should be performed next, and so on. The interpreter knows what operators to perform first because each operator has a precedence (order of execution) that comes before or after the other operators. For our example, the multiplication operator has a higher precedence than the addition operator, so the multiplication operation is performed first, which produces the value 8; then the addition operation comes next, so 6 + 8 equal to 14.
The assignment operator (and its variations) has the lowest precedence. This makes sense because what we need in any statement is that the interpreter evaluate and calculate the expression, then assign the value to the variable. There's a way that we can change the precedence behavior and instruct the interpreter to perform the calculations in the order we want; we use the parentheses to delimit the expression that overrides the precedence. Actually, we should do this anyway to make the code more readable. For our example we could produce the value 32 by placing the parentheses around the lower precedence expression (6 + 2) * 4 .
By doing this we instruct the interpreter to add 6 and 2, then multiply by 4, so we get 32. So the parentheses itself is an operator with the highest precedence (with more than two operators; we will discuss this later). That's why the interpreter evaluates the expression that uses the parentheses first.
An Operator has an associativity which defines what direction the operator uses to perform the operation. For example, the addition Operator performs its operation from left to right. When we write something like 4 + 5 + 7, we have used only the addition operator, so the precedence is equal, and the interpreter has to use the associativity of the operator in order to know how it will produce a value out of this expression. Because the addition operator has a left-to-right associativity, it will begin evaluating from left to right, so 4 plus 5 (equals 9) plus 7 equals 16.
We have two types of associativity, left-to-right like the addition operator and right-to-left like the assignment operator, which begins by evaluating the value on the right and assigns it to the variable on the left. An expression like x = z = 10 assigns the value 10 to z, then assigns z to x.
The following table lists all the operators that we have discussed with their precedence and associativity. The highest operator precedence begins with 0 and increases for lower precedence operators. The associativity column specifies whether the operator works from left-to-right or from right-to-left.
Precedence | Associativity | Operator |
| 0 | left-to-right | () The Parentheses Operator |
| 1 | right-to-left | ++ The Increment Operator |
| 1 | right-to-left | -- The Decrement Operator |
| 1 | right-to-left | - the Unary Minus |
| 1 | right-to-left | ~ The Bitwise NOT |
| 1 | right-to-left | ! The Logical NOT |
| 1 | right-to-left | typeof Operator |
| 1 | right-to-left | void Operator |
| 2 | left-to-right | *, /, % |
| 3 | left-to-right | + Addition and - Subtraction Operators |
| 4 | left-to-right | >> Right Shift With Sign |
| 4 | left-to-right | >>> Right Shift With Zero Fill |
| 4 | left-to-right | << Bitwise Left Shift |
| 5 | left-to-right | > and >= Operators |
| 5 | left-to-right | < and <= Operators |
| 6 | left-to-right | == The Equal Operator |
| 6 | left-to-right | != The Not Equal Operator |
| 6 | left-to-right | === The Strict Equal to Operator |
| 6 | left-to-right | !== The Strict NOT Equal to Operator |
| 7 | left-to-right | The Bitwise & |
| 8 | left-to-right | The Bitwise XOR ^ |
| 9 | left-to-right | The Bitwise OR | |
| 10 | left-to-right | The Logical AND && |
| 11 | left-to-right | The Logical OR || |
| 12 | right-to-left | :? The Conditional Operator |
| 13 | right-to-left | = The Assignment Operator |
| 13 | right-to-left | The Combined Assignment Operators: *=, /=, %=, +=, -=, <<=, >>=, >>>=, &=, ^=, |= |
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
