Một vài điều cần lưu ý khi bạn làm việc với JS

1155

Bài viết được sự cho phép của tác giả Lưu Bình An

Array.sort() cho kết quả khác nhau trên các trình duyệt khác nhau

Khi bạn cần sort các phần tử trong một mảng, khả năng rất cao là bạn sẽ sử dụng callback như: sort((x, y) => x < y).

  10 câu hỏi javascript để nâng cao trình độ
  10 trình quản lý file hàng đầu trong JavaScript

Đây là kết quả của Chrome và Firefox

Một vài điều cần lưu ý khi bạn làm việc với JS

Hàm callback chúng ta truyền vào phải return một trong ba giá trị 1, 0, -1, vì chúng ta đang return một giá trị boolean, nên sẽ tùy vào trình duyệt quyết định

Sử dụng JSON.stringify với tham số

Là một web developer, ít nhất một lần trong đời bạn sẽ sử dụng đến hàm JSON.stringify. Nhưng bạn có biết hàm này còn một tham số thứ 2 có thể truyền vào? Nó sẽ được sử dụng như một danh sách whitelist khi parse (chỉ có những giá trị key nằm trong whitelist mới được parse)

Một vài điều cần lưu ý khi bạn làm việc với JS

Không chỉ giới hạn là một mảng, có thể truyền một function để validatereplaceparse cặp keyvalue nhận được

Một vài điều cần lưu ý khi bạn làm việc với JS

Array.filter() không làm việc với Promise

Một công việc cũng hay sử lý trên mảng: thực hiện một số xử lý async trên các phần tử trong mảng, lặp qua các phần tử để xử lý dữ liệu rồi filter những phần tử không mong muốn.

Ví dụ, để kiểm tra user có quyền thực hiện một số tính năng nào đó không, chúng ta cần kiểm tra tất cả các giá trị trong mảng permissions

Một vài điều cần lưu ý khi bạn làm việc với JS

Một vài điều cần lưu ý khi bạn làm việc với JS

Code trên hoàn toàn hợp lý và đúng 100%

Tính huống tiếp theo, nếu bên trong hàm userCan chúng ta có một xử lý async?

Một vài điều cần lưu ý khi bạn làm việc với JS

Không chạy đúng đâu. Để sửa lại cho nó chạy đúng, chúng ta phải dùng map trước khi dùng đến filter

Một vài điều cần lưu ý khi bạn làm việc với JS

Nullish vs OR

Ai cũng biết viết OR

const foo = buzz || 'fallback'

Trong trường hợp bạn muốn foo bằng 0 khi buzz bằng 0, nói cách khác 0 vẫn được xem là một giá trị hợp lệ thì cách viết trên toang.

Một vài điều cần lưu ý khi bạn làm việc với JS

Nullish tương đối mới và được hỗ trợ từ TypeScript 3.7, các phiên bản trình duyệt mới, cũng nên lưu ý điểm này nhé.

Promise constructor anti-pattern

Tạo một Promise không vì một lý do gì cả.

Nếu bạn có một xử lý async thì bản chất nó đã return một promise, việc bạn new Promise chẳng có ý nghĩa gì cả

Một vài điều cần lưu ý khi bạn làm việc với JS

Chỉ đơn giản return fetchThing() là được (fetchThing là một async function)

Một vài điều cần lưu ý khi bạn làm việc với JS

Catch await error

Nếu sử dụng Promise bạn sẽ dùng then và catch, còn dùng async/await bạn sẽ dùng try/catch như thế này

Một vài điều cần lưu ý khi bạn làm việc với JS

Một cách thần kỳ chúng ta vẫn có thể dùng .catch ngay trên await

Một vài điều cần lưu ý khi bạn làm việc với JS

Nếu ngồi chiêm nghiệm thật kỹ bạn sẽ hiểu vì sao chúng ta vẫn viết được như vậy, gợi ý await là một cách viết cũng dựa trên Promise mà ra

Optional chain trên function

Optional chain trong object không xa lạ, nhưng optional chain trên function thì bạn có dùng chưa?

Một vài điều cần lưu ý khi bạn làm việc với JS

Một tình huống bạn sẽ sử dụng rất nhiều trong React là callback prop. Sẽ không còn cần phải viết onClick={onClick && () => onClick(param)}

10 Things 2020 has taught me

Bài viết gốc được đăng tải tại vuilaptrinh.com

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

Xem thêm Việc làm Developer hấp dẫn trên TopDev