Operator Precedence

Operator precedence determines the order in which operators are evaluated in an expression. JavaScript follows a set of rules to determine the precedence of operators. When multiple operators are used in an expression, JavaScript evaluates them based on their precedence level. If two operators have the same precedence level, the associativity of the operators determines the order of evaluation.

Rules for Operator Precedence

Here are the rules for operator precedence in JavaScript:

Grouping (): Parentheses have the highest precedence and are used to group expressions. Expressions inside parentheses are evaluated first.
Member Access .: The dot operator (.) has the next highest precedence and is used to access properties of an object.
Computed Member Access []: The square brackets ([]) have the next highest precedence and are used to access properties of an object using a computed value.
Function Call (): The function call operator (()) has the next highest precedence and is used to call functions.
New Operator new: The new operator has higher precedence than the function call operator and is used to create instances of objects.
Increment/Decrement ++ --: The increment (++) and decrement (--) operators have higher precedence than most other operators.
Logical NOT !: The logical NOT operator (!) has higher precedence than most other operators and is used to invert the value of a boolean expression.
Unary Plus/Minus + -: The unary plus (+) and unary minus (-) operators have higher precedence than most other operators.
Exponentiation **: The exponentiation operator (**) has higher precedence than multiplication, division, and modulo operators.
Multiplication/Division/Modulo * / %: The multiplication (*), division (/), and modulo (%) operators have the same precedence level and are evaluated from left to right.
Addition/Subtraction + -: The addition (+) and subtraction (-) operators have the same precedence level and are evaluated from left to right.

Understanding Precedence and Associativity

Precedence determines the order in which operators are evaluated in an expression. Operators with higher precedence are evaluated first. If two operators have the same precedence level, the associativity of the operators determines the order of evaluation. Associativity specifies the order in which operators of the same precedence level are evaluated.

Consider an expression represented below, where op1 and op2 are just placeholders for any operators:

operand1 op1 operand2 op2 operand3

Let's look at the interpretation of the example above as it can be evaluated in two ways:

Types of Associativity

Left-to-Right Associativity: If the operators op1 and op2 have the same precedence level and are left-to-right associative, the expression is evaluated as follows:
```
(operand1 op1 operand2) op2 operand3
```
Right-to-Left Associativity: If the operators op1 and op2 have the same precedence level and are right-to-left associative, the expression is evaluated as follows:
```
 operand1 op1 (operand2 op2 operand3)
```

If the operators have different precedence levels, the operator with the higher precedence is evaluated first. If the operators have the same precedence level, the associativity of the operators determines the order of evaluation.

It is important to note that most arithmetic operators in JavaScript have left-to-right associativity, meaning they are evaluated from left to right. However, the exponentiation operator (**) and the assignment operators have right-to-left associativity.

Examples

Let's use different examples to illustrate the concept of operator precedence and associativity.

operator-precedence-example.js
console.log(5 + 3 * 2); // Output: 11

In the example above, the multiplication operator (*) has a higher precedence than the addition operator (+). Therefore, the expression is interpreted as 5 + (3 * 2), resulting in 5 + 6 = 11.

Example to illustrate left-to-right associativity:

operator-associativity-example.js
console.log(5 - 3 + 2); // Output: 4

In the example above, the subtraction operator (-) and the addition operator (+) have the same precedence level. Since they are left-to-right associative, the expression is evaluated as (5 - 3) + 2, resulting in 2 + 2 = 4.

Example to illustrate right-to-left associativity:

operator-associativity-example.js
console.log(5 ** 3 ** 2); // Output: 1953125

In the example above, the exponentiation operator (**) has right-to-left associativity. Therefore, the expression is evaluated as 5 ** (3 ** 2), resulting in 5 ** 9 = 1953125.

Example with parentheses:

operator-precedence-parentheses-example.js
console.log((5 + 3) * 2); // Output: 16

In the example above, the parentheses have the highest precedence. Therefore, the expression inside the parentheses is evaluated first as 5 + 3 = 8. Then, the multiplication operator (*) is evaluated, resulting in 8 * 2 = 16.

Example with multiple operators:

operator-precedence-multiple-operators-example.js
console.log(5 + 3 * 2 / 4); // Output: 6.5

In the example above, the multiplication operator (*) and the division operator (/) have the same precedence level. Since they are left-to-right associative, the expression is evaluated as 5 + ((3 * 2) / 4), resulting in 5 + (6 / 4) = 5 + 1.5 = 6.5.

Example with different precedence levels:

operator-precedence-different-precedence-example.js
console.log(5 + 3 ** 2); // Output: 14

In the example above, the exponentiation operator (**) has a higher precedence than the addition operator (+). Therefore, the expression is interpreted as 5 + (3 ** 2), resulting in 5 + 9 = 14.

Examples with assignment operators:

operator-precedence-assignment-example.js
console.log(5 + (x = 3) * 2); // Output: 11

In the example above, the assignment operator (=) has a lower precedence than the addition operator (+) and the multiplication operator (*). Therefore, the expression is evaluated as 5 + (x = 3) * 2. The assignment operator assigns the value 3 to the variable x, and the expression is evaluated as 5 + 3 * 2 = 5 + 6 = 11.

operator-precedence-assignment-example.js
console.log(a = b = 5); // Output: 5

In the example above, the assignment operator (=) has right-to-left associativity. Therefore, the expression is evaluated as a = (b = 5). The value 5 is assigned to the variable b, and then the value of b is assigned to the variable a, resulting in both a and b having the value 5.