TypeError: Cannot read property '속성이름' of undefined 원인, 예제, 해결방법

Cannot read property '속성이름' of undefined 코드 리뷰

 

안녕하세요. 오늘은 자바스크립트 개발 중 흔히 만날 수 있는 'TypeError: Cannot read property '속성이름' of undefined' 오류에 대해 다뤄보겠습니다. 이 오류는 객체의 속성에 접근하려 할 때 해당 객체가 'undefined'인 경우 발생하며, 여러분이 이 글을 통해 이 오류를 완벽히 이해하고 대처하는 방법을 배울 수 있기를 바랍니다!!!!

 

 

원인 분석

해당 오류는 객체가 정의되지 않았는데 그 속성에 접근하려 할 때 발생합니다. 예를 들어 다음과 같이 웹 애플리케이션에서 사용자 정보를 가져와서 프로필 페이지를 구성하는 경우를 생각해보겠습니다.

function getUserProfile(userId) {
  fetch(`/api/users/${userId}`)
    .then(response => response.json())
    .then(data => {
      const userName = data.profile.name; // 여기서 오류 발생 가능
      const userEmail = data.profile.email;
      // 프로필 정보를 화면에 표시
    })
    .catch(error => console.error(error));
}

getUserProfile(123);

위 코드에서 만약 서버 응답이 예상대로 오지 않고 'profile' 객체가 없는 경우에 'data.profile.name'라인에서 'TypeError: Cannot read property 'name' of undefined' 오류가 발생합니다.

 

 

해결 방안

이러한 오류를 방지하기 위해서는 코드에 안정성을 더해주는 것이 좋습니다.

예를 들어, Optional Chaining(`?. `)을 사용해 다음과 같이 코드를 수정하는 것이 좋습니다.

const userName = data.profile?.name;
const userEmail = data.profile?.email;

이렇게 하면 'profile'이 'undefined'거나 'null'인 경우에도 'undefined'를 반환하므로 TypeError가 발생하지 않습니다.

 

---

코드 리뷰 문의 주세요.

함수 리뷰를 기본으로 합니다.

생각 못한 다양한 예외 상황이나

이상 코드 피드백 드립니다.

 

 

오픈톡방 '익스랩 코드 리뷰 신청방'을 검색하세요!

간단한 리뷰는 무료입니다!

---