Độ ưu tiên của toán tử (Operator Precedence) trong JavaScript

let result = 10 + 5 * 2; // Kết quả vẫn đúng mà không cần dấu ngoặc

Ví dụ minh họa về cách toán tử có độ ưu tiên khác nhau ảnh hưởng đến kết quả

Dưới đây là một số ví dụ về độ ưu tiên của toán tử:

Ví dụ 1: Toán tử số học có độ ưu tiên khác nhau

let x = 10 + 5 * 2;  
console.log(x); // Output: 20

• Phép nhân (*) có độ ưu tiên cao hơn phép cộng (+), nên 5 * 2 được thực hiện trước, rồi mới cộng với 10.

Ví dụ 2: Toán tử so sánh và logic có độ ưu tiên khác nhau

let a = 5 > 3 && 8 < 10;
console.log(a); // Output: true

• Toán tử so sánh (>, <) có độ ưu tiên cao hơn toán tử logic (&&), nên 5 > 3 và 8 < 10 được tính trước, sau đó kết quả true && true trả về true.

Ví dụ 3: Toán tử gán có độ ưu tiên thấp

let b = 10;
let c = 5 + (b = 20);
console.log(c); // Output: 25

• Toán tử gán (=) có độ ưu tiên thấp hơn phép cộng (+), nên b = 20 được thực hiện trước, sau đó 5 + 20 mới được tính, kết quả là 25.

Ví dụ 4: Sử dụng dấu ngoặc để thay đổi độ ưu tiên

Nếu muốn thay đổi thứ tự thực hiện của các toán tử, có thể dùng dấu ngoặc ():

let y = (10 + 5) * 2;
console.log(y); // Output: 30

Lần này, phép cộng 10 + 5 được thực hiện trước do có dấu ngoặc, rồi mới nhân 2, kết quả là 30.

Bảng độ ưu tiên của toán tử trong JavaScript

Trong JavaScript, các toán tử có độ ưu tiên khác nhau, ảnh hưởng đến thứ tự thực hiện trong một biểu thức. Để hiểu rõ cách các toán tử hoạt động, cần biết về:

• Độ ưu tiên cao (Higher precedence) và độ ưu tiên thấp (Lower precedence).
• Bảng xếp hạng độ ưu tiên từ cao đến thấp.
• Quy tắc kết hợp (Associativity) của toán tử.

Độ ưu tiên cao (Higher precedence) và độ ưu tiên thấp (Lower precedence)

• Toán tử có độ ưu tiên cao sẽ được thực hiện trước trong biểu thức.
• Toán tử có độ ưu tiên thấp sẽ được thực hiện sau, trừ khi bị thay đổi bằng dấu ngoặc () để ép buộc thứ tự thực hiện.

Ví dụ về độ ưu tiên cao hơn:

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

• Phép nhân (*) có độ ưu tiên cao hơn phép cộng (+), nên 5 * 2 được thực hiện trước, rồi mới cộng với 10.

Ví dụ về độ ưu tiên thấp hơn:

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

• Dấu ngoặc () có độ ưu tiên cao nhất, nên 10 + 5 được thực hiện trước, rồi mới nhân 2.

Bảng xếp hạng độ ưu tiên của toán tử trong JavaScript

Dưới đây là bảng xếp hạng các toán tử từ cao nhất đến thấp nhất trong JavaScript:

Quy tắc kết hợp (Associativity) của toán tử

Quy tắc kết hợp (Associativity) xác định hướng thực hiện của các toán tử có cùng độ ưu tiên. Có hai loại:

Trái Phải (Left to Right): Toán tử thực hiện từ trái sang phải.

• Ví dụ: Phép nhân (*), phép cộng (+), so sánh (<, >, ==, etc.).

Ví dụ minh họa:

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

Thực hiện từ trái sang phải: (10 - 2) = 8, rồi 8 - 3 = 5.

Phải Trái (Right to Left): Toán tử thực hiện từ phải sang trái.

• Ví dụ: Toán tử gán (=), toán tử ba ngôi (?:), lũy thừa (**).

Ví dụ minh họa:

let x = y = 10;
console.log(x, y); // Output: 10 10

y = 10 thực hiện trước, sau đó x = y, nên cả hai đều là 10.

Ví dụ với toán tử lũy thừa:

console.log(2 ** 3 ** 2); // Output: 512

3 ** 2 được thực hiện trước (9), rồi 2 ** 9 = 512.

Các nhóm toán tử và độ ưu tiên trong JavaScript

Toán tử trong JavaScript được chia thành nhiều nhóm khác nhau, mỗi nhóm có độ ưu tiên riêng. Hiểu rõ độ ưu tiên giúp lập trình viên kiểm soát cách biểu thức được tính toán và tránh lỗi logic trong chương trình.

Toán tử dấu ngoặc đơn (Grouping - ())

Dấu ngoặc đơn () có độ ưu tiên cao nhất, được dùng để nhóm biểu thức và thay đổi thứ tự thực hiện mặc định của các toán tử.

Ví dụ minh họa:

let result1 = 10 + 5 * 2;  
console.log(result1); // Output: 20 (Nhân được thực hiện trước)  

let result2 = (10 + 5) * 2;  
console.log(result2); // Output: 30 (Cộng được thực hiện trước)  

• Trong result1, phép nhân 5 * 2 được thực hiện trước do có độ ưu tiên cao hơn phép cộng.
• Trong result2, dấu ngoặc () ép 10 + 5 được tính trước.

Toán tử truy cập và gọi hàm (., [], ())

Nhóm này bao gồm:

• Truy cập thuộc tính: object.property
• Truy xuất phần tử mảng: array[index]
• Gọi hàm: function()

Ví dụ minh họa:

