Cách sử dụng câu lệnh switch trong JavaScript

Javascript căn bản | 10/03/2025 by Học Javascript

Trong JavaScript, câu lệnh điều kiện giúp kiểm soát luồng thực thi của chương trình dựa trên các giá trị hoặc điều kiện cụ thể. Bên cạnh if...else, câu lệnh switch là một công cụ mạnh mẽ giúp kiểm tra nhiều trường hợp một cách rõ ràng và gọn gàng hơn.

switch hoạt động bằng cách so sánh giá trị của một biểu thức với từng case (trường hợp) và thực thi đoạn mã tương ứng. So với if...else if, switch giúp mã dễ đọc hơn khi có nhiều điều kiện cần kiểm tra. Nhờ đó, nó được sử dụng rộng rãi trong các ứng dụng như xử lý menu, kiểm tra trạng thái đơn hàng, phân quyền người dùng, và nhiều tình huống khác. Việc nắm vững câu lệnh switch sẽ giúp lập trình viên viết code tối ưu và dễ bảo trì hơn.

Câu lệnh switch trong JavaScript

Trong lập trình JavaScript, khi cần kiểm tra nhiều điều kiện khác nhau, chúng ta thường sử dụng if...else if...else. Tuy nhiên, khi số lượng điều kiện tăng lên, cách viết này có thể trở nên dài dòng và khó đọc. Để giải quyết vấn đề này, JavaScript cung cấp câu lệnh switch, giúp kiểm tra nhiều trường hợp một cách gọn gàng và dễ hiểu hơn.

Vai trò của switch trong JavaScript

switch giúp tối ưu hóa và đơn giản hóa việc kiểm tra nhiều điều kiện, đặc biệt khi so sánh một biến với nhiều giá trị khác nhau.
Cải thiện hiệu suất: Trình thông dịch có thể tối ưu switch tốt hơn so với if...else if, giúp tăng tốc độ thực thi trong một số trường hợp.
Tăng tính trực quan: switch giúp mã nguồn dễ đọc hơn khi có nhiều điều kiện cần kiểm tra.

Ví dụ, thay vì viết một chuỗi dài if...else if, ta có thể sử dụng switch như sau:

Ví dụ sử dụng `if...else if`

let day = 3;
if (day === 1) {
    console.log("Thứ Hai");
} else if (day === 2) {
    console.log("Thứ Ba");
} else if (day === 3) {
    console.log("Thứ Tư");
} else {
    console.log("Không hợp lệ");
}

Cách viết gọn hơn với `switch`

let day = 3;
switch (day) {
    case 1:
        console.log("Thứ Hai");
        break;
    case 2:
        console.log("Thứ Ba");
        break;
    case 3:
        console.log("Thứ Tư");
        break;
    default:
        console.log("Không hợp lệ");
}

Ở ví dụ trên, switch giúp mã nguồn dễ hiểu hơn và loại bỏ sự lặp lại của câu lệnh else if.

Cú pháp và cách hoạt động của switch trong JavaScript

Cú pháp cơ bản của switch

Câu lệnh switch giúp kiểm tra giá trị của một biểu thức và so sánh nó với các trường hợp (case). Nếu tìm thấy giá trị khớp, đoạn mã trong case tương ứng sẽ được thực thi.

Cú pháp của `switch`

switch (biểu_thức) {
    case giá_trị_1:
        // Thực thi khi biểu_thức === giá_trị_1
        break;
    case giá_trị_2:
        // Thực thi khi biểu_thức === giá_trị_2
        break;
    case giá_trị_3:
        // Thực thi khi biểu_thức === giá_trị_3
        break;
    default:
        // Thực thi nếu không có case nào khớp
}

Cách hoạt động của `switch`

switch lấy giá trị của biểu thức và so sánh với từng giá trị trong case.
Nếu giá trị của biểu thức khớp với giá trị trong case, đoạn mã bên trong case đó sẽ được thực thi.
Câu lệnh break giúp dừng switch ngay khi một case được thực thi. Nếu không có break, chương trình sẽ tiếp tục thực thi các case phía dưới dù không khớp.
Phần default (tùy chọn) sẽ chạy nếu không có case nào khớp với giá trị của biểu thức.

Ví dụ minh họa cách hoạt động của switch

Ví dụ 1: Kiểm tra ngày trong tuần

