Cách sử dụng switch case trong Javascript - JavaScript switch Statement

Trong bài viết này, chúng ta sẽ cùng tìm hiểu về câu lệnh switch trong JavaScript thông qua các ví dụ nhé 😋.

Lệnh switch trong JavaScript

Câu lệnh switch trong JavaScript kiểm tra một biểu thức (expression) và thực thi phần nội dung tương ứng phù hợp với kết quả của biểu thức.

Cú pháp của câu lệnh switch là:

switch(variable/expression) {
    case value1:  
        // phần thân của case 1
        break;

    case value2:  
        // phần thân của case 2
        break;

    case valueN:
        // phần thân của case N
        break;

    default:
        // Nếu không có case nào thỏa mãn thì mặc định sẽ thực thi code ở đây
}

Câu lệnh switch sẽ kiểm tra biến hoặc biểu thức bên trong dấu ngoặc đơn ().

1. Nếu kết quả của biểu thức bằng value1, phần thân của nó sẽ được thực thi.
2. Nếu kết quả của biểu thức bằng value2, phần thân của nó sẽ được thực thi.
3. Nếu không có trường hợp phù hợp, phần thân default sẽ thực thi.

Ví dụ:

let text = 'b';

switch (text) {

    case 'a':
        text = 'A';
        break;
    case 'b':
        text = 'B';
        break;
    default:
        text = 'Bạn vừa nhập giá trị không phù hợp!';
        break;
}
console.log(`Chữ in hoa: ${text}`);

Kết quả chương trình trên:

Chữ in hoa: B

Trong chương trình trên, kết quả của biểu thức text = 'b' sẽ được so sánh với các case.

1. case 'a' không thỏa mãn vì 'b' != 'a' nên phần thân của case này không được thực thi.
2. Chương trình tiếp tục chạy vào case 'b' và code trong phần thân sẽ được thực thi (vì kết quả biểu thức phù hợp với case). Lúc này dòng Chữ in hoa: B sẽ được in ra.
3. Câu lệnh break sẽ kết thúc khối và luồng của chương trình lúc này sẽ nhảy ra bên ngoài khối switch.

Chúng ta cùng đến với một ví dụ khác:

let a = 2;

switch (a) {
    case "2":
        a = 2;
        break;
    case 2:
        a = 'two';
        break;
    case 3:
        a = 'three';
        break;

    default:
        a = 'Không tìm thấy giá trị này!';
        break;
}
console.log(`Kết quả: ${a}`);

Kết quả chương trình trên:

Kết quả: two

Ở ví dụ trên ta truyền số 2 vào () và chương trình sẽ kiểm tra xem có case nào phù hợp với giá trị này và thực thi phần code tương ứng của case đó.

1. Trong JavaScript, câu lệnh switch sẽ kiểm tra giá trị một cách nghiêm ngặt (strict equality). Vì vậy, kết quả của biểu thức không khớp với trường hợp "2".
2. Sau đó, câu lệnh switch chuyển sang trường hợp thứ hai. Ở đây, kết quả của biểu thức khớp với case 2. Vì vậy, Kết quả: two được in ra.
3. Câu lệnh break kết thúc khối và luồng của chương trình sẽ nhảy ra bên ngoài khối switch.

Trong JavaScript, câu lệnh switch sẽ kiểm tra nghiêm ngặt các case phải cùng kiểu dữ liệu, cùng giá trị với kết quả của biểu thức. Trong ví dụ trên, 2 không khớp với "2" (khác kiểu dữ liệu).

Trong câu lệnh switch JavaScript, các case có thể được nhóm lại để sử dụng chung một khối code.

let vehicle = 'car';
switch(vehicle) {
    case 'car':
    case 'bicycle':
        console.log(`${vehicle} là phương tiện giao thông đường bộ`);
        break;
    case 'boat':
    case 'cruise ship':
    case 'motorboat':
        console.log(`${vehicle} là phương tiện giao thông đường thủy`);
        break;
    default:
        console.log(`không tìm thấy ${vehicle}.`);
        break;
}

Trong chương trình trên, nhiều case được nhóm lại để dùng cùng một khối code.

Nếu giá trị của biến vehicle có giá trị là 'boat' hoặc 'motorboat', thì kết quả output như nhau.

Trong các ví dụ trên, đều sử dụng lệnh break trong từng case. Với trường hợp không sử dụng break thì bạn có thể xem thêm tại đây: JavaScript switch Without break.