Mọi chương trình hữu ích cuối cùng đều sẽ chạm đến một điểm quyết định. Nút này nên gửi biểu mẫu hay hiển thị lỗi? Người dùng này sẽ thấy bảng điều khiển quản trị hay chế độ xem khách? JavaScript trả lời những câu hỏi này bằng các câu lệnh điều kiện. Chúng là những van điều khiển mã nguồn của bạn: mở một con đường, đóng một con đường khác, tất cả dựa trên việc một biểu thức trả về giá trị true hay false. Nếu không có chúng, kịch bản của bạn sẽ chỉ chạy từ trên xuống dưới mà không bao giờ phản hồi lại người đang sử dụng nó.

Nhánh đơn giản nhất: if

Câu lệnh if là cánh cổng đầu tiên bạn bước qua. Bạn đặt một điều kiện bên trong dấu ngoặc đơn. Nếu điều kiện đó trả về true, khối mã bên dưới sẽ được thực thi. Nếu nó trả về false, JavaScript sẽ bỏ qua hoàn toàn khối mã đó và tiếp tục chạy xuống phần còn lại của tệp.

Đây chính xác là những gì bạn cần cho các kiểm tra đơn giản, một lần. Hãy tưởng tượng việc xác thực một trường trong biểu mẫu trước khi bạn gửi bất cứ thứ gì đến máy chủ:

const email = document.getElementById("email").value;

if (email === "") {
  alert("Please enter your email.");
}

Không có email, không có việc gửi biểu mẫu. Logic này rất trực diện và rõ ràng. Hãy sử dụng if khi chỉ có một trường hợp đặc biệt cần phòng tránh và không yêu cầu hành động thay thế nào khác.

Xử lý lựa chọn Một trong hai: if...else

Hầu hết các quyết định thực tế đều có hai mặt. Cặp if...else bao hàm chính xác điều đó. Một khối sẽ chạy khi điều kiện là true, khối còn lại sẽ chạy khi điều kiện là false. Hai con đường này loại trừ lẫn nhau.

Hãy hình dung việc kiểm tra chế độ tối (dark-mode) khi tải trang:

const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;

if (prefersDark) {
  document.body.classList.add("dark");
} else {
  document.body.classList.add("light");
}

Trình duyệt sẽ không bao giờ thêm cả hai class. Nó chọn một con đường, thực thi nó và tiếp tục. Bất cứ khi nào logic của bạn chia tách rõ ràng thành hai kết quả có thể xảy ra, đây chính là cấu trúc bạn nên sử dụng.

Nhiều con đường: if...else if...else

Không phải vấn đề nào cũng chỉ có hai lựa chọn. Đôi khi bạn cần một "chiếc thang" của các khả năng. Chuỗi if...else if...else cho phép bạn kiểm tra nhiều điều kiện theo trình tự. JavaScript sẽ đánh giá chúng từ trên xuống dưới và thực thi khối mã đầu tiên có điều kiện là true. Sau khi tìm thấy kết quả khớp, phần còn lại của chiếc thang sẽ bị bỏ qua.

Một ví dụ điển hình là việc chuyển đổi một điểm số bằng số sang điểm chữ:

const score = 87;
let grade;

if (score >= 90) {
  grade = "A";
} else if (score >= 80) {
  grade = "B";
} else if (score >= 70) {
  grade = "C";
} else {
  grade = "F";
}

Thứ tự ở đây cực kỳ quan trọng. Nếu bạn kiểm tra score >= 70 trước score >= 90, hầu hết các điểm đạt sẽ bị kẹt trong nhóm C vì kết quả khớp đầu tiên sẽ được chọn. Hãy sắp xếp các điều kiện của bạn theo thứ tự từ cụ thể nhất đến ít cụ thể nhất, và luôn kết thúc chuỗi bằng một lệnh else cuối cùng để bắt bất kỳ trường hợp nào còn sót lại.

Khớp các giá trị cố định: switch

Khi bạn đang so sánh một biến với một danh sách các hằng số đã biết, một chuỗi if...else dài sẽ trở nên rắc rối. Câu lệnh switch giúp làm gọn mọi thứ. Nó đánh giá một biểu thức một lần, sau đó so sánh nó với các nhãn case bằng phép so sánh bằng nghiêm ngặt (===). Điều này giúp mã nguồn dễ đọc hơn khi các tùy chọn là riêng biệt và có tên gọi cụ thể.

Hãy xem xét việc thiết lập giờ mở cửa cửa hàng dựa trên ngày hiện tại:

const day = new Date().getDay();

switch (day) {
  case 0:
    console.log("Sunday hours: 10am - 4pm");
    break;
  case 6:
    console.log("Saturday hours: 9am - 6pm");
    break;
  default:
    console.log("Weekday hours: 8am - 8pm");
}

Hãy cẩn thận với break. Nếu bạn bỏ qua nó, việc thực thi sẽ trôi xuống case tiếp theo và tiếp tục chạy. Hành vi đó đôi khi hữu ích, nhưng thường xuyên hơn nó sẽ gây ra các lỗi ngầm. Khi được sử dụng đúng cách, switch giúp ý định của bạn trở nên rõ ràng ngay lập tức và giữ cho các nhánh liên quan được căn chỉnh trong một cột gọn gàng.

Quyết định gọn nhẹ: Toán tử ba ngôi

Toán tử ba ngôi—được viết dưới dạng ? :—là một biểu thức, không phải là một câu lệnh. Sự khác biệt đó rất quan trọng