JavaScript - Operator Precedence

Xin chào các bạn đang học lập trình! Hôm nay, chúng ta sẽ cùng tìm hiểu về một chủ đề có thể听起来 khá đáng sợ ban đầu, nhưng tôi đảm bảo với các bạn, nó không phải là điều gì đó quá đáng sợ. Chúng ta sẽ nói về JavaScript Operator Precedence. Hãy tưởng tượng nó như là "thứ tự ưu tiên" cho toán học trong lập trình. Hãy cùng nhau phân tích nó!

What is Operator Precedence?

Trước khi chúng ta nhảy vào phần sâu hơn, hãy bắt đầu từ những điều cơ bản. Operator precedence giống như thứ tự các phép toán mà bạn đã học trong lớp toán. Nhớ lại PEMDAS (Phẩy, Lũy thừa, Nhân, Chia, Cộng, Trừ)? JavaScript cũng có phiên bản riêng của nó!

Operator precedence xác định cách các phép toán được phân tích liên quan đến nhau. Các phép toán có thứ tự ưu tiên cao hơn sẽ trở thành phần tử của các phép toán có thứ tự ưu tiên thấp hơn.

Hãy xem một ví dụ đơn giản:

let result = 5 + 3 * 2;
console.log(result); // Output: 11

Bạn có thể nghĩ rằng câu trả lời nên là 16 (5 + 3 = 8, sau đó 8 2 = 16), nhưng thực tế nó là 11. Tại sao? Vì phép nhân có thứ tự ưu tiên cao hơn phép cộng. Vậy nên, 3 2 được tính trước (đưa ra 6), và sau đó 5 được cộng vào.

Associativity

Bây giờ, hãy nói về một từ ngữ听起来 khá phức tạp: associativity. Đừng lo lắng, nó đơn giản hơn bạn nghĩ!

Associativity xác định thứ tự mà các phép toán có cùng thứ tự ưu tiên được xử lý. Nó có thể là left-to-right hoặc right-to-left.

Left-to-Right Associativity

Hầu hết các phép toán theo left-to-right associativity. Điều này có nghĩa là chúng được đánh giá từ trái sang phải. Hãy xem một ví dụ:

let a = 10 - 5 - 2;
console.log(a); // Output: 3

Đây là cách JavaScript xử lý điều này:

1. 10 - 5 = 5
2. 5 - 2 = 3

Right-to-Left Associativity

Một số phép toán, như phép toán gán (=), có right-to-left associativity. Hãy xem cách này hoạt động:

let a, b, c;
a = b = c = 5;
console.log(a, b, c); // Output: 5 5 5

JavaScript xử lý từ phải sang trái:

1. c = 5
2. b = c (mà là 5)
3. a = b (mà là 5)

Operator Precedence Table

Bây giờ, hãy xem bảng "menu" của thứ tự ưu tiên các phép toán trong JavaScript. Đừng lo nếu bạn chưa hiểu hết tất cả các phép toán này - chúng ta sẽ qua một số ví dụ!

Thứ tự ưu tiên	Loại phép toán	Associativity	Phép toán
19	Nhóm	n/a	( ... )
18	Truy cập thành viên	trái sang phải	. []
17	Gọi hàm	trái sang phải	... ( )
16	New (với danh sách đối số)	n/a	new ... ( )
15	Tăng/giảm hậu tố	n/a	... ++ ... --
14	Logic NOT, Bitwise NOT, Unary Plus/Minus, Prefix Increment/Decrement, typeof, void, delete, await	phải sang trái	! ~ + - ++ -- typeof void delete await
13	Lũy thừa	phải sang trái	**
12	Nhân, Chia, Dư	trái sang phải	* / %
11	Cộng, Trừ	trái sang phải	+ -
10	Dịch bit	trái sang phải	<< >> >>>
9	So sánh	trái sang phải	< <= > >= in instanceof
8	Bình đẳng	trái sang phải	== != === !==
7	AND bit	trái sang phải	&
6	XOR bit	trái sang phải	^
5	OR bit	trái sang phải	|
4	AND logic	trái sang phải	&&
3	OR logic	trái sang phải	||
2	Đ điều kiện	phải sang trái	?:
1	Gán	phải sang trái	= += -= *= /= %= <<= >>= >>>= &= ^= |= **=
0	Dấu phẩy	trái sang phải	,

Examples

Bây giờ, hãy áp dụng kiến thức này vào một số ví dụ!

Ví dụ 1: Phép toán số học

let result = 2 + 3 * 4 - 1;
console.log(result); // Output: 13

Đây là cách JavaScript đánh giá điều này:

1. 3 * 4 = 12 (phép nhân có thứ tự ưu tiên cao hơn)
2. 2 + 12 = 14
3. 14 - 1 = 13

Ví dụ 2: Phép toán logic

let x = 5;
let y = 10;
let z = 15;

let result = x < y && y < z || x > z;
console.log(result); // Output: true

Hãy phân tích điều này:

1. x < y là true
2. y < z là true
3. true && true là true
4. x > z là false
5. true || false là true

Nhớ rằng && (AND) có thứ tự ưu tiên cao hơn || (OR).

Ví dụ 3: Phép toán hỗn hợp

let a = 3;
let b = 4;
let c = 5;

let result = a + b * c > c * (a + b) && a < b;
console.log(result); // Output: false

Điều này có vẻ phức tạp, nhưng hãy cùng xem xét từng bước:

1. b * c = 20
2. a + 20 = 23
3. c (a + b) = 5 7 = 35
4. 23 > 35 là false
5. a < b là true
6. false && true là false

Ví dụ 4: Gán và So sánh

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

Nhớ rằng phép gán (=) có right-to-left associativity, trong khi phép so sánh (==, ===) có left-to-right associativity.

1. z = 5
2. y = z (mà là 5)
3. x = y (mà là 5)
4. x == y là true
5. true === z là true (vì z là 5, mà là truthy)

Conclusion

Chúc mừng! Bạn đã chính thức bước đầu hiểu về JavaScript operator precedence. Nhớ rằng, thực hành là cách tốt nhất để hoàn thiện. Đừng ngại thử nghiệm với các kết hợp khác nhau của các phép toán - đó là cách bạn sẽ thực sự nắm vững các khái niệm này.

Và đây là một lời khuyên chuyên nghiệp: khi nghi ngờ, hãy sử dụng dấu phẩy! Chúng có thứ tự ưu tiên cao nhất và có thể làm cho mã của bạn dễ đọc hơn. Ví dụ:

let result = (2 + 3) * 4 - 1;
console.log(result); // Output: 19

Bằng cách này, bạn đang rõ ràng cho JavaScript cách bạn muốn biểu thức được đánh giá.

Tiếp tục lập trình, tiếp tục học hỏi, và quan trọng nhất, hãy vui vẻ! JavaScript là một ngôn ngữ mạnh mẽ, và việc hiểu rõ các nguyên tắc cơ bản này sẽ giúp bạn thành công trong hành trình lập trình của mình.

Credits: Image by storyset