Các phương pháp tốt nhất cho câu lệnh điều kiện trong JavaScript

Bài viết này giải thích các phương pháp tốt nhất cho câu lệnh điều kiện trong JavaScript.

YouTube Video

Các phương pháp tốt nhất cho câu lệnh điều kiện trong JavaScript

Câu lệnh if là một cấu trúc điều khiển cơ bản trong các chương trình JavaScript. Tuy nhiên, khi mã trở nên phức tạp hơn, số lượng câu lệnh if có thể tăng lên, khiến mã khó đọc hơn. Lần này, chúng ta sẽ đi sâu vào các phương pháp tốt nhất để thiết kế câu lệnh if một cách hợp lý trong JavaScript nhằm nâng cao độ dễ đọc và khả năng duy trì.

Đơn giản hóa mã bằng cách sử dụng cờ (flags).

Đơn giản hóa các điều kiện liên quan đến nhiều tiêu chí bằng cách sử dụng các giá trị boolean.

Các ví dụ cần tránh

1// Bad Example
2if (isUserLoggedIn && user.hasPaymentInfo && user.cartItems.length > 0) {
3    console.log('Proceed to checkout');
4}

Các ví dụ được cải thiện

Sử dụng cờ (flags) để làm rõ các điều kiện.

1// Good Example
2const canProceedToCheckout = isUserLoggedIn && user.hasPaymentInfo && user.cartItems.length > 0;
3
4if (canProceedToCheckout) {
5    console.log('Proceed to checkout');
6}

Giữ cho câu lệnh điều kiện đơn giản

Khi một biểu thức điều kiện trở nên phức tạp, tính dễ đọc của mã giảm đi, vì vậy cần giữ điều kiện đơn giản.

Các ví dụ cần tránh

1// Bad example
2if (user && user.isLoggedIn &&
3    user.permissions && user.permissions.includes('admin')) {
4    console.log('Welcome, admin!');
5}

Các ví dụ được cải thiện

Bằng cách phân tách điều kiện thành các biến có ý nghĩa cụ thể, bạn có thể làm rõ ý định của nó.

1// Good Example
2const isUserLoggedIn = user?.isLoggedIn;
3const hasAdminPermission = user?.permissions?.includes('admin');
4
5if (isUserLoggedIn && hasAdminPermission) {
6    console.log('Welcome, admin!');
7}

Làm rõ thứ tự ưu tiên của các toán tử logic

Trong các câu lệnh if trong JavaScript, việc hiểu sai thứ tự ưu tiên của các toán tử logic có thể dẫn đến hành vi không mong muốn.

Các ví dụ cần tránh

1// Bad example
2if (isAdmin && isActive || isPremium) {
3    // The precedence of `&&` is higher than `||`,
4    // so this expression is interpreted as
5    // ((isAdmin && isActive) || isPremium)
6    console.log("Access granted");
7} else {
8    console.log("Access denied");
9}

Các ví dụ được cải thiện

Khi thứ tự ưu tiên của các toán tử không rõ ràng, bạn có thể sử dụng dấu ngoặc một cách phù hợp để làm rõ.

1// Good Example
2if (isAdmin && (isActive || isPremium)) {
3    console.log("Access granted");
4} else {
5    console.log("Access denied");
6}

Sử dụng đánh giá ngắn mạch

JavaScript hỗ trợ đánh giá ngắn mạch cho cả toán tử && (AND) và || (OR). Đánh giá ngắn mạch có nghĩa là khi kết quả của một điều kiện được xác định trong quá trình đánh giá, các phần còn lại sẽ không được đánh giá.

• AND (&&): Nếu giá trị bên trái được đánh giá là sai (false), giá trị bên phải sẽ không được đánh giá và nó được trả về.
• OR (||): Nếu giá trị bên trái được đánh giá là đúng (true), giá trị bên phải sẽ không được đánh giá và nó được trả về.

Các ví dụ cần tránh

1// Bad Example
2if (user?.someComplexFunction() && user?.isLoggedIn) {
3    // ...
4}

Các ví dụ được cải thiện

Trong mã này, hàm user?.someComplexFunction() được gọi ngay cả khi user?.isLoggedIn là false.

Hiểu rõ về đánh giá ngắn mạch có thể giúp bạn tránh những tính toán không cần thiết và viết mã hiệu quả hơn.

1// Good Example
2if (user?.isLoggedIn && user?.someComplexFunction()) {
3    // ...
4}

Giảm thiểu việc sử dụng câu lệnh else