let day = 3;
switch (day) {
    case 1:
        console.log("Thứ Hai");
        break;
    case 2:
        console.log("Thứ Ba");
        break;
    case 3:
        console.log("Thứ Tư");
        break;
    case 4:
        console.log("Thứ Năm");
        break;
    case 5:
        console.log("Thứ Sáu");
        break;
    case 6:
        console.log("Thứ Bảy");
        break;
    case 7:
        console.log("Chủ Nhật");
        break;
    default:
        console.log("Không hợp lệ");
}

Giải thích:

Nếu day = 3, biểu thức switch(day) sẽ tìm đến case 3 và in ra "Thứ Tư".
break giúp thoát khỏi switch, tránh thực thi các case khác.
Nếu day không nằm trong khoảng từ 1 đến 7, default sẽ chạy và in ra "Không hợp lệ".

Ví dụ 2: Không sử dụng break

let grade = "B";
switch (grade) {
    case "A":
        console.log("Xuất sắc");
    case "B":
        console.log("Giỏi");
    case "C":
        console.log("Khá");
    case "D":
        console.log("Trung bình");
    case "F":
        console.log("Yếu");
    default:
        console.log("Không hợp lệ");
}

Kết quả khi grade = "B":

Giỏi
Khá
Trung bình
Yếu
Không hợp lệ

Giải thích:

Vì không có break, sau khi gặp case "B", chương trình tiếp tục thực thi tất cả các case phía dưới, bỏ qua điều kiện kiểm tra.
Đây là lỗi phổ biến khi sử dụng switch, do đó luôn thêm break trừ khi có lý do cụ thể để bỏ qua nó.

Ví dụ 3: Sử dụng default khi không có case nào khớp

let fruit = "Cam";
switch (fruit) {
    case "Táo":
        console.log("Bạn chọn Táo");
        break;
    case "Chuối":
        console.log("Bạn chọn Chuối");
        break;
    case "Nho":
        console.log("Bạn chọn Nho");
        break;
    default:
        console.log("Loại trái cây này không có sẵn");
}

Kết quả khi fruit = "Cam":

Loại trái cây này không có sẵn

Giải thích:

Vì "Cam" không trùng với bất kỳ case nào, nên default được thực thi.

Ví dụ minh họa về switch trong JavaScript

Xác định ngày trong tuần dựa trên số

Trong ví dụ này, chương trình nhận vào một số nguyên (day) từ 1 đến 7 và hiển thị tên của ngày tương ứng trong tuần.

Ví dụ:

let day = 3;
switch (day) {
    case 1:
        console.log("Chủ Nhật");
        break;
    case 2:
        console.log("Thứ Hai");
        break;
    case 3:
        console.log("Thứ Ba");
        break;
    case 4:
        console.log("Thứ Tư");
        break;
    case 5:
        console.log("Thứ Năm");
        break;
    case 6:
        console.log("Thứ Sáu");
        break;
    case 7:
        console.log("Thứ Bảy");
        break;
    default:
        console.log("Không hợp lệ");
}

Giải thích:

Nếu day = 3, chương trình sẽ tìm đến case 3, in ra "Thứ Ba", và sau đó dừng lại do có break.
Nếu day không nằm trong khoảng từ 1 đến 7, default sẽ chạy và hiển thị "Không hợp lệ".

Kết quả khi day = 3:

Thứ Ba

Kết quả khi day = 8:

Không hợp lệ

Kiểm tra cấp bậc người dùng

Ví dụ này minh họa cách sử dụng switch để xác định quyền hạn của người dùng dựa trên giá trị của biến role.

Ví dụ:

let role = "admin";
switch (role) {
    case "admin":
        console.log("Bạn có quyền quản trị.");
        break;
    case "user":
        console.log("Bạn là người dùng thông thường.");
        break;
    case "guest":
        console.log("Bạn đang truy cập với tư cách khách.");
        break;
    default:
        console.log("Không xác định vai trò.");
}

Giải thích:

Nếu role = "admin", chương trình sẽ tìm đến case "admin" và hiển thị "Bạn có quyền quản trị."
Nếu role = "user", chương trình sẽ hiển thị "Bạn là người dùng thông thường."
Nếu role = "guest", chương trình sẽ hiển thị "Bạn đang truy cập với tư cách khách."
Nếu role không thuộc một trong các giá trị trên, default sẽ hiển thị "Không xác định vai trò."

