Let's take a look at some examples to better understand how these rules work:
let x = 5; let y = 10; let z = 15; let result = x + y * z; console.log(result); // Output: 155
In this example, y * z is evaluated first, resulting in the value 150. Then, x is added to 150 to give a final result of 155.
let x = 5; let y = 10; let z = 15; let result = (x + y) * z; console.log(result); // Output: 225
In this example, the parentheses force the addition of x and y to be evaluated first, resulting in the value 15. Then, 15 is multiplied by z to give a final result of 225.
let x = 5; let y = 10; let z = 15; let result = x > y && y < z; console.log(result); // Output: false
In this example, the relational operator > is evaluated first, resulting in false. Then, the logical AND operator && is evaluated, but since one of its operands is false, the final result is also false.
let x = 5; let y = 10; let z = 15; let result = x < y || y < z; console.log(result); // Output: true
In this example, the less-than operator < is evaluated first, resulting in true. Then, the logical OR operator || is also evaluated, and since one of its operands is true, the final outcome is true.
It's important to keep in mind that while operator precedence is significant to understand, it can also be confusing and lead to mistakes if not used carefully. It's always a good idea to use parentheses to clarify the order of evaluation when there is any ambiguity.
Here are some additional examples of expressions with different operators and their resulting values:
let a = 10; let b = 5; let c = 2; let result = a / b * c; console.log(result); // Output: 4
In this example, the division operator / is evaluated first, resulting in the value 2. Then, 2 is multiplied by c, resulting in the final value of 4.
let a = 5; let b = 3; let result = a++ + b--; console.log(result); // Output: 8
In this example, the post increment operator ++ and post decrement operator -- have higher precedence than the addition + operator. The values of a and b are first used in the addition, resulting in the sum of 8. Then, the values of a and b are incremented and decremented, respectively.
let a = 5; let b = 3; let result = !(a > b); console.log(result); // Output: false
In this case, the greater-than relational operator (>) has higher precedence than the logical negation operator (!). The expression a > b evaluates to true, after which the logical NOT operator (!) is applied, resulting in a final value of false.
Associativity rules specify the order in which operators with the same precedence are evaluated. There are two types of associativity: left-to-right and right-to-left.
Left-to-right associativity means that operators with the same precedence are evaluated from left to right. For example, the addition operator + has left-to-right associativity, so expressions like 3 + 4 + 5 are evaluated as (3 + 4) + 5 and result in 12.
Right-to-left associativity means that operators with the same precedence are evaluated from right to left. For example, the assignment operator = has right-to-left associativity, so expressions like a = b = c are evaluated as a = (b = c) and result in c being assigned to both b and a.
let result = 3 - 2 - 1; console.log(result); // Output: 0
In this example, the subtraction operator - has left-to-right associativity. The expression is evaluated as (3 - 2) - 1, which results in 0.
let a = 1; let b = 2; let c = 3; a += b += c; console.log(a); // Output: 6 console.log(b); // Output: 5 console.log(c); // Output: 3
In this example, the compound assignment operator += has right-to-left associativity. The expression is evaluated as a += (b += c), which results in a being assigned the value of 6, b being assigned the value of 5, and c retaining its original value of 3.
As the mathematician and philosopher Blaise Pascal once said, "Clarity of thought means clarity of expression." By understanding the rules of operator precedence and associativity, you can express your ideas clearly and effectively in code.
Related Tutorials to watch
Top Articles toRead