Trong quá trình phát triển phần mềm, chắc hẳn các bạn Dev đều không thể tránh khỏi những lỗi sai và thường xuyên phải đau đầu để fix bugs đúng không? Thế nhưng điều tồi tệ hơn là lần đầu bạn phát hiện ra những lỗi sai đó, bạn chẳng biết đấy là lỗi gì và cách fix chúng như thế nào. Thế nên theo mình, nếu bạn có thể nhận biết được những lỗi sai đó và biết cách fix lỗi thì sẽ tốt hơn rất nhiều. Vì vậy, qua bài viết này, mình sẽ tổng hợp lại giúp các bạn những lỗi sai mà các JavaScript Developer thường gặp khi sử dụng JavaScript cũng như các cách để bạn có thể fix lỗi. Mặc dù cách fix có thể khác nhau tùy vào từng framework mà các bạn đang dùng nhưng bạn sẽ có thể biết được tại sao lại có lỗi đó xảy ra và phòng tránh chúng ở những project sắp tới.
1. Uncaught TypeError: Cannot Read Property
Đây là một trong những lỗi JS phổ biến nhất hiện nay. Nó xảy ra khi bạn cố gắng truy cập một thuộc tính hoặc một phương thức trong một đối tượng không xác định. Hãy cùng tái hiện lại lỗi sai này nhé.
Cách fix: Gán một giá trị hợp lý cho đối tượng trong quá trình xây dựng hoặc khởi tạo – không để cho nó rỗng hoặc không xác định.
2. TypeError: ‘undefined’ is not an object
Đây là lỗi tương tự như trên. Nhưng lỗi ở trên là đầu ra (output) trên Chrome trong khi lỗi này là đầu ra trên Safari. Lỗi xảy ra khi bạn gọi một thuộc tính hoặc phương thức trên một đối tượng không xác định.
Cách fix: Gán một giá trị hợp lý cho đối tượng trong quá trình xây dựng hoặc khởi tạo – không để cho nó rỗng hoặc không xác định.
3. TypeError: ‘null’ is not an object
Lỗi xảy ra khi bạn gọi một thuộc tính hoặc phương thức trên một đối tượng ‘null’. Đây cũng là một lỗi, giống như ở trên, chỉ xảy ra trên Safari. Lỗi này cũng sẽ xảy ra khi bạn cố gắng tiếp cận những thành phần trong DOM.
Cách fix: Gán một giá trị hợp lý cho đối tượng trong quá trình xây dựng hoặc khởi tạo – không để cho nó rỗng hoặc không xác định.
Bạn nên lưu ý rằng ‘undefined’ và ‘null’ là hai điều hoàn toàn khác nhau trong JavaScript. Undefined có nghĩa là không xác định. Trong Javascript, khi bạn khai báo một biến nhưng chưa gán giá trị cho nó, giá trị của biến đó sẽ là undefined. Ví dụ:
Null có nghĩa là giá trị rỗng hoặc giá trị không tồn tại, nó có thể được sử dụng để gán cho một biến như là một đại diện không có giá trị.
4. TypeError: Object Doesn’t Support Property
Đây là một lỗi xảy ra trên IE khi bạn gọi một phương thức không xác định.
Lỗi này cũng tương tự như lỗi TypeError: ‘undefined’ trong Chrome.
Bạn nên hiểu rằng các trình duyệt khác nhau sẽ có các lỗi khác nhau cho cùng một vấn đề logic.
Cách fix: Đây là một vấn đề phổ biến đối với IE trong các ứng dụng web sử dụng tính năng tạo namespace JavaScript. Trong trường hợp này, vấn đề là 99.9% thời gian là do IE không có khả năng ràng buộc các phương thức trong namespace hiện tại với từ khóa this . Ví dụ, nếu bạn có JS namespace tên Rollbar với phương thức isAwesome. Thông thường, nếu bạn đang ở trong namespace tên Rollbar bạn có thể gọi phương thức isAwesome với cú pháp sau:
Chrome, Firefox và Opera sẽ vui vẻ chấp nhận cú pháp này. IE thì lại không. Do đó, để an toàn nhất khi sử dụng tính năng đặt tên JS là luôn luôn tiền tố với tên namespace thực tế.
5. TypeError: ‘this.show’ Is Not a Function
Lỗi này xảy ra khi bạn gọi một hàm không xác định. Thông báo lỗi này có thể được thấy trong Chrome và Firefox.
Cách fix:
Nhìn chung bạn sẽ có 3 cách để fix lỗi này.
- Cách truyền thống.
Đây là một giải pháp phù hợp với trình duyệt cũ. Chúng ta chỉ cần lưu tham chiếu ‘this’ vào một biến.
- Phương pháp mới sử dụng bind.
Đây là một cách tiếp cận hiện đại hơn, sử dụng phương thức bind để có được tham chiếu tương ứng.
- Phương pháp mới sử dụng arrow functions.
Đây cũng là một cách tiếp cận mới. Nó sử dụng arrow functions ES6.
6. Uncaught RangeError.
Lỗi này xảy ra trên Chrome chủ yếu do hai trường hợp.
- Trường hợp 1: Hàm đệ quy của bạn không chấm dứt.
- Trường hợp 2: Bạn lấy một giá trị nằm ngoài phạm vi của một hàm.
Nhiều hàm chỉ chấp nhận các giá trị trong một phạm vi cụ thể làm giá trị đầu vào của chúng. Ví dụ, Number.toExponential(digits) và Number.toFixed(digits) chấp nhận giá trị từ 0 tới 100, còn Number.toPrecision(digits) chấp nhận giá trị từ 1 tới 100.
Cách fix: Bạn nên ưu tiên kiểm tra phạm vi đầu vào hợp lệ.
Ví dụ:
Number.toFixed(digits) 0 to 20
Number.toPrecision(digits) 1 to 21
Number.toExponential(digits) 0 to 20
Null is not 0
Trong bài viết này, mình đã liệt kê những lỗi JavaScript cơ bản bạn thường gặp cũng như cách phòng tránh lỗi. Có thể với mỗi lỗi thì các Dev cũng sẽ có những cách fix khác nhau nhưng thông qua bài viết này, các bạn sẽ có được cái nhìn tổng quát hơn về các lỗi JS, tại sao những lỗi này lại xuất hiện cũng như cách fix nếu gặp phải những lỗi này.