let obj = { name: "Alice", age: 25 };
console.log(obj.name); // Output: Alice (Truy cập thuộc tính)

let arr = [10, 20, 30];
console.log(arr[1]); // Output: 20 (Truy xuất mảng)

function greet() {
    return "Hello, world!";
}
console.log(greet()); // Output: Hello, world! (Gọi hàm)

Toán tử số học (Arithmetic Operators)

Nhóm này bao gồm:

• Nhân (*), chia (/), chia lấy dư (%) → có độ ưu tiên cao hơn.
• Cộng (+), trừ (-) → có độ ưu tiên thấp hơn.

Ví dụ minh họa:

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

• Phép nhân 5 * 2 được thực hiện trước (10), sau đó mới cộng 10 và trừ 3.

Nếu muốn thay đổi thứ tự thực hiện, có thể sử dụng dấu ngoặc:

let result2 = (10 + 5) * 2 - 3;  
console.log(result2); // Output: 27  

• Dấu ngoặc () ép 10 + 5 được tính trước, rồi nhân 2, sau đó trừ 3.

Toán tử so sánh (Comparison Operators)

Nhóm này bao gồm:

• Lớn hơn, nhỏ hơn: >, <, >=, <=
• So sánh bằng: ==, ===, !=, !==

Toán tử so sánh có độ ưu tiên thấp hơn toán tử số học, nhưng cao hơn toán tử logic.

Ví dụ minh họa:

console.log(10 + 5 > 12 - 2); // Output: true  

• Phép cộng 10 + 5 (15) và trừ 12 - 2 (10) được thực hiện trước do có độ ưu tiên cao hơn.
• Sau đó, 15 > 10 được đánh giá thành true.

Toán tử logic (Logical Operators)

Nhóm này gồm:

• NOT (!) → có độ ưu tiên cao nhất.
• AND (&&) → có độ ưu tiên cao hơn OR.
• OR (||) → có độ ưu tiên thấp nhất.

Ví dụ minh họa:

let a = true, b = false, c = true;
console.log(!a || b && c); // Output: false  

• && có độ ưu tiên cao hơn ||, nên b && c (false && true) được thực hiện trước → false.
• !a (!true) thành false.
• Cuối cùng, false || false trả về false.

Muốn đổi thứ tự, có thể dùng dấu ngoặc:

console.log(!(a || b) && c); // Output: false  

Toán tử gán (Assignment Operators)

Nhóm này gồm các toán tử gán:

• = += -= *= /= %= **=

Toán tử gán có độ ưu tiên rất thấp và quy tắc kết hợp từ phải sang trái.

Ví dụ minh họa:

let x = y = 10 + 5;  
console.log(x, y); // Output: 15 15  

• 10 + 5 được tính trước, sau đó y = 15, rồi x = y.

Toán tử điều kiện (Ternary Operator ? :)

Toán tử ba ngôi có độ ưu tiên cao hơn toán tử gán nhưng thấp hơn toán tử so sánh.

Ví dụ minh họa:

let age = 20;
let message = age >= 18 ? "Adult" : "Minor";
console.log(message); // Output: Adult  

• age >= 18 được tính trước, sau đó trả về "Adult" hoặc "Minor".

Toán tử bitwise (Bitwise Operators)

Nhóm này gồm:

• AND bitwise (&), OR bitwise (|), XOR bitwise (^)
• Dịch bit (<<, >>, >>>)

Toán tử bitwise có độ ưu tiên nằm giữa toán tử so sánh và toán tử logic.

Ví dụ minh họa:

console.log(5 & 1); // Output: 1  
console.log(5 | 1); // Output: 5  
console.log(5 ^ 1); // Output: 4  
console.log(5 << 1); // Output: 10  

• 5 trong hệ nhị phân là 101, 1 là 001.
• 5 & 1: Cả hai bit phải là 1 → 001 → 1.
• 5 | 1: Ít nhất một bit là 1 → 101 → 5.
• 5 ^ 1: Khác nhau thì 1, giống nhau thì 0 → 100 → 4.
• 5 << 1: Dịch trái 101 một lần → 1010 → 10.

Cách sử dụng độ ưu tiên toán tử hiệu quả trong JavaScript

Hiểu rõ độ ưu tiên của toán tử giúp lập trình viên viết mã dễ đọc, tránh lỗi logic và cải thiện hiệu suất chương trình. Dưới đây là một số cách sử dụng hiệu quả độ ưu tiên toán tử trong JavaScript.

Sử dụng dấu ngoặc đơn để tăng tính rõ ràng

Tại sao nên dùng dấu ngoặc đơn?

• Khi có nhiều toán tử trong một biểu thức, dấu ngoặc giúp làm rõ thứ tự thực hiện, tránh sai sót do nhầm lẫn độ ưu tiên.
• Giúp người đọc dễ hiểu hơn, ngay cả khi họ không nhớ chính xác độ ưu tiên của từng toán tử.

Ví dụ minh họa:
Không dùng dấu ngoặc:

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

let result2 = (10 + 5) * (2 - 3);
console.log(result2); // Output: -15  

let isValid = true && false || true;
console.log(isValid); // Output: true  

let isValid2 = true && (false || true);
console.log(isValid2); // Output: true  

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

let age = 20;
if (age >= 18 && age <= 30) {
    console.log("Bạn đủ điều kiện!");
} else {
    console.log("Bạn không đủ điều kiện!");
}
// Output: Bạn đủ điều kiện!

let isLoggedIn = false;
let message = isLoggedIn ? "Welcome back!" : "Please log in.";
console.log(message); // Output: Please log in.

let input = "  Hello World!  ";
let cleanedInput = input.trim().length > 0 ? input.trim() : "Invalid input";
console.log(cleanedInput); // Output: "Hello World!"