Câu lệnh switch trong JavaScript: Cú pháp, Ứng dụng và Các thực tiễn tốt nhất

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. Giới thiệu: Câu lệnh switch là gì?

Trong JavaScript, việc phân nhánh có điều kiện đóng vai trò quan trọng trong việc kiểm soát luồng chương trình. Trong số các cấu trúc này, câu lệnh switch thường được sử dụng như một cú pháp cho phép xử lý nhiều điều kiện một cách hiệu quả.

Câu lệnh switch hữu ích khi bạn cần thực thi các logic khác nhau dựa trên một giá trị cụ thể. Các ví dụ điển hình bao gồm hiển thị các thông báo khác nhau tùy theo ngày trong tuần hoặc thay đổi hành vi dựa trên đầu vào của người dùng.

Các trường hợp sử dụng câu lệnh switch

Câu lệnh switch đặc biệt hữu ích trong các tình huống sau:

• Khi xử lý nhiều điều kiện một cách hiệu quả : Thay vì lặp đi lặp lại các câu lệnh if, câu lệnh switch giúp giữ cho mã ngắn gọn.
• Khi thực thi logic khác nhau cho mỗi điều kiện : Nó lý tưởng cho việc phân nhánh logic dựa trên các giá trị dữ liệu cụ thể.
• Khi cải thiện khả năng đọc mã : Cấu trúc rõ ràng của nó làm cho logic có điều kiện dễ hiểu và bảo trì hơn.

Các tính năng chính của câu lệnh switch

• Phân nhánh dựa trên giá trị : Câu lệnh switch kiểm tra xem một biến hoặc biểu thức có khớp với một giá trị cụ thể hay không.
• Kiểm soát bằng câu lệnh break : Sử dụng break ngăn việc thực thi tiếp tục vào các case tiếp theo.
• Sử dụng mệnh đề default : Một hành động mặc định có thể được định nghĩa khi không có case nào khớp.

Tóm tắt

Câu lệnh switch là một công cụ mạnh mẽ trong JavaScript giúp tổ chức logic có điều kiện và cải thiện khả năng đọc mã. Trong phần tiếp theo, chúng ta sẽ khám phá cú pháp cơ bản và cách sử dụng nó trong thực tế.

2. Cú pháp cơ bản và giải thích vai trò

Câu lệnh switch trong JavaScript là một cấu trúc điều khiển tiện lợi được dùng để phân nhánh thực thi dựa trên một giá trị cụ thể. Trong phần này, chúng ta sẽ giải thích cú pháp cơ bản của câu lệnh switch và vai trò của từng thành phần.

Cú pháp cơ bản

Dưới đây là cấu trúc cơ bản của một câu lệnh switch:

switch (expression) {
  case value1:
    // Code executed when expression matches value1
    break;
  case value2:
    // Code executed when expression matches value2
    break;
  default:
    // Code executed when no case matches
}

Dựa trên đoạn mã này, chúng ta sẽ giải thích vai trò của mỗi yếu tố.

Giải thích chi tiết các thành phần cú pháp

1. switch (expression)

• expression chứa giá trị hoặc kết quả tính toán sẽ được đánh giá.

2. case value:

• Mỗi case chỉ định một giá trị để so sánh với expression.

3. break;

• Câu lệnh break thoát khỏi khối switch sau khi một case khớp được thực thi.

4. default:

• Định nghĩa logic sẽ được thực thi khi không có case nào khớp.

Ví dụ thực tế

Hãy xem một ví dụ hiển thị thông báo dựa trên ngày trong tuần.

let day = "Monday";

switch (day) {
  case "Monday":
    console.log("The start of the week. Let’s do our best!");
    break;
  case "Friday":
    console.log("The weekend is almost here.");
    break;
  default:
    console.log("It’s a regular day.");
}

Tóm tắt

Cú pháp cơ bản của câu lệnh switch cho phép phân nhánh có điều kiện sạch sẽ và dễ đọc. Trong phần tiếp theo, chúng ta sẽ giới thiệu “3. Các trường hợp sử dụng thực tế của câu lệnh switch” và khám phá các cách sử dụng nâng cao chi tiết hơn.

3. Các trường hợp sử dụng thực tế của câu lệnh switch

Trong phần này, chúng ta sẽ giải thích câu lệnh switch của JavaScript thông qua các ví dụ cụ thể. Bằng cách bao phủ cả các trường hợp cơ bản và nâng cao, bạn sẽ có cái nhìn rõ ràng hơn về cách áp dụng nó trong lập trình thực tế.

Phân nhánh có điều kiện cơ bản

Ví dụ 1: Hiển thị thông báo dựa trên ngày trong tuần

let day = "Wednesday";