Câu lệnh else có thể làm tăng tải nhận thức khi theo dõi mã. Thay vào đó, hãy cân nhắc sử dụng trả về sớm (early returns).

Các ví dụ cần tránh

1// Bad Example
2function getUserRole(user) {
3    if (!user) {
4        return 'Guest';
5    } else {
6        return user.role;
7    }
8}

Các ví dụ được cải thiện

Làm rõ các điều kiện bằng cách sử dụng trả về sớm (early returns).

1// Good Example
2function getUserRole(user) {
3    if (!user) return 'Guest';
4    return user.role;
5}

Sử dụng toán tử ba ngôi một cách hợp lý

Đối với các điều kiện đơn giản, việc sử dụng toán tử ba ngôi có thể làm ngắn gọn mã của bạn. Tuy nhiên, tránh lồng ghép hoặc logic phức tạp.

Các ví dụ cần tránh

1// Bad Example
2let message = user.isLoggedIn ? user.isAdmin ?
3                    'Welcome, admin!'
4                    : 'Welcome, user!'
5                    : 'Please log in.';

Các ví dụ được cải thiện

Ưu tiên khả năng đọc bằng cách tách nhỏ các điều kiện.

1// Good Example
2if (!user.isLoggedIn) {
3    message = 'Please log in.';
4} else if (user.isAdmin) {
5    message = 'Welcome, admin!';
6} else {
7    message = 'Welcome, user!';
8}

Sử dụng giá trị mặc định và đánh giá ngắn mạch

Sử dụng các giá trị mặc định và đánh giá ngắn mạch để giảm phân nhánh và đơn giản hóa mã.

Các ví dụ cần tránh

1// Bad Example
2let displayName;
3if (user && user.name) {
4    displayName = user.name;
5} else {
6    displayName = 'Guest';
7}

Các ví dụ được cải thiện

Trong trường hợp này, việc sử dụng các toán tử logic sẽ làm cho nó gọn gàng hơn.

1// Good Example
2displayName = user?.name || 'Guest';

Phân biệt chính xác khi nào nên sử dụng câu lệnh switch.

Khi cần có nhiều điều kiện, câu lệnh switch có thể làm rõ mục đích hơn.

Các ví dụ cần tránh

 1// Bad Example
 2if (status === 'success') {
 3    console.log('Operation was successful.');
 4} else if (status === 'error') {
 5    console.error('There was an error.');
 6} else if (status === 'pending') {
 7    console.log('Operation is still pending.');
 8} else {
 9    console.log('Unknown status.');
10}

Các ví dụ được cải thiện

Sử dụng câu lệnh switch có thể giúp tổ chức mã tốt hơn.

 1// Good Example
 2switch (status) {
 3    case 'success':
 4        console.log('Operation was successful.');
 5        break;
 6    case 'error':
 7        console.error('There was an error.');
 8        break;
 9    case 'pending':
10        console.log('Operation is still pending.');
11        break;
12    default:
13        console.log('Unknown status.');
14}

Sử dụng các câu điều kiện bảo vệ với các điều kiện thoát sớm

Câu lệnh bảo vệ là một kỹ thuật sử dụng câu lệnh if để thoát hàm sớm.

Các ví dụ cần tránh

1// Bad Example
2function processOrder(order) {
3    if (order && order.isValid) {
4        if (order.items && order.items.length > 0) {
5            // Continue processing
6        }
7    }
8}

Các ví dụ được cải thiện

Sử dụng câu lệnh bảo vệ để giảm mức độ lồng ghép.

1// Good Example
2function processOrder(order) {
3    if (!order?.isValid) return;
4    if (!order.items?.length) return;
5
6    // Continue processing
7}

Viết chú thích để làm rõ ý định.

Đối với các điều kiện phức tạp hoặc nhánh quan trọng, thêm chú thích ngắn gọn và rõ ràng để truyền đạt ý định của mã.

Các ví dụ cần tránh

1// Bad Example
2if (stock > 10 && !isRestricted) {
3    console.log('Available for purchase.');
4}

Các ví dụ được cải thiện

Thêm chú thích để làm rõ ý định.

1// Good Example
2// The product must have at least 10 items in stock
3// and not be on the restricted list.
4if (stock > 10 && !isRestricted) {
5    console.log('Available for purchase.');
6}

Kết luận

Sử dụng hiệu quả câu lệnh if của JavaScript có thể cải thiện đáng kể khả năng đọc và bảo trì mã.

Bạn có thể làm theo bài viết trên bằng cách sử dụng Visual Studio Code trên kênh YouTube của chúng tôi. Vui lòng ghé thăm kênh YouTube.

YouTube Video