HOME › học javascript - lập trình javascript cơ bản>>06. lệnh điều kiện trong javascript

switch case trong JavaScript

16 tháng 6 ,2022

Hướng dẫn cách sử dụng lệnh switch case trong JavaScript. Bạn sẽ biết switch trong JavaScript dùng để làm gì, cú pháp lệnh switch case trong JavaScript, cũng như lý do vì sao lại cần viết lệnh break trong switch case sau bài học này.

switch case trong JavaScript

Khái niệm và cú pháp switch case trong JavaScript

switch case là một trong câu lệnh sử dụng dùng để rẽ nhánh chương trình trong JavaScript. Câu lệnh switch có thể tách quá trình xử lý bằng cách kiểm tra xem giá trị của biến hoặc biểu thức đang xét có khớp với một trong các giá trị được chỉ định hay không. Và trong từng trường hợp khớp với mỗi giá trị chỉ định sẽ có các xử lý riêng cho trường hợp đó.

Chúng ta sử dụng lệnh switch case trong JavaScript với cú pháp như sau:

switch (expression){
    case value1：
        //Xử lý nếu expression === value1
        …
        break;
    case value2:
        //Xử lý nếu expression === value2
        …
        break;
    case value3:
        //Xử lý nếu expression === value3
        …
        break;
    default:
        //Xử lý nếu giá trị của expression không khớp với bất kỳ giá trị nào được chỉ định.
        …
}

Trong đó

expression có thể là một giá trị cụ thể, tên biến hoặc biểu thức tính toán, và giá trị của nó sẽ được dùng để so sánh xem có khớp với giá trị trong các case hay không.
case là từ khoá bắt đầu các xử lý trong trường hợp giá trị của expression khớp với giá trị chỉ định đằng sau case.
break là lệnh dùng để dừng switch sau khi hoàn thành các xử lý ở case tìm thấy. Chúng ta cũng có thể lược bỏ lệnh break.
default là từ khoá bắt đầu các xử lý trong trường hợp giá trị của expression không khớp với bất kỳ giá trị nào được chỉ định.

Quy trình xử lý switch case trong JavaScript

Quy trình xử lý switch case trong JavaScript như sau:

Đánh giá giá trị của expression trong () sau khi chuyển đổi để xem liệu giá trị của nó có khớp với bất kỳ giá trị nào được chỉ định hay không.
Nếu tìm thấy giá trị khớp với giá trị chỉ định, chương trình sẽ xử lý tất cả các lệnh bắt đầu từ thời điểm đó cho tới cuối lệnh switch, hoặc là khi gặp lệnh break.
Nếu không có giá trị nào khớp, các xử lý được mô tả sau khi từ khoá default (xử lý mặc định) được thực thi. Mệnh đề mặc định có thể được lược bỏ khi viết switch case nếu nó không cần thiết.

Đặc biệt lưu ý là chương trình sẽ xử lý tất cả các lệnh bắt đầu từ thời điểm đó cho tới cuối lệnh switch, hoặc là khi gặp lệnh break. Điều đó có nghĩa không phải chỉ có các lệnh được miêu tả trong case tìm thấy được chạy, mà là tất cả các lệnh từ đó cho tới cuối switch sẽ được chạy. Đó là lý do mà chúng ta cần thêm lệnh break ở từng case như ở trên để dừng lệnh switch ngay sau khi hoàn thành các xử lý trong case.

Tất nhiên chúng ta cũng có thể lược bỏ đi lệnh break và xử lý khi đó thế nào, hãy xem thêm ở phần dưới bài.

Sử dụng switch case trong JavaScript

Sau đây hãy cùng xem một số ví dụ sử dụng switch case trong JavaScript như sau:

switch case trong JavaScript với giá trị cụ thể

switch (123){
  case 123:
    console.log('Giá trị đang kiểm tra bằng 123');
    break;
  case "abc":
    console.log('Giá trị đang kiểm tra bằng abc');
    break;
  default:
    console.log('Hello');
}
//Giá trị đang kiểm tra bằng 123

Ở ví dụ này thì do giá chỉ chỉ định 123 khớp với trường hợp case 123 nên xử lý trong case này đã được thực thi.

switch case trong JavaScript với tên biến

let pref = 'Đồng Nai';

switch (pref){
  case "Ninh Bình":
    console.log('Tỉnh Ninh Bình');
    break;
  case "Hà Nội":
    console.log('Thủ đô Hà Nội');
    break;
  case "Nam Định":
    console.log('Tỉnh Nam Định');
    break;    
  default:
    console.log('Một tỉnh khác');
}
//Một tỉnh khác

Ở ví dụ này thì do giá chỉ của biến pref không khớp với bất cứ giá trị nào trong các trường hợp chỉ định, nên xử lý mặc định viết sau từ khoá default sẽ được thực thi.

switch case trong JavaScript với biểu thức tính toán

