Câu lệnh switch trong JavaScript: case, break và fallthrough

Switch chọn một nhánh trong nhiều nhánh

switch là câu lệnh điều khiển luồng dành cho lúc bạn so sánh một giá trị với một vài lựa chọn đã biết. Một chuỗi if/else if/else cũng làm được việc này, nhưng khi bạn kiểm tra cùng một biến ba, bốn lần liên tiếp, switch dễ đọc hơn.

Hình dạng cơ bản:

const day = "Wed";

switch (day) {
    case "Mon":
        console.log("Start of the week");
        break;
    case "Wed":
        console.log("Midweek");
        break;
    case "Fri":
        console.log("Almost there");
        break;
    default:
        console.log("Some other day");
}

Đọc từ trên xuống: JavaScript tính giá trị day, so sánh nó với từng nhãn case và chạy khối lệnh khớp. default bắt mọi thứ không khớp, giống else cuối cùng. Thứ tự đọc là giá trị → case → code.

Việc so khớp thực sự diễn ra thế nào

switch so sánh bằng so sánh nghiêm ngặt, tức toán tử ===. Không ép kiểu, không so khớp gần đúng. case 1: sẽ khớp với số 1 nhưng không khớp với chuỗi "1".

const code = "1";

switch (code) {
    case 1:
        console.log("number one");
        break;
    case "1":
        console.log("string one");
        break;
    default:
        console.log("no match");
}

Chỉ case thứ hai khớp. Nếu có lúc bạn ngạc nhiên vì switch không chạy vào case nào, thủ phạm thường là chuỗi lệch với số, đến từ ô nhập liệu của form hoặc tham số URL.

break là thứ dừng luồng chạy

Đây là phần hay làm người học vấp. Một nhãn case là điểm nhảy tới, không phải một khối lệnh khép kín. Khi luồng chạy đã đáp xuống một case khớp, nó tiếp tục chạy từng dòng, đi xuyên qua nhãn của case kế tiếp, cho tới khi gặp break, return hoặc hết switch.

Xem điều gì xảy ra khi không có break:

const role = "editor";

switch (role) {
    case "admin":
        console.log("full access");
    case "editor":
        console.log("can edit");
    case "viewer":
        console.log("can view");
    default:
        console.log("logged in");
}

Chỗ khớp là "editor", nhưng bạn vẫn nhận được can edit, can view và logged in. Đó là fallthrough: luồng chạy rơi qua từng case phía sau vì không có gì bảo nó dừng.

Thêm break vào là nó chạy đúng:

const role = "editor";

switch (role) {
    case "admin":
        console.log("full access");
        break;
    case "editor":
        console.log("can edit");
        break;
    case "viewer":
        console.log("can view");
        break;
    default:
        console.log("logged in");
}

Thói quen nên có: mọi case kết thúc bằng break, trừ khi bạn thực sự muốn fallthrough.

Cố ý fallthrough để gom nhóm

Fallthrough không phải lúc nào cũng là lỗi. Bỏ break là cách gọn gàng để nói "các case này đều làm cùng một việc":

