ĐỪN5 nhầm lẫn có thể gặp khi làm việc với JavaScript

JavaScript là ngôn ngữ lập trình phổ biến nhất trên thế giới trong suốt 20 năm qua. Nó cũng là một trong số 3 ngôn ngữ chính của lập trình web:

1. HTML: Giúp bạn thêm nội dung cho trang web.
2. CSS: Định dạng thiết kế, bố cục, phong cách, căn lề của trang web.
3. JavaScript: Cải thiện cách hoạt động của trang web.

JavaScript có thể học nhanh và dễ dàng áp dụng cho nhiều mục đích khác nhau, từ việc cải thiện tính năng của website đến việc chạy game và tạo phần mềm nền web.

Bên cạnh ưu điểm của Javascript, đây là một kiểu dữ liệu có một số sự lỏng lẻo. Hãy cùng tìm hiểu những điểm “chưa chắc chắn” để xóa tan hiểu nhầm khi làm việc với Javasrcipt nhé.

1. NaN – Not a Number

NaN hay not a number. Nghe thì có vẻ đây không phải là 1 số thì dĩ nhiên kiểu dữ liệu của nó sẽ không là number? Tuy nhiên khi mở trình duyệt và thực hiện console.log (type of NaN) thì lại nhận được output là number.

Thực tế thì NaN là 1 giá trị đặc biệt trong kiểu Number cùng với (Infinity, -Infinity) nữa. NaN sẽ được trả về khi thực hiện một phép tính có kết quả là giá trị số không xác định chẳng hạn:

• Chia 0 cho 0 (Chia một số khác 0 cho không thì ra Infinity)
• Chia Infinity cho Infinity
• Có một toán hạng trong phép tính là NaN
• Convert từ string sang số một giá trị không phải là số.

Ngoài ra NaN cũng không có thứ tự tức là NaN không thể nhỏ hơn, bằng hay lớn hơn bất kỳ thứ gì.

 NaN > 1 ==> false
    NaN == NaN ==> false
    
    // check NaN 
    isNaN(NaN) ==> true
Code language: JavaScript (javascript)

2. Out put của 99999999999999999999 (20 chữ số)

Bạn hy vong output của số trên sẽ bằng bao nhiêu?

 > a = 99999999999999999999
 < 100000000000000000000

Lý giải cho việc này là bởi Javascript chỉ có duy nhất kiểu dữ liệu Number đại diện cho số. Và nó được triển khai dưới dạng số dấu phẩy động chính xác kép của IEEE 754. Điều đó có nghĩa là sẽ không có kiểu dữ liệu số nguyên Integer thực sự trong Javascript. Đây cũng không phải vấn đề quá lớn trong trường hợp bạn muốn làm việc chỉ với số nguyên lớn trong Javascript bạn có thể sử dụng kiểu dữ liệu BigInt.

3. Math.max() và Math.min()

Thư viện Math là thư viện được sử dụng khá nhiều trong Javascript. Tuy nhiên có 1 lưu ý nhỏ đối với 2 hàm này đó là trong trường hợp bạn không truyền tham số cho nó thì nó sẽ trả về các giá trị mặc định như sau:

 > Math.max()
 < -Infinity
 > Math.min()
 < Infinity
Code language: JavaScript (javascript)

4. 0.1 + 0.2 = 0.3

 > 0.1 + 0.2 == 0.3
 < false
Code language: JavaScript (javascript)

Lỗi này không chỉ xảy ra với riêng Javascript.

Bạn còn nhớ về số thập phân vô hạn và hữu hạn chứ. Ở hệ thập phân (hệ cơ số 10 mà con người tiếp xúc tốt nhất) nó chỉ có thể biểu thị các phân số sử dụng hệ số nguyên tố của 10 (Các thừa số nguyên tố của 10 là 2 và 5). Vì vậy, 1/2 (0.5), 1/4 (0.25), 1/5, 1/8 và 1/10 đều có thể được biểu thị rõ ràng vì tất cả các mẫu số đều sử dụng các thừa số nguyên tố là 10. Ngược lại, 1/3 (0.33333333….), 1/6 (0.1666666…) và 1/7 đều là các số thập phân vô hạn vì mẫu số của chúng sử dụng hệ số nguyên tố là 3 hoặc 7.

Bạn có thể thắc mắc 0.1 và 0.2 có thể biểu thị rõ ràng là số thập phân hữu hạn mà? Tuy nhiên vấn đề ở chỗ máy tính sử dụng cơ số 2 thay vì cơ số 10 giống như con người mà ở đó thừa số nguyên tố duy nhất của 2 là chính nó vậy nên các phân số 1/2, 1/4, 1/8 sẽ được biểu thị rõ ràng trong máy tính tuy nhiên các số 1/5 (0.1) và 1/10 (0.2) tuy được biểu diễn rõ ràng ở hệ cơ số 10 nhưng máy tính hoạt động ở hệ cơ số 2 sẽ biểu thị không thể chính xác được.

5. Javascript thường tự động convert ngầm các kiểu dữ liệu trong các biểu thức

JavaScript là ngôn ngữ có kiểu dữ liệu lỏng lẻo và hầu hết các các biểu thức thường tự động chuyển đổi ngầm (Implicit Conversion) một giá trị thành đúng loại phù hợp để nó có thể thực hiện được. Tuy nhiên cũng có trường hợp kết quả của biểu thức là điều ta không mong muốn. Vậy nên hãy chú ý tới Implicit Conversion trong Javascript

Các Implicit Conversion thường gặp trong Javascript khi biểu thức đó là convert về string (toString) hoặc number(toNumber). Dưới đây là một số case bạn có thể hay bắt gặp đó là

• [] + []
  Do mảng không phải là kiểu dữ liệu nguyên thủy (primitive) nên hàm toString sẽ được gọi và kết quả của mảng rỗng sẽ là ký tự rỗng. Do đó kết quả của phép cộng 2 mảng rỗng là phép cộng 2 ký tự string rỗng ==> ký tự rỗng> [] + [] < "" > [33,5.5,5] + [] < "33,5.5,5"​
• [] + {}
  Cái này cũng giống phần trên tuy nhiền hàm toString của {} sẽ trả về ‘[object Object]’ > [] + {} < "[object Object]" > [33,5.5,5] + {} < "33,5.5,5[object Object]"
• “1” + 0 Phép cộng ở đây cũng là phép nối chuỗi. Do vậy Javascript ưu tiên xử lý string và convert số 0 về dạng String > "1" + 0 < "10"
• “10” – “0” Phép trừ không có ý nghĩa trong Xâu do vậy Javascript convert cả ký tự “10” và “0” về dạng số > "10" - "0" < 10

Kết luận

Hi vọng các bạn đã nắm rõ được 5 hiểu lầm thường gặp trong Javascript. Với các bạn mới bắt đầu hoặc chưa biết về Javascript, có rất nhiều khóa học và các bài tập thực hành code cho các bạn ngay tại đây: JavaScript

Chúc các bạn thành công.

Nguồn: codelearn.io