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:

1. 10 - 5 = 5
2. 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:

1. c = 5
2. b = c (which is 5)
3. 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:

1. 3 * 4 = 12 (multiplication has higher precedence)
2. 2 + 12 = 14
3. 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:

1. x < y is true
2. y < z is true
3. true && true is true
4. x > z is false
5. 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:

1. b * c = 20
2. a + 20 = 23
3. c (a + b) = 5 7 = 35
4. 23 > 35 is false
5. a < b is true
6. 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.

1. z = 5
2. y = z (which is 5)
3. x = y (which is 5)
4. x == y is true
5. 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