JavaScript - Operator Precedence
Hello there, aspiring programmers! Today, we're going to dive into a topic that might sound a bit intimidating at first, but I promise you, it's not as scary as it seems. We're talking about JavaScript Operator Precedence. Think of it as the "pecking order" for math in programming. Let's break it down together!
What is Operator Precedence?
Before we jump into the deep end, let's start with the basics. Operator precedence is like the order of operations you learned in math class. Remember PEMDAS (Parentheses, Exponents, Multiplication, Division, Addition, Subtraction)? Well, JavaScript has its own version of this!
Operator precedence determines how operators are parsed concerning each other. Operators with higher precedence become the operands of operators with lower precedence.
Let's look at a simple example:
let result = 5 + 3 * 2;
console.log(result); // Output: 11
You might think the answer should be 16 (5 + 3 = 8, then 8 2 = 16), but it's actually 11. Why? Because multiplication has higher precedence than addition. So, 3 2 is calculated first (giving 6), and then 5 is added to it.
Associativity
Now, let's talk about a fancy word: associativity. Don't worry, it's simpler than it sounds!
Associativity determines the order in which operators of the same precedence are processed. It can be either left-to-right or right-to-left.
Left-to-Right Associativity
Most operators follow left-to-right associativity. This means they're evaluated from left to right. Let's look at an example:
let a = 10 - 5 - 2;
console.log(a); // Output: 3
Here's how JavaScript processes this:
- 10 - 5 = 5
- 5 - 2 = 3
Right-to-Left Associativity
Some operators, like the assignment operator (=), have right-to-left associativity. Let's see how this works:
let a, b, c;
a = b = c = 5;
console.log(a, b, c); // Output: 5 5 5
JavaScript processes this from right to left:
- c = 5
- b = c (which is 5)
- a = b (which is 5)
Operator Precedence Table
Now, let's look at the "menu" of operator precedences in JavaScript. Don't worry if you don't understand all of these yet - we'll go through some examples!
Precedence | Operator Type | Associativity | Operators |
---|---|---|---|
19 | Grouping | n/a | ( ... ) |
18 | Member Access | left-to-right | . [] |
17 | Function Call | left-to-right | ... ( ) |
16 | New (with argument list) | n/a | new ... ( ) |
15 | Postfix Increment/Decrement | n/a | ... ++ ... -- |
14 | Logical NOT, Bitwise NOT, Unary Plus/Minus, Prefix Increment/Decrement, typeof, void, delete, await | right-to-left | ! ~ + - ++ -- typeof void delete await |
13 | Exponentiation | right-to-left | ** |
12 | Multiplication, Division, Remainder | left-to-right | * / % |
11 | Addition, Subtraction | left-to-right | + - |
10 | Bitwise Shift | left-to-right | << >> >>> |
9 | Relational | left-to-right | < <= > >= in instanceof |
8 | Equality | left-to-right | == != === !== |
7 | Bitwise AND | left-to-right | & |
6 | Bitwise XOR | left-to-right | ^ |
5 | Bitwise OR | left-to-right | | |
4 | Logical AND | left-to-right | && |
3 | Logical OR | left-to-right | || |
2 | Conditional | right-to-left | ?: |
1 | Assignment | right-to-left | = += -= *= /= %= <<= >>= >>>= &= ^= |= **= |
0 | Comma | left-to-right | , |
Examples
Now, let's put this knowledge into practice with some examples!
Example 1: Arithmetic Operations
let result = 2 + 3 * 4 - 1;
console.log(result); // Output: 13
Here's how JavaScript evaluates this:
- 3 * 4 = 12 (multiplication has higher precedence)
- 2 + 12 = 14
- 14 - 1 = 13
Example 2: Logical Operations
let x = 5;
let y = 10;
let z = 15;
let result = x < y && y < z || x > z;
console.log(result); // Output: true
Let's break this down:
- x < y is true
- y < z is true
- true && true is true
- x > z is false
- true || false is true
Remember, && (AND) has higher precedence than || (OR).
Example 3: Mixed Operations
let a = 3;
let b = 4;
let c = 5;
let result = a + b * c > c * (a + b) && a < b;
console.log(result); // Output: false
This looks complicated, but let's take it step by step:
- b * c = 20
- a + 20 = 23
- c (a + b) = 5 7 = 35
- 23 > 35 is false
- a < b is true
- false && true is false
Example 4: Assignment and Comparison
let x, y, z;
x = y = z = 5;
console.log(x, y, z); // Output: 5 5 5
let result = x == y === z;
console.log(result); // Output: true
Remember, assignment (=) has right-to-left associativity, while equality comparisons (==, ===) have left-to-right associativity.
- z = 5
- y = z (which is 5)
- x = y (which is 5)
- x == y is true
- true === z is true (because z is 5, which is truthy)
Conclusion
Congratulations! You've just taken your first steps into understanding JavaScript operator precedence. Remember, practice makes perfect. Don't be afraid to experiment with different combinations of operators - that's how you'll really internalize these concepts.
And here's a pro tip: when in doubt, use parentheses! They have the highest precedence and can make your code more readable. For example:
let result = (2 + 3) * 4 - 1;
console.log(result); // Output: 19
This way, you're explicitly telling JavaScript how you want the expression evaluated.
Keep coding, keep learning, and most importantly, have fun! JavaScript is a powerful language, and understanding these fundamentals will set you up for success in your programming journey.
Credits: Image by storyset