TypeError가 날 때 간단한 debugger 활용 방법 [자바스크립트]

debugger 활용법을 한 가지 배워서 기억하려고 간단하게 기록.

 

원래 console.log()를 이용해서 코드가 잘못된 부분을 주로 찾았는데 피상적으로 예측만 할 수 있어서 대안으로 debugger를 더 많이 사용하려고 노력 중이다.

 

debugger를 새로 배운 뒤에는 주로 함수 시작 부분에 debugger를 넣은 뒤 코드를 돌려보는 방식으로 활용했다. 그런데 코드에 에러가 있을 땐 에러코드로 튀어 버려서 문제를 찾기 어려울 때도 많았다.

 

가령 함수들로 이뤄진 배열을 다룰 때 array[0]으로 첫 번째 함수에 접근하려 하는데 자꾸 array[0] is not a function이라는 에러가 뜸. array[0]은 분명 함수인 것 같은데..

 

이럴 때 array[0]를 건드리기 직전에

if (typeof array[0] !== 'function) debugger;

이런 코드를 넣어주면 문제가 발생하는 지점에서 코드가 딱 멈춘다.

그리고 개발자 도구에서 array[0] 위에 마우스를 올리면 array[0] 값이 무엇인지 알 수 있다.

 

나는 배열이 비었을 때 문제가 생기고 있었다. 요소가 없으니 함수가 없다고 에러를 떴던 것이다.