Hướng dẫn fix lỗi Uncaught TypeError: Cannot read property … of undefined trong Javascript

Hiện tượng

• Kịch bản Javascript không hoạt động hoặc bị ngắt quãng giữa chừng
• Javascript Console của trình duyệt hiển thị các error log kiểu như:
  • Uncaught TypeError: Cannot read property ‘data’ of undefined
  • Uncaught TypeError: Cannot read property ‘width’ of undefined
  • Uncaught TypeError: Cannot read property ‘location’ of undefined
  • Uncaught TypeError: Cannot read property ‘blah.blah.blah…’ of undefined

Giải thích ý nghĩa lỗi

Không thể đọc được property blah.blah.blah… của một đối tượng mang dữ liệu chưa xác định (undefined).

Nguyên nhân

Một trong các câu lệnh Javascript Statement được trình duyệt web xử lý đang cố truy cập vào property của một đối tượng dữ liệu chưa xác định.

Một số bạn chưa quen với các thuật ngữ trong Javascript có thể sẽ cảm thấy khó hiểu khi đọc dòng nguyên nhân trên, nên mình sẽ giải thích thêm như sau:

Thứ nhất, property là nhánh của một đối tượng có kiểu dữ liệu Object. Ví dụ:

var user_1 = {name: "Nam", email: ''[email protected]", order_count: 12};
// Biến user_1 chứa dữ liệu thuộc kiểu Object, trong đó name, email, order_count là các property
console.log(user_1.name);
// Javascript cho phép bạn truy cập vào property name của biến user_1 bằng cú pháp như trên

Thứ hai, đối tượng mang dữ liệu chưa xác định (undefined) là những đối tượng mà bạn chưa gán dữ liệu, hoặc chưa có mặt trong kịch bản Javascript. Để kiểm tra đối tượng đó có phải là undefined hay không, ta sử dụng typeof.

Ví dụ:

var user_1 = {name: "Nam", email: ''[email protected]", order_count: 12};
var user_2;
console.log(typeof user_1); // Kết quả là object
console.log(typeof user_1.name); // Kết quả là string
console.log(typeof user_1.name.something); // Kết quả là undefined <----
console.log(typeof user_2); // Kết quả là undefined <----

Thứ ba, nếu bạn truy cập vào property của một đối tượng dữ liệu undefined, ta sẽ nhận được Error log trong Javascript Console của trình duyệt tương tự như mục hiện tượng mà mình đã liệt kê bên trên.

Ví dụ:

var user_1 = {name: "Nam", email: ''[email protected]", order_count: 12};
var user_2;
console.log(typeof user_2.name); // Error log: Uncaught TypeError: Cannot read property 'name' of undefined
console.log(typeof user_1.name.something.prop1); // Error log: Uncaught TypeError: Cannot read property 'prop1' of undefined

Đến đây chắc hẳn các bạn đã hiểu được nguyên nhân rồi đúng không nào? Vậy, làm cách nào để xử lý trường hợp này?

Cách khắc phục (fix)

Bước 1: Tìm đối tượng “undefined”

Bạn hãy kiểm tra lại Statement mà trình duyệt đang báo lỗi (click vào đường link ở phía bên phải của Error Log trên Javascript Console) để xem thử đối tượng “undefined” mà trình duyệt đang muốn truy cập là gì?

Ví dụ nếu vị trí lỗi nằm ở statement:

console.log(typeof user_2.name); // Mình lấy lại ví dụ của mục trên, đối tượng undefined ở đây chính là user_2

Bước 2: Xử lý tuỳ tình huống

Do đây là một lỗi vô cùng phổ biến trong Javascript, xuất hiện trong rất nhiều tình huống từ đơn giản đến phức tạp. Do đó sẽ không đưa ra hướng dẫn theo từng bước. Thay vào đó, mình sẽ đưa ra các gợi ý để các bạn có thể nắm được phương hướng debug cho riêng bạn.

Hướng 1: Gán dữ liệu cho đối tượng “undefined”

Trong các tình huống đơn giản, nguyên nhân sâu xa đến từ việc coder quên gán dữ liệu cho biến hoặc hằng trước khi đem ra sử dụng nó. Chính vì thế, bạn chỉ việc bổ sung thêm câu lệnh gán dữ liệu cho biến hoặc hằng đó là xong.

Hướng 2: Xoá hoặc thay thế câu lệnh truy cập vào đối tượng “undefined”

Nếu trong kịch bản Javascript của bạn, việc truy cập vào đối tượng undefined đó là không cần thiết, bạn có thể xoá hoặc thay thế bằng một câu lệnh khác phù hợp hơn.

Hướng 3: Kiểm tra lại các thư viện javascript (jQuery, Bootstrap, OwlCarousel, fancyBox…)

Nếu câu lệnh truy cập vào đối tượng undefined nằm ở file js chứa thư viện code (Ví dụ: jQuery, Bootstrap, OwlCarousel, fancyBox…), hãy kiểm tra lại xem url của chúng có còn hoạt động, cú pháp và thứ tự nhúng vào trang HTML.