switch (day) {
  case "Monday":
    console.log("Hãy làm việc chăm chỉ tuần này!");
    break;
  case "Wednesday":
    console.log("Đây là giữa tuần. Gần đến rồi!");
    break;
  case "Friday":
    console.log("Chỉ còn một ngày nữa đến cuối tuần!");
    break;
  default:
    console.log("Đây là một ngày thư giãn.");
}

Grouping Multiple Cases

Example 2: Distinguishing weekdays and weekends

let day = "Saturday";

switch (day) {
  case "Monday":
  case "Tuesday":
  case "Wednesday":
  case "Thursday":
  case "Friday":
    console.log("Hôm nay là ngày trong tuần.");
    break;
  case "Saturday":
  case "Sunday":
    console.log("Hôm nay là cuối tuần.");
    break;
  default:
    console.log("Ngày không hợp lệ.");
}

Combining Functions with switch Statements

Example 3: Handling operations based on user roles

function getUserPermission(role) {
  switch (role) {
    case "admin":
      return "Bạn có quyền truy cập đầy đủ.";
    case "editor":
      return "Bạn có quyền chỉnh sửa.";
    case "viewer":
      return "Bạn có quyền truy cập chỉ đọc.";
    default:
      return "Không có quyền được gán.";
  }
}

console.log(getUserPermission("editor"));

Summary

Through these practical examples, you should now understand how to use the switch statement and apply it effectively. In the next section, we will discuss “4. Comparing switch Statements and if Statements—Which Should You Choose?”.

4. Comparing switch Statements and if Statements—Which Should You Choose?

In JavaScript, both switch statements and if statements can be used for conditional branching. However, they have clear differences, and choosing the appropriate one depends on the situation.

Key Differences

Comparison Through Examples

Example 1: Using a switch statement

let color = "Red";

switch (color) {
  case "Red":
    console.log("Dừng lại!");
    break;
  case "Yellow":
    console.log("Cẩn thận!");
    break;
  case "Blue":
    console.log("Đi!");
    break;
  default:
    console.log("Màu không hợp lệ.");
}

Example 2: Using an if statement

let score = 85;

if (score >= 90) {
  console.log("Điểm: A");
} else if (score >= 75) {
  console.log("Điểm: B");
} else if (score >= 50) {
  console.log("Điểm: C");
} else {
  console.log("Điểm: F");
}

Summary

By choosing between switch statements and if statements appropriately, you can write more efficient and readable code. In the next section, we will explain “5. Tips and Best Practices to Prevent Errors” and highlight important points to keep in mind when using switch statements.

5. Tips and Best Practices to Prevent Errors

The JavaScript switch statement is a convenient conditional structure, but improper usage can lead to errors or unexpected behavior. In this section, we will cover key tips and best practices to help prevent common mistakes.

1. Fall-through Caused by Missing break Statements

Example:

let fruit = "Apple";

switch (fruit) {
  case "Apple":
    console.log("Đã chọn Táo.");
  case "Banana":
    console.log("Đã chọn Chuối.");
    break;
  default:
    console.log("Đã chọn trái cây khác.");
}

Result:

Đã chọn Táo.
Đã chọn Chuối.

Solution:

switch (fruit) {
  case "Apple":
    console.log("Đã chọn Táo.");
    break;
  case "Banana":
    console.log("Đã chọn Chuối.");
    break;
  default:
    console.log("Đã chọn trái cây khác.");
}

2. Always Include a default Clause

Example:

let command = "Stop";

switch (command) {
  case "Start":
    console.log("Đang khởi động hệ thống.");
    break;
  case "End":
    console.log("Đang tắt hệ thống.");
    break;
}

Solution:

default:
  console.log("Lệnh không hợp lệ.");

3. Be Careful with Type Mismatches

Example:

let value = 1;

switch (value) {
  case "1":
    console.log("Đây là chuỗi '1'.");
    break;
  case 1:
    console.log("Đây là số 1.");
    break;
  default:
    console.log("Không tìm thấy kết quả.");
}

Summary

By following these tips and best practices, you can avoid errors and write efficient, maintainable code when using switch statements.

6. Advanced Techniques with switch Statements

The JavaScript switch statement can be used not only for basic conditional branching but also for more advanced patterns that enable flexible and efficient code design.

1. Grouping Multiple Cases

Example:

let day = "Saturday";

switch (day) {
  case "Monday":
  case "Tuesday":
  case "Wednesday":
  case "Thursday":
  case "Friday":
    console.log("Hôm nay là ngày trong tuần.");
    break;
  case "Saturday":
  case "Sunday":
    console.log("Hôm nay là cuối tuần.");
    break;
  default:
    console.log("Ngày không hợp lệ.");
}

2. Nested switch Statements

Example:

let menu = "Drink";
let subMenu = "Coffee";

