Tối ưu câu lệnh điều kiện dễ đọc hơn trong Javascript
Người viết: Long Hai Một trong những công cụ mạnh mẽ và được sử dụng nhiều nhất của các ngôn ngữ lập trình chính là các câu lệnh điều kiện, tạo ra các nhánh code chỉ được chạy khi đáp ứng một số điều kiện nhất định. Javascript có 3 loại điều kiện chính: khối if/else, switch ...
Người viết: Long Hai
Một trong những công cụ mạnh mẽ và được sử dụng nhiều nhất của các ngôn ngữ lập trình chính là các câu lệnh điều kiện, tạo ra các nhánh code chỉ được chạy khi đáp ứng một số điều kiện nhất định. Javascript có 3 loại điều kiện chính: khối if/else, switch statements và biểu thức điều kiện. 3 câu lệnh này có thể giúp bạn tạo ra được những dòng code rất awsome!
Giống như những câu lệnh khác, một câu lệnh điều kiện không được tối ưu sẽ rất dễ gây ra lỗi và khó tối ưu sau này. Vậy nên dưới đây, mình xin phép được giới thiệu một số cách viết áp dụng vài nguyên tắc cơ bản để giúp chúng ta tối ưu được những câu lệnh điều kiện này một cách tốt nhất.
Khái niệm cơ bản nhất của Javascript Conditionals
Như mình đã nói trước đó, Javascript ( JS ) có 3 loại điều kiện chính. Đầu tiên chính là câu lệnh if/else. Định nghĩa về câu lệnh này rấy đơn giản: Nếu điều kiện đúng , đoạn code trong đó sẽ được chạy. Ví dụ:
|
1 2 3 4 5 |
if (condition){ // code sẽ được chạy nếu như điều kiện là đúng } |
Ta cũng có thể chạy thêm đoạn mã khác dựa trên cùng một điều kiện, bằng cách thêm từ khoá else, như ví dụ dưới đây:
|
1 2 3 4 5 6 7 |
if (condition){ // code sẽ được chạy nếu như điều kiện là đúng } else { // nếu không đáp ứng điều kiện trên nó sẽ chạy xuống đâyyy } |
Bạn cũng có thể thêm nhiều điều kiện bằng cách sử dụng các câu lệnh else/if như dưới đây:
|
1 2 3 4 5 6 7 8 9 10 |
if (condition){ // code sẽ được chạy nếu như thoả mãn condition } else if(condition2) { // nếu không đáp ứng điều kiện trên nó sẽ chạy xuống đâyyy // và kèm thêm thoả mãn condition2 } else { // Nếu không vô 2 cái kia thì sẽ chạy vào đây } |
Câu lệnh switch, nó kiểm tra giá trị của 1 hoặc nhiều case đối với expression. Nếu không có case nào thoả mãn, thì bạn có thể cung cấp một case mặc định – được gọi là default:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
switch(expression){ case value1: // code được thực thi nếu khớp với value1 break; case value2: // code được thực thi nếu khớp với value2 break; default: // code code được thực thi nếu ko thoả mãn những case trên break; } |
Một trong những lưu ý quan trọng nhất của switch statements chính là break or return. Chúng sẽ giúp ngắt việc thực thi case không thoả mãn và tiếp tục chạy xuống những case phía dưới. Ví dụ:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
const name = "Jim"; switch(name){ case "Mark": // This code will not run case "Jim": // This code and all other code after will run case "Sarah": ... default: ... } |
Kiểu điều kiện cuối cùng chính là biểu thức điều kiện. Chúng cũng là một cách hay được sử dụng để đơn giản hoá mệnh đề if/else.
|
1 2 3 |
const myValue = condition ? valueIfTrue : valueIfFalse; |
Best Practices cho Conditionals
Nếu như không được tối ưu và sử dụng đúng cách, các câu lệnh điều kiện sẽ là một cản trở khó chịu trong quá trình xây dựng sản phẩm của bạn. Để giảm trừ điều này, có một vài nguyên tắc mà bạn nên tuân theo để tránh cho những câu lệnh điều kiện mà bạn viết ra trở thành một mớ hỗn độn.
- Đừng sử dụng câu lệnh If để gán giá trị có điều kiện. Ví dụ:
|
1 2 3 4 5 6 7 8 |
let myVal if (condition) { myVal = valueIfTrue } else { myVal = valueIfFalse } |
Với bài toán trên, bạn nên xử lý như thế này:
|
1 2 3 |
const myVal = condition ? valueIfTrue : valueIfFalse |
2. Tránh lồng quá nhiều if/else. Về bản chất, else/if là một khối if lồng nhau. Ta thường viết nó như thế này:
|
1 2 3 4 5 6 7 8 9 10 11 |
let result if (condition) { // calculate result_v1 } else if (condition2) { // calculate result_v2 } else { // default calculation } return result |
Thực tế, nó chính là như thế này:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
let result if (condition){ // calculate result_v1 } else { if(condition2) { // calculate result_v2 } else { // default calculation } } return result |
Với đồng bùng nhùng bên trên, ta có thể viết lại chúng như sau:
|
1 2 3 4 5 6 7 8 9 10 11 |
if (condition) { // return calculated result_v1 } if (condition2) { // return calculated result_v2 } // return default calculation |
Một cách khác để tránh những If blocks lồng nhau, đó chính là sử dụng switch statements, như dưới đây:
|
1 2 3 4 5 6 7 8 9 10 |
switch (expresion){ case one: // return calculated result_v1 case two: // return calculated result_v2 default: // return default calculation } |
Trên đây là một số chia sẻ về câu lệnh điều kiện trong JS cũng như một số nguyên tắc nhỏ trong việc viết chung. Cảm ơn các bạn đã theo dõi bài viết!
Tham khảo: How to Make Your Conditional Statements Easier to Read in JavaScript
Đừng bỏ lỡ những bài viết hay liên quan:
- 12 tips hay cho JavaScript
- 8 cách tối ưu hoá JavaScript mọi lập trình viên đều phải biết
- Một số thủ thuật trong JavaScript
Xem thêm việc làm JavaScript Developer tại TopDev
TopDev via viblo.asia
