JavaScript Notes

Operator Precedence in JavaScript

Operator precedence determines the order in which operators are evaluated in expressions. Operators with higher precedence are evaluated before operators with lower precedence.

Simple Example

Consider the following expression:

let result = 3 + 4 * 2;

In this example, the multiplication (*) operator has higher precedence than the addition (+) operator, so the multiplication is performed first:

1. 4 * 2 is evaluated first, resulting in 8.
2. Then 3 + 8 is evaluated, resulting in 11.

Precedence Table

Here’s a simplified table of some common operators, ordered from highest to lowest precedence:

Associativity

In addition to precedence, operators also have associativity, which can be either left-to-right or right-to-left. Associativity determines the order in which operators of the same precedence level are evaluated.

• Left-to-Right Associativity: Operators are evaluated from left to right.
  • Example: 3 - 4 + 5 is evaluated as (3 - 4) + 5.
• Right-to-Left Associativity: Operators are evaluated from right to left.
  • Example: a = b = c is evaluated as a = (b = c).

Practical Examples

Example 1: Mixing Addition and Multiplication

let result = 5 + 3 * 2;

• Multiplication has higher precedence than addition.
• 3 * 2 is evaluated first, resulting in 6.
• Then 5 + 6 is evaluated, resulting in 11.

Example 2: Using Parentheses to Change Precedence

let result = (5 + 3) * 2;

• Parentheses have the highest precedence.
• 5 + 3 is evaluated first, resulting in 8.
• Then 8 * 2 is evaluated, resulting in 16.

Example 3: Logical Operators

let a = true;
let b = false;
let result = a && !b;

• The logical NOT (!) operator has higher precedence than the logical AND (&&) operator.
• !b is evaluated first, resulting in true.
• Then a && true is evaluated, resulting in true.

Example 4: Ternary Operator

let result = true ? false ? 1 : 2 : 3;
console.log(result); // 2

• false ? 1 : 2 is evaluated first, resulting in 2.
• Then true ? 2 : 3 is evaluated, resulting in 2.

Summary

• Operator Precedence: Determines the order in which operators are evaluated.
  • Higher precedence operators are evaluated before lower precedence operators.
• Associativity: Determines the order in which operators of the same precedence level are evaluated.
  • Left-to-right or right-to-left.
• Use Parentheses: Parentheses can be used to explicitly define the order of evaluation in complex expressions.

Understanding operator precedence and associativity helps in writing clear and accurate expressions in JavaScript, avoiding unexpected results and making the code more readable.