switch (menu) {
  case "Food":
    switch (subMenu) {
      case "Hamburger":
        console.log("Đã chọn Hamburger.");
        break;
      default:
        console.log("Thực đơn thực phẩm không hợp lệ.");
    }
    break;

  case "Drink":
    switch (subMenu) {
      case "Coffee":
        console.log("Đã chọn Coffee.");
        break;
      default:
        console.log("Thực đơn đồ uống không hợp lệ.");
    }
    break;
}

Summary

By leveraging these advanced techniques, you can handle complex conditional logic efficiently using switch statements.

7. FAQ: Common Questions and Troubleshooting

When using the JavaScript switch statement, many developers encounter common questions or issues. This section addresses frequently asked questions and provides clear solutions.

Q1: What happens if you forget a break statement in a switch case?

Example:

let value = 2;

switch (value) {
  case 1:
    console.log("Đã chọn 1.");
  case 2:
    console.log("Đã chọn 2.");
  case 3:
    console.log("Đã chọn 3.");
}

Result:

Đã chọn 2.
Đã chọn 3.

Solution:

break;

Q2: Is the default clause required?

Example:

let fruit = "Pineapple";

switch (fruit) {
  case "Apple":
    console.log("Đã chọn Apple.");
    break;
  case "Banana":
    console.log("Đã chọn Banana.");
    break;
}

Solution:

default:
  console.log("Trái cây không xác định.");

Q3: Can range comparisons be performed in a switch statement?

Example:

let score = 85;

switch (true) {
  case score >= 90:
    console.log("Điểm: A");
    break;
  case score >= 75:
    console.log("Điểm: B");
    break;
  default:
    console.log("Điểm: F");
}

Summary

By referring to this FAQ, you can resolve common errors and deepen your understanding of how switch statements behave in JavaScript.

8. Code Samples and Practice Exercises

This section provides code samples and practice exercises using the switch statement. The examples range from basic to more advanced scenarios, allowing you to reinforce your understanding through hands-on practice.

1. Basic Code Samples

Example 1: Determining the season by month

let month = 3;

switch (month) {
  case 12:
  case 1:
  case 2:
    console.log("Mùa đông");
    break;
  case 3:
  case 4:
  case 5:
    console.log("Mùa xuân");
    break;
  case 6:
  case 7:
  case 8:
    console.log("Mùa hè");
    break;
  case 9:
  case 10:
  case 11:
    console.log("Mùa thu");
    break;
  default:
    console.log("Tháng không hợp lệ");
}

Example 2: User role management

let role = "editor";

switch (role) {
  case "admin":
    console.log("Bạn có quyền truy cập đầy đủ.");
    break;
  case "editor":
    console.log("Bạn có quyền chỉnh sửa.");
    break;
  case "viewer":
    console.log("Bạn chỉ có quyền đọc.");
    break;
  default:
    console.log("Chưa gán quyền nào.");
}

2. Practice Exercises

Exercise 1: Day of the Week Classification

Create a program that determines whether a given day is a weekday or a weekend.

Exercise 2: Shopping Cart Calculation

Create a program that calculates the total price based on the product category and quantity.

Exercise 3: Phone Menu Selection System

Create a program that displays the appropriate option when a user enters a number.

Summary

By working through these sample codes and exercises, you can significantly improve your ability to use switch statements effectively.

9. Summary and Future Application Points

In this article, we covered the JavaScript switch statement from basic concepts to advanced usage in a structured manner. To conclude, let’s review the key points and explore ideas for further application and skill development.

1. Key Takeaways

• Basic syntax and features: Conditional branching can be written cleanly using case, break, and default.
• Comparison with if statements: Switch statements are ideal for fixed-value comparisons, while if statements are better suited for complex conditional expressions.
• Error handling: Proper use of break statements, type awareness, and default clauses helps prevent unexpected behavior.
• Advanced techniques: Nested logic, mappings, and dynamic processing enable more flexible and scalable code.

2. Future Application Ideas

1. Optimizing Complex Conditional Logic

By combining multiple conditions and functions, you can create dynamic and flexible decision-making logic.

2. Implementing Dynamic Processing Using Mapping

Improve extensibility and maintainability by managing logic with objects or maps.

const actions = {
  start: () => console.log("Đang khởi động hệ thống."),
  stop: () => console.log("Đang dừng hệ thống."),
  restart: () => console.log("Đang khởi động lại hệ thống."),
};

let command = "restart";
(actions[command] || (() => console.log("Lệnh không hợp lệ.")))();

3. Applying switch Statements to State Management Systems

Switch statements can also be used in application development in combination with state management libraries such as Redux or Vuex.

Summary

The switch statement is a powerful and user-friendly tool for handling conditional logic in JavaScript. By understanding both its basic syntax and advanced use cases, you can significantly improve the readability and maintainability of your code.

Use this article as a reference to further develop your programming skills and apply switch statements effectively in real-world projects.