Kết quả khi role = "admin":

Bạn có quyền quản trị.

Kết quả khi role = "moderator":

Không xác định vai trò.

Xác định loại phương tiện giao thông dựa trên số bánh xe

Ví dụ này sử dụng switch để phân loại phương tiện giao thông theo số bánh xe.

Ví dụ:

let wheels = 4;
switch (wheels) {
    case 2:
        console.log("Xe máy hoặc xe đạp");
        break;
    case 3:
        console.log("Xe ba gác hoặc xe tuk-tuk");
        break;
    case 4:
        console.log("Ô tô");
        break;
    case 6:
        console.log("Xe tải nhỏ");
        break;
    default:
        console.log("Không xác định loại phương tiện");
}

Kết quả khi wheels = 4:

Ô tô

Kết quả khi wheels = 8:

Không xác định loại phương tiện

Lưu ý khi sử dụng switch trong JavaScript

Không có break sẽ dẫn đến thực thi tiếp các case sau

Trong switch, nếu không có break, chương trình sẽ tiếp tục thực thi tất cả các case phía dưới, ngay cả khi một case đã khớp.

Ví dụ 1: Không có break

let fruit = "apple";
switch (fruit) {
    case "apple":
        console.log("Táo");
    case "banana":
        console.log("Chuối");
}

Kết quả:

Táo
Chuối

Giải thích:

fruit = "apple", chương trình khớp với case "apple" và in ra "Táo".
Vì không có break, chương trình tiếp tục thực thi case "banana" và in ra "Chuối".
Điều này có thể gây ra lỗi nếu không mong muốn.

Ví dụ 2: Sử dụng break để tránh thực thi tiếp

let fruit = "apple";
switch (fruit) {
    case "apple":
        console.log("Táo");
        break;
    case "banana":
        console.log("Chuối");
        break;
}

Kết quả:

Táo

Giải thích:

Khi gặp break, chương trình dừng ngay sau khi thực thi xong case "apple".

switch sử dụng toán tử so sánh chặt (===)

switch trong JavaScript sử dụng toán tử so sánh chặt (===), nghĩa là nó so sánh cả giá trị và kiểu dữ liệu.

Ví dụ:

switch (10) {
    case "10":
        console.log("Trường hợp này sẽ không chạy");
        break;
    case 10:
        console.log("Đúng kiểu dữ liệu, nên chạy");
        break;
}

Kết quả:

Đúng kiểu dữ liệu, nên chạy

Giải thích:

switch (10) kiểm tra với case "10", nhưng do "10" là kiểu string còn 10 là kiểu number, nên không khớp.
case 10 khớp vì cả giá trị và kiểu dữ liệu đều đúng.

Lưu ý: Nếu muốn so sánh không chặt (==), bạn cần chuyển đổi kiểu dữ liệu trước khi đưa vào switch.

Ứng dụng thực tế của switchtrong JavaScript

Xử lý điều kiện theo menu lựa chọn của người dùng

Khi người dùng chọn một tùy chọn từ menu, switch giúp xử lý nhanh các hành động tương ứng.

Ví dụ:

let option = 2;
switch (option) {
    case 1:
        console.log("Bạn đã chọn Xem thông tin cá nhân");
        break;
    case 2:
        console.log("Bạn đã chọn Cập nhật tài khoản");
        break;
    case 3:
        console.log("Bạn đã chọn Đăng xuất");
        break;
    default:
        console.log("Lựa chọn không hợp lệ");
}

Kết quả khi option = 2:

Bạn đã chọn Cập nhật tài khoản

Kiểm tra loại phương thức thanh toán

Ứng dụng switch để xác định phương thức thanh toán khi mua hàng.

Ví dụ:

let paymentMethod = "credit_card";
switch (paymentMethod) {
    case "cash":
        console.log("Thanh toán bằng tiền mặt");
        break;
    case "credit_card":
        console.log("Thanh toán bằng thẻ tín dụng");
        break;
    case "paypal":
        console.log("Thanh toán bằng PayPal");
        break;
    default:
        console.log("Phương thức thanh toán không hợp lệ");
}

Kết quả khi paymentMethod = "credit_card":

Thanh toán bằng thẻ tín dụng

Phân loại sản phẩm dựa trên mã danh mục

Ứng dụng trong thương mại điện tử để phân loại sản phẩm.

Ví dụ:

