5 tips để viết các câu điều kiện xịn hơn trong Javascript

3782

Người viết: Thạo

1. Sử dụng Array.includes cho nhiều điều kiện

Ta có ví dụ như sau:

Nhìn có vẻ ổn ổn rồi, mình thì vẫn hay viết như vậy mà =)) Tuy nhiên, điều gì sẽ xảy ra nếu có nhiều trái cây màu đỏ hơn, ví dụ thêm cherry và cranberries ? Chúng ta sẽ mở rộng điều kiện if với việc thêm 2 cái || ?

Ở trong PHP, mình sẽ giải quyết vấn đề bằng cách sử dụng in_array(), và js cũng tương tự như vậy. Chúng ta có thể viết lại điều kiện ở trên bằng cách sử dụng Array.includes.

Chốt: cho hết các điều kiện vào 1 mảng.

  Tìm hiểu về Meta programming trong Javascript
  So sánh forEach và map trong javascript

2. Giảm Nesting, Return sớm cho bớt đau khổ

Hãy mở rộng ví dụ trước để bao gồm hai điều kiện nữa:

  • nếu không có trái cây đầu vào, đẩy ra lỗi
  • nếu có thì in số lượng quả nếu vượt quá 10

Nhìn vào đoạn code trên, chúng ta có:

  • 1 câu if / else lọc ra điều kiện không hợp lệ
  • 3 mức nested if lồng nhau (condition 1, 2 & 3)

Một quy tắc chung mà chúng ta nên tuân theo là return kết quả sớm khi tìm thấy điều kiện không hợp lệ. Chúng ta có thể sửa lại 1 chút thành:

Bằng cách này, chúng ta có một mức độ ít hơn của câu lệnh lồng nhau. Phong cách code này khá tốt, đặc biệt là khi bạn có câu lệnh if dài (hãy tưởng tượng bạn cần cuộn xuống phía dưới cùng để biết được rằng hết if này sẽ còn hay không còn else nữa).

Chúng ta có thể giảm thêm việc sử dụng nested if, bằng cách đảo ngược các điều kiện và return sớm. Nhìn vào condition 2 dưới đây để xem chúng ta sẽ làm điều đó như thế nào:

Bằng cách đảo ngược các điều kiện của condition 2, code của chúng ta hiện không có câu lệnh lồng nhau. Kỹ thuật này rất hữu ích khi chúng ta có logic dài và muốn dừng quá trình tiếp theo khi một điều kiện không được đáp ứng.

Tuy nhiên, không nên quá cứng nhắc rằng phải loại bỏ if lồng nhau bằng được, return bằng được khi điều kiện không thỏa mãn. Trong trường hợp này, nên dừng lại ở phiên bản version 2, bởi vì:

  • Code vẫn ngắn gọn, dễ hiểu và hiển nhiên là đọc rất thuận miệng =))
  • Việc đảo ngược các điều kiện dễ phát sinh các vấn đề nếu là điều kiện phức tạp, tăng cognitive load (cognitive load)

Chốt: luôn luôn nhắm đến việc giảm việc sử dụng if lồng nhau và return sớm nhưng đừng lạm dụng nó.

Tham khảo thêm về vấn đề này tại:

3. Sử dụng tham số mặc định (Default function parameters) và Destructuring

Khi chúng ta muốn kiểm tra giá trị xem có null hay undefined không và gán giá trị mặc định cho nó:

Trong thực tế, chúng ta có thể loại bỏ biến q bằng cách gán các tham số mặc định:

Mỗi tham số đều có thể có tham số mặc định riêng. Ví dụ: chúng ta cũng có thể gán giá trị mặc định cho trái cây: test(fruit = 'unknown', quantity = 1)

Nếu trái cây của chúng ta là một object thì sao? Chúng ta có thể gán tham số mặc định?

Với ví dụ trên, chúng ta muốn in tên trái cây nếu có hoặc sẽ in không xác định. Chúng ta có thể tránh việc kiểm tra điều kiện fruit && fruit.name với tham số mặc định & destructuring assignments.

Vì chỉ cần thuộc tính name từ fruit, chúng ta có thể destructing tham số bằng cách sử dụng {name}, sau đó có thể sử dụng name làm biến trong code luôn thay vì fruit.name.

Chúng ta cũng gán đối tượng trống {} làm giá trị mặc định. Nếu không làm như vậy, bạn sẽ gặp lỗi khi thực hiện test(undefined) – Cannot destructure property name of 'undefined' or 'null'. bởi vì không có property name trong undefined.

Chúng ta có thể sử dụng thư viện bên thứ 3, với Lodash get (Lodash) như thế này:

Chốt: luôn gán giá trị mặc định cho tham số.

4. Sử dụng Map / Object thay vì dùng Switch Statement

Hãy xem ví dụ dưới đây, chúng ta muốn in ra các trái cây dựa trên màu sắc:

Cách giải quyết vấn đề như trên thì không có gì phải bàn về việc đúng sai, nhưng nó dài. Vậy thì sửa lại một chút như thế này:

Ngoài ra, bạn có thể sử dụng Map() để đạt được kết quả tương tự:

  • Map
  • Phải chăng 2 cách dưới đã khiến cho chúng ta không bao giờ nghĩ đến việc dùng switch ?

Đối với ví dụ trên, chúng ta thực sự có thể cấu trúc lại code của mình để đạt được kết quả tương tự với Array.filter.

Chốt: Thay vì dùng switch, hãy dùng Map() hoặc gắn các điều kiện thành Object.

5. Sử dụng Array.every & Array.some

Chúng ta muốn kiểm tra xem tất cả các loại trái cây có màu đỏ hay không?:

Chúng ta có thể dùng Array.every để làm điều này gọn gàng hơn:

Theo cách tương tự, nếu chúng ta muốn kiểm tra xem có bất kỳ quả nào có màu đỏ hay không, chúng ta có thể sử dụng Array.some để đạt được kết quả đó trong… 1 dòng:

Chốt: dùng Array.every & Array.some (okay, chả biết chốt thế nào)

Kết luận

  • Kiến thức không tự sinh ra cũng không tự mất đi, bài viết này được hoàn thành từ bài viết gốc 5 Tips to Write Better Conditionals in JavaScript và cộng với một ít chém gió của mình.
  • Ăn quả nhớ kẻ trồng cây, lấy bài nhớ ghi nguồn.

Có thể bạn quan tâm:

Xem thêm việc làm JavaScript Developer trên TopDev

TopDev via Viblo

  Nhìn qua một vài điểm về Javascript ES2019
  Method Chaining trong JavaScript là gì