[트러블슈팅] (TypeError: Cannot read properties of null (reading '...')) 에러 해결하기

(진행배경) 프로그래머스 0단계 '배열의 평균값' 문제를 하다가 `Cannot read properties of null` 에러를 마주했다.

해당 에러는 자바스크립트 코드를 작성할때마다 종종 겪던 문제인데, 이번 기회에 정리해 두고자 한다.

- 프로그래머스 문제 링크: https://school.programmers.co.kr/learn/courses/30/lessons/120817

 

[문제 상황 - TypeError: Cannot read properties of null (reading '...') 에러]

(문제상황)

function solution(numbers) {
  var sum = 0;
  var avrg = 0;
  for (var i = 0; i < numbers.length; i++) {
    sum += numbers[i];
    var avrg = sum / numbers.lenth;
  }
  return avrg;
}

 

해결 코드를 위와 같이 입력하자 전술한 type 에러가 튀어나왔다. 하지만 도무지 코드에 문제가 없어보이는데 어떤 부분에서 문제가 발생했는지 파악이 어려웠다.

 

(문제원인) 허무하게도 `var avrg = sum / numbers.lenth` 에서 `length` 메소드를 `lenth` 로 오타를 내서 발생한 것 때문이었다. 오타라는 간단한 문제였음에도 에러 코드를 해석하지 못해 원인을 파악할 수 없었던 것이다. 

 

변수에 오타가 있을 경우, 해당 변수는 선언되지 않았기 때문에 undefined로 간주될 수 있다. 하지만 오류 메시지가 정확히 (TypeError: Cannot read properties of null (reading '...'))로 나타날지, (TypeError: Cannot read properties of undefined (reading '...'))로 나타날지는 상황에 따라 다를 수 있다. 아래는 이에 대한 각각의 예시이다.

 

 

#case1 (null case) 

let someObject = null;
console.log(someObject.someProperty);
TypeError: Cannot read properties of null (reading 'someProperty')

`someProperty`라는 메소드를 읽지 못하고  있다. 선언만하고 값을 대입하지 않아(오타 등으로 인해) 오류가 발생하는 것이다.

마찬가지로 프로그래머스 예제에서도 오타로 인해 결과적으로 `null` 값이 된다.  

 

#case2 (undefined case)

let typoVariable;
console.log(typoVariable.someProperty);
TypeError: Cannot read properties of undefined (reading 'someProperty')

선언만 하고 값을 넣지 않았기 때문에 undefined 오류가 나타난다.

 

(해결방법) 오타를 수정하니 코드가 정상 작동하였다.

 

(배운점) 자주 발생하던 문제에 대한 원인을 알게되어 트러블슈팅 시간을 줄이는 계기가 되었다. 

앞으로도 해당 오류가 발생하면 null 과 defined에 case에 따라 해당 변수에 오타는 없는지, 값이 대입되었는지를 파악하면 되겠다.