Video học lập trình mỗi ngày

Error là một phần cốt lõi của việc học và sử dụng bất kỳ ngôn ngữ lập trình nào . Đây là top 10 error khi lập trình được thống kê và fix nhiều nhất. Thông báo của một error giúp bạn hiểu điều gì đã sai ở đâu đó trong code của chúng ta. Mặc dù một số thông báo lỗi rất đơn giản và dễ hiểu, nhưng một số thông báo có thể hơi khó hiểu khi bạn nhìn thấy chúng.

Uncaught TypeError: Cannot read property

Uncaught TypeError: Cannot read property là một lỗi phổ biến trong lập trình và xảy ra khi bạn cố gắng truy cập một thuộc tính của một đối tượng hoặc biến undefined hoặc null. Đây là một ví dụ về lỗi xảy ra như sau:

Xem thêm: Xóa giá trị Null hoặc Undefined từ một Object trong Javascript

const tipsJS = {};
console.log(tipsJS.anonystick); // Uncaught TypeError: Cannot read property 'anonystick' of undefined

Trong ví dụ này, chúng tôi đang cố gắng truy cập thuộc tính anonystick của đối tượng tipsJS, nhưng vì tipsJS là một đối tượng {} và không có thuộc tính anonystick được xác định, nên chúng ta nhận được lỗi Uncaught TypeError: Cannot read property 'anonystick' of undefined. Đơn giản là như vậy.

Fix: Uncaught TypeError: Cannot read property

Để khắc phục lỗi này, chúng tôi cần đảm bảo rằng đối tượng hoặc biến mà chúng tôi đang cố truy cập có thuộc tính mà chúng tôi đang tìm kiếm. Một cách để làm điều này là sử dụng phương thức hasOwnProperty để kiểm tra xem thuộc tính có tồn tại hay không trước khi thử truy cập, có thể thực hiện như sau:

const tipsJS = {anonystick: 'hello'};
if (tipsJS.hasOwnProperty('anonystick')) {
  console.log(tipsJS.anonystick);
} else {
  console.log('anonystick does not exist on tipsJS');
}

Trong ví dụ này, chúng tôi kiểm tra xem thuộc tính anonystick có tồn tại trên tipsJS hay không trước khi thử truy cập thuộc tính đó. Nếu nó tồn tại, chúng tôi ghi giá trị của nó vào consoleLog. Nếu nó không tồn tại, chúng tôi ghi lại một thông báo nói rằng nó không tồn tại.

Một cách khác để khắc phục lỗi này là sử dụng optional chaining (?.) được giới thiệu trong ECMAScript 2020 để truy cập thuộc tính. Toán tử này cho phép bạn truy cập các thuộc tính lồng nhau của một đối tượng một cách an toàn mà không gây ra lỗi nếu bất kỳ thuộc tính nào trong chuỗi không được xác định hoặc null:

Trong ví dụ này, chúng tôi đang sử dụng chuỗi tùy chọn để truy cập thuộc tính nestedProperty của thuộc tính anonystick của tipsJS. Nếu bất kỳ thuộc tính nào trong số này là không xác định hoặc null, thì biểu thức sẽ trả về không xác định thay vì đưa ra lỗi.

const tipsJS = {};
console.log(tipsJS.anonystick?.nestedProperty); // undefined

Hy vọng giúp ích được anh chị và tôi sẽ tiếp tục viết 9 error còn lại.