Operator precedence in JavaScript determines the order in which operators are evaluated in an expression. When an expression contains multiple operators, the operator with higher precedence is executed first. Think of it as the order of operations for JavaScript, similar to PEMDAS in mathematics.
Example 1: Multiplication and Addition
// Multiplication has a higher precedence than addition.
let result = 10 + 5 * 2; // 5 * 2 is evaluated first.
console.log(result); // Output: 20
Explanation
In this example, the multiplication operator (*) has a higher precedence than the addition operator (+). Therefore, 5 * 2 is calculated first, resulting in 10. Then, 10 is added to 10, giving the final result of 20.
Example 2: Grouping with Parentheses
// Parentheses are used to override the default operator precedence.
let result = (10 + 5) * 2; // The expression inside the parentheses is evaluated first.
console.log(result); // Output: 30
Explanation
The grouping operator () has the highest precedence. This forces the expression 10 + 5 to be evaluated first, yielding 15. After that, 15 is multiplied by 2 to produce 30.
Example 3: Right-to-Left Associativity
// Assignment operators have right-to-left associativity.
let x;
let y;
let z;
x = y = z = 10; // The assignments happen from right to left.
console.log(x, y, z); // Output: 10 10 10
Explanation
Assignment operators are evaluated from right to left. First, z is assigned the value of 10. Then, y is assigned the value of z (which is 10), and finally, x is assigned the value of y (which is also 10).
Example 4: Logical Operators
// Logical AND (&&) has a higher precedence than logical OR (||).
let result = true || false && false; // false && false is evaluated first.
console.log(result); // Output: true
Explanation
The logical AND (&&) operator has higher precedence than the logical OR (||) operator. Thus, false && false is evaluated first, which results in false. Then, the expression becomes true || false, which evaluates to true.
Example 5: Member Access and new
// The member access operator (.) has higher precedence than the 'new' operator.
function MyClass() {
this.property = "Hello";
}
let result = new MyClass().property; // The 'new MyClass()' is evaluated.
console.log(result); // Output: "Hello"
Explanation
In this case, new MyClass() is executed to create an object. The member access operator (.) then retrieves the property value from the newly created object instance.
Example 6: Exponentiation and Unary Negation
// The exponentiation operator (**) has higher precedence than unary negation (-).
let result = -2 ** 2; // 2 ** 2 is evaluated first.
console.log(result); // Output: -4
Explanation
The exponentiation operator (**) is evaluated before the unary negation (-). So, 2 ** 2 results in 4, and then the negation is applied, making the final result -4.
Example 7: Relational and Equality Operators
// Relational operators (<, >) have higher precedence than equality operators (==, !=).
let result = 10 > 5 == 5 > 2; // The two relational expressions are evaluated first.
console.log(result); // Output: true
Explanation
The greater than (>) operators are evaluated first. 10 > 5 is true, and 5 > 2 is also true. The expression then becomes true == true, which evaluates to true.