function daysIn(month, year) {
    switch (month) {
        case "Jan":
        case "Mar":
        case "May":
        case "Jul":
        case "Aug":
        case "Oct":
        case "Dec":
            return 31;
        case "Apr":
        case "Jun":
        case "Sep":
        case "Nov":
            return 30;
        case "Feb":
            return (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0 ? 29 : 28;
        default:
            return 0;
    }
}

console.log(daysIn("Feb", 2024));
console.log(daysIn("Aug", 2025));

Các nhãn case rỗng xếp chồng lên nhau dùng chung khối lệnh bên dưới. Để ý rằng không cần break sau return: hàm thoát hẳn. return bên trong switch bỏ qua mọi thứ lẽ ra sẽ chạy tiếp theo.

Khi bạn thực sự muốn fallthrough giữa các case không rỗng, hãy để lại một chú thích để người đọc sau không "sửa" nó:

switch (event) {
    case "click":
        track("click");
        // fallthrough
    case "hover":
        highlight();
        break;
}

default không bắt buộc phải đứng cuối

Theo quy ước, default nằm ở dưới cùng, và đó là chỗ phần lớn người đọc mong thấy nó. Nhưng về mặt kỹ thuật, nó chỉ là một nhãn khác: nó khớp khi không có case nào khớp, dù nằm ở đâu. Nếu đặt default ở giữa mà không có break, nó sẽ rơi xuống bất cứ thứ gì bên dưới. Hãy đặt nó cuối cùng, kết thúc bằng break (hoặc không, vì phía sau chẳng còn gì), và bạn của sau này sẽ cảm ơn bạn.

function describeStatus(code) {
    switch (code) {
        case 200:
        case 201:
            return "success";
        case 404:
            return "not found";
        case 500:
            return "server error";
        default:
            return "unknown";
    }
}

console.log(describeStatus(200));
console.log(describeStatus(404));
console.log(describeStatus(418));

Phạm vi biến bên trong case

Các case dùng chung một phạm vi khối, là toàn bộ switch. Khai báo let hoặc const cùng tên ở hai case sẽ ném lỗi khai báo lại:

switch (x) {
    case 1:
        let msg = "one";
        break;
    case 2:
        let msg = "two";   // SyntaxError: Identifier 'msg' has already been declared
        break;
}

Cách sửa là mỗi case một khối lệnh: bọc thân case trong { }:

const x = 2;

switch (x) {
    case 1: {
        const msg = "one";
        console.log(msg);
        break;
    }
    case 2: {
        const msg = "two";
        console.log(msg);
        break;
    }
}

Giờ mỗi msg nằm trong phạm vi riêng và xung đột biến mất. Điều này đáng nhớ mỗi khi một case cần nhiều hơn một, hai dòng logic.

switch và if/else

switch tỏa sáng khi bạn kiểm tra một giá trị với nhiều lựa chọn cố định: mã HTTP, loại action của Redux, tên lệnh, chuỗi kiểu enum. Giá trị chỉ xuất hiện một lần ở trên cùng, và mắt người đọc lướt qua các nhãn case như đọc mục lục.

if/else tốt hơn khi:

• Bạn so sánh theo khoảng (score >= 90, score >= 75).
• Các điều kiện liên quan tới nhiều biến khác nhau hoặc biểu thức boolean.
• Bạn muốn so sánh lỏng hoặc so sánh theo cách riêng (switch luôn là ===).

// Good fit for switch - one value, many discrete options.
function statusLabel(code) {
    switch (code) {
        case 200: return "OK";
        case 301: return "Moved";
        case 404: return "Not Found";
        case 500: return "Server Error";
        default:  return `Status ${code}`;
    }
}

// Better as if/else - ranges and mixed conditions.
function grade(score) {
    if (score >= 90) return "A";
    if (score >= 75) return "B";
    if (score >= 60) return "C";
    return "F";
}

console.log(statusLabel(404));
console.log(grade(82));

Một cách thay thế phổ biến hiện nay cho mẫu đầu tiên là tra cứu qua đối tượng:

const labels = {
    200: "OK",
    301: "Moved",
    404: "Not Found",
    500: "Server Error",
};

function statusLabel(code) {
    return labels[code] ?? `Status ${code}`;
}

console.log(statusLabel(200));
console.log(statusLabel(418));

Ba dòng thay cho một switch chín dòng. Khi các case chỉ là ánh xạ dữ liệu thuần, không có logic thật, một đối tượng (hoặc Map) thường dễ đọc hơn. Hãy dùng switch khi mỗi case thực sự phải làm việc.

Tiếp theo: vòng lặp for

switch xử lý một quyết định giữa nhiều lựa chọn. Phần tiếp theo của điều khiển luồng là lặp lại: chạy cùng một khối lệnh nhiều lần. Đó là việc của vòng lặp for, ngay sau đây.