switch ( 1 + 2 + 5){
  case 2:
    console.log('Tổng bằng 2');
    break;
  case 8:
    console.log('Tổng bằng 8');
    break;
  default:
    console.log('Tổng bằng số khác');
}
//Tổng bằng 8

Ở ví dụ này thì do kết quả của biểu thức 1 + 2 + 5 bằng 8 khớp với trường hợp case 8, do đó xử lý trong case này đã được thực thi.

Chuyển đổi switch case và if trong JavaScript

Do switch case và if đều là các lệnh dùng để rẽ nhanh chương trình trong JavaScript nên chúng ta hoàn toàn có thể chuyển đổi giữa chúng với nhau.

Lấy ví dụ, với lệnh switch case sau:

let pref = 'Đồng Nai';

switch (pref){
  case "Ninh Bình":
    console.log('Tỉnh Ninh Bình');
    break;
  case "Hà Nội":
    console.log('Thủ đô Hà Nội');
    break;
  case "Nam Định":
    console.log('Tỉnh Nam Định');
    break;    
  default:
    console.log('Một tỉnh khác');
}
//Một tỉnh khác

Chúng ta hoàn toàn có thể viết lại bằng lệnh if như sau:

let pref = 'Đồng Nai';

if(pref ==="Ninh Bình" ){
    console.log('Tỉnh Ninh Bình');
}else if(pref ==="Hà Nội" ){
    console.log('Thủ đô Hà Nội');
}else if(pref ==="Nam Định" ){
    console.log('Tỉnh Nam Định');
}else{
    console.log('Một tỉnh khác');
}

Tuy nhiên trong các trường hợp có nhiều trường hợp cần xét, thì so với lệnh if thì Kiyoshi nghĩ lệnh switch case sẽ giúp câu lệnh rõ ràng và dễ sửa hơn.

switch case không chứa break trong JavaScript

Lệnh switch case trong JavaScript chứa các xử lý riêng biệt được ghi sau từ khoá case trong các trường hợp riêng biệt. Và nếu tìm thấy giá trị khớp với giá trị chỉ định, chương trình sẽ xử lý tất cả các lệnh bắt đầu từ thời điểm đó cho tới cuối lệnh switch, hoặc là khi gặp lệnh break.

Bởi vậy thông thường chúng ta sẽ ghi lệnh break ở vị trí cuối cùng trong các xử lý sau khoá case để kết thúc switch ngay tại case tìm thấy.

Tuy nhiên thì chúng ta cũng hoàn toàn có thể bỏ đi không ghi break, và khi đó đơn giản là tất cả các xử lý sẽ được chạy cho tới cuối lệnh switch case mà thôi.

Lấy ví dụ:

let pref = 'Đồng Nai';

switch (pref){
  case "Ninh Bình":
    console.log('Tỉnh Ninh Bình');
  case "Đồng Nai":
    console.log('Tỉnh Đồng Nai');
  case "Hà Nội":
    console.log('Thủ đô Hà Nội');
  case "Nam Định":
    console.log('Tỉnh Nam Định');
  default:
    console.log('Một tỉnh khác');
}

Khi chạy lệnh, khác với khi có break thì rất nhiều dòng kết quả sẽ được in ra như sau:

Tỉnh Đồng Nai
Thủ đô Hà Nội
Tỉnh Nam Định
Một tỉnh khác

Lý do là vì, sau khi tìm thấy case Đồng Nai thì do không tìm thấy lệnh break nên tất cả các xử lý sau đó cho tới cuối switch đều được chạy, do đó tất cả các lệnh console.log đều đã được thực thi.

Thông thường, chúng ta sẽ không muốn chạy lệnh kiểu này, nên đó là lý do mà cần phải thêm lệnh break ở đằng sau tất cả các xử lý của case được miêu tả trong switch case.

Ứng dụng switch case không chứa break để thực hiện cùng một xử lý cho nhiều giá trị

Trong câu lệnh switch, chúng ta sẽ kiểm tra xem giá trị được xét có khớp với giá trị được mô tả sau khoá case hay không, nhưng bằng cách cố ý không viết câu lệnh break, chúng ta có thể thực hiện một quá trình xử lý giống nhau cho nhiều giá trị.

Ví dụ cụ thể:

let ans = 'Tháng 8';

switch (ans){
  case 'Tháng 8':
  case 'T 8':
  case 'August':
    console.log('Đúng');
    break;
  default:
    console.log('Sai');
}
//>Đúng

Ở ví dụ này, lệnh console.log('Đúng'); chỉ được thực thi khi giá trị của biến ans khớp với August, tuy nhiên thì do cố ý không viết break nên lệnh console này được chạy cả trong các trường hợp Tháng 8 lẫn T 8.

Tổng kết

Trên đây Kiyoshi đã hướng dẫn bạn về cách sử dụng lệnh switch case trong JavaScript rồi. Để nắm rõ nội dung bài học hơn, bạn hãy thực hành viết lại các ví dụ của ngày hôm nay nhé.

Và hãy cùng tìm hiểu những kiến thức sâu hơn về JavaScript trong các bài học tiếp theo.