switch case trong javascript

Chào các bạn

Trong bài viết này mình cùng nhau tìm hiểu về switch case

Cú Pháp

1switch (key) { 
2    case 1: // if(key === 1)
3        // body
4        break;
5    case 2: // if(key === 2)
6        // body
7        break;
8
9    // ... case 
10
11    default:
12        // body
13        break;
14}

Nó có thể có rất rất là nhiều case tiếp theo và có một default mặc định. Tùy trường hợp.

Chúng ta có thể xóa default cũng ko sao

1switch (key) { 
2    case 1: // if(key === 1)
3        // body
4        break;
5    case 2: // if(key === 2)
6        // body
7        break;
8}

Chúng ta sẽ đi vào một ví dụ thật. Rồi xem cách nó chạy như thế nào nhé.

1let age = 18;
2
3switch (age) {
4    case 17: // if(age === 17)
5        console.log(17);
6        break;
7    case 18: // if(age === 18)
8        console.log(18); // 18
9        break;
10    case 19: // if(age === 19)
11        console.log(19);
12        break;
13
14    default: 
15        console.log("default");
16        break;
17}

Cách chạy của nó.

1. Khai báo và gán giá trị let age = 18
2. Chạy đến switch và chúng ta truyền vào key để so sánh. Và key ở đây là age tức là key = 18
3. Chạy tiếp xuống case
   • So sánh age === 17 tức là 18 === 17 trả về false
   • Trả về false nên sẽ ko đi vào body mà nhảy tiếp đến case tiếp theo
4. Chạy tiếp xuống case
   • So sánh age === 18 tức là 18 === 18 trả về true
   • Trả về true nên sẽ đi vào body và console.log(18)
   • Xong rồi gặp từ khóa break nên nó thoát khỏi switch và không chạy xuống tiếp nữa.

Kết quả chúng ta có 18

Cũng từ ví dụ đó. Chúng ta đổi age = 17 và đồng thời xóa break xem nó như thế nào nhé.

1let age = 17;
2
3switch (age) {
4    case 17: // if(age === 17)
5        console.log(17); // 17
6        // Xóa break
7    case 18: // if(age === 18)
8        console.log(18); // 18
9        break;
10    case 19: // if(age === 19)
11        console.log(19);
12        break;
13
14    default: 
15        console.log("default");
16        break;
17}

Kết quả chúng ta có 17 và 18

Vậy tại sao nó lại như vậy?. Cách chạy nó cũng tương tự như ví dụ ở trên thôi. Nhưng vì bây giờ chúng ta đã loại bỏ break nên nó chạy tiếp vào body ở case 18. Từ ví dụ này chúng ta có thể suy luận nó chỉ so sánh case đúng 1 lần duy nhất.

Vậy còn default thì sao. Cũng ví dụ trên chúng ta đổi age = "hello" chẳng hạn.

1let age = "hello";
2
3switch (age) {
4    case 17: // if(age === 17)
5        console.log(17); 
6        break;
7    case 18: // if(age === 18)
8        console.log(18); 
9        break;
10    case 19: // if(age === 19)
11        console.log(19);
12        break;
13
14    default: 
15        console.log("default"); // default
16        break;
17}

Kết quả chúng ta có default

Cách chạy nó cũng như trên. Nó so sánh từng case một. Nếu không có case nào đúng thì đi vào default và làm cái gì đó trong body do chúng ta tự định nghĩa.

Vậy giả sử chúng ta xóa default luôn thì sao.

1let age = "hello";
2
3switch (age) {
4    case 17: // if(age === 17)
5        console.log(17); 
6        break;
7    case 18: // if(age === 18)
8        console.log(18); 
9        break;
10    case 19: // if(age === 19)
11        console.log(19);
12        break;
13}

Kết quả không có điều gì xãy ra cả.

Ở các ví dụ trên là mình đang dùng number để so sánh. Chúng ta đổi nó string hay biểu thức gì cũng dc cả.

1let age = "hello";
2
3switch (age) {
4    case 1 + 2: // if(age === 17)
5        console.log(17);
6        break;
7    case 18: // if(age === 18)
8        console.log(18);
9        break;
10    case prompt("Nhập cái gì đó", ""): // if(age === "hello")
11        console.log(19); // 19
12        break;
13    default:
14        console.log("default");
15        break;
16}

Ở ví dụ trên nếu mình nhập hello thì kết quả là 19 còn nhập cái khác thì kết quả là default

[LƯU Ý] : case so sánh ở đây là bằng toán tử === 3 dấu bằng chứ không phải ==.

Vậy 3 dấu bằng === khác 2 dấu == thế nào.

1. === so sánh thêm cả kiểu dữ liệu. Tức là typeof

   1 let a = 1;
   2 let b = 1;
   3
   4 console.log(typeof a) // number
   5 console.log(typeof b) // number
   6 console.log(a === b) // true
   7 console.log(a == b) // true

2. == thì khác

   1 let a = 1;
   2 let b = '1'; // chuổi số 1
   3
   4 console.log(typeof a) // number
   5 console.log(typeof b) // string
   6 console.log(a === b) // false
   7 console.log(a == b) // true

Các bạn nhìn 2 ví dụ trên sẽ thấy đầu ra khác nhau đúng ko. case nó so sánh kiểu đó

Tổng kết

Trong bài viết này mình đã hướng dẫn sơ qua các bạn về switch case. Các bạn có thể xem thêm về nó tại đây switch case