let categoryCode = "ELEC";
switch (categoryCode) {
    case "ELEC":
        console.log("Danh mục: Điện tử");
        break;
    case "FASH":
        console.log("Danh mục: Thời trang");
        break;
    case "HOME":
        console.log("Danh mục: Đồ gia dụng");
        break;
    default:
        console.log("Danh mục không hợp lệ");
}

Kết quả khi categoryCode = "ELEC":

Danh mục: Điện tử

So sánh switch và if...else if...else trong Javascript

Cả switch và if...else if...else đều được sử dụng để kiểm tra điều kiện trong JavaScript, nhưng chúng có những ưu điểm và nhược điểm khác nhau tùy vào từng tình huống sử dụng.

Tiêu chí	`switch`	`if...else if...else`
Số lượng điều kiện	Phù hợp khi có nhiều giá trị cố định cần so sánh.	Phù hợp với điều kiện linh hoạt, có thể bao gồm toán tử logic.
Kiểu so sánh	Sử dụng toán tử so sánh chặt (`===`), nghĩa là so sánh cả giá trị và kiểu dữ liệu.	Có thể sử dụng nhiều loại điều kiện, bao gồm `===`, `>`, `<`, `&&`, `
Tính dễ đọc	Dễ đọc khi có nhiều trường hợp (`case`).	Khi có nhiều điều kiện, `if...else if` có thể trở nên dài và khó đọc.
Hiệu suất	Thường nhanh hơn nếu có nhiều điều kiện cố định, vì nó tối ưu hơn với bảng tra cứu.	Có thể chậm hơn nếu có nhiều điều kiện phức tạp.
Ứng dụng phù hợp	Khi cần kiểm tra một biến với nhiều giá trị cụ thể (ví dụ: menu, trạng thái đơn hàng).	Khi điều kiện kiểm tra cần linh hoạt, phức tạp (ví dụ: kiểm tra giá trị nằm trong khoảng nhất định).

Ví dụ 1: Kiểm tra loại tài khoản người dùng

Sử dụng switch (thích hợp khi có nhiều giá trị cụ thể)

let userRole = "editor";
switch (userRole) {
    case "admin":
        console.log("Quyền quản trị");
        break;
    case "editor":
        console.log("Quyền chỉnh sửa nội dung");
        break;
    case "viewer":
        console.log("Quyền chỉ xem");
        break;
    default:
        console.log("Không xác định quyền");
}

Sử dụng if...else if...else (vẫn có thể dùng nhưng không tối ưu khi so sánh bằng nhau)

let userRole = "editor";
if (userRole === "admin") {
    console.log("Quyền quản trị");
} else if (userRole === "editor") {
    console.log("Quyền chỉnh sửa nội dung");
} else if (userRole === "viewer") {
    console.log("Quyền chỉ xem");
} else {
    console.log("Không xác định quyền");
}

Nhận xét: switch giúp mã dễ đọc hơn trong trường hợp này vì chỉ cần kiểm tra một biến với nhiều giá trị cụ thể.

Ví dụ 2: Kiểm tra khoảng thời gian trong ngày

Sử dụng if...else if...else (thích hợp hơn khi so sánh giá trị nằm trong khoảng nhất định)

let hour = 14;
if (hour < 12) {
    console.log("Buổi sáng");
} else if (hour < 18) {
    console.log("Buổi chiều");
} else {
    console.log("Buổi tối");
}

if...else if...else thích hợp hơn vì switch không thể kiểm tra điều kiện dạng hour < 12 hoặc hour < 18.

Kết bài

Câu lệnh switch và if...else if...else đều là những công cụ quan trọng để kiểm soát luồng thực thi trong JavaScript. Việc chọn sử dụng câu lệnh nào phụ thuộc vào tình huống cụ thể:

Dùng switch khi có nhiều giá trị cụ thể cần so sánh bằng nhau (===), như kiểm tra menu, trạng thái đơn hàng, phân loại tài khoản người dùng.
Dùng if...else if...else khi điều kiện cần kiểm tra phức tạp hơn, như so sánh khoảng giá trị, kiểm tra nhiều điều kiện logic kết hợp (&&, ||).
Về hiệu suất, switch có thể tối ưu hơn khi có nhiều giá trị cố định, nhưng sự khác biệt thường không đáng kể trừ khi xử lý khối lượng dữ liệu rất lớn.