에러 읽는 법

오류 메시지는 알려 주려고 나옵니다

오류가 나면 놀라기 쉽지만, 그 메시지에는 무엇이·어디서 잘못됐는지가 거의 다 들어 있습니다. 읽는 법만 알면 고치는 시간이 크게 줄어듭니다.

메시지는 세 부분입니다.

• 종류 — TypeError 처럼 무엇이 잘못됐는지의 갈래
• 설명 — 어떤 값에 무엇을 하려다 실패했는지
• 자리 — 몇 번째 줄인지 (개발자 도구에서 봅니다 · 7.2)

가장 자주 만나는 셋

console.log("여기까지는 나옵니다");

console.log(없는이름);

ReferenceError 는 "그런 이름이 없다" 입니다. 철자를 틀렸거나, 선언하지 않았거나, 다른 스코프에 있는 것입니다(2.4).

오류가 나기 전까지의 출력은 남습니다. 어디까지 갔는지가 곧 어디서 멈췄는지입니다.

const user = null;

console.log(user.name);

TypeError 는 "그 값으로는 그 일을 할 수 없다" 입니다. 위 메시지는 이름이 아니라 값이 문제라고 말합니다 — user 는 있는데 그것이 null 인 것입니다.

const a = ;

SyntaxError 는 "읽을 수가 없다" 입니다. 앞의 둘과 크게 다른 점이 있습니다 — 한 줄도 실행되지 않습니다. 출력이 하나도 없다면 이것부터 의심하세요.

자주 나오는 TypeError

const value = 5;

value();

const count = 10;

count = 20;

같은 TypeError 여도 설명이 다릅니다. 종류보다 설명을 먼저 읽으세요.

끝없이 부르면

function countdown(n) {
	return countdown(n - 1);
}

countdown(3);

함수가 자기를 부르는데 멈추는 조건이 없습니다. if (n <= 0) return; 처럼 끝낼 자리를 두어야 합니다. 1.10 의 무한 루프와 같은 실수입니다.

메시지를 읽는 차례

1. 출력이 하나도 없나? — SyntaxError 입니다. 괄호·따옴표·쉼표를 봅니다.
2. 어디까지 출력됐나? — 그다음 줄이 문제입니다.
3. 설명에 나온 이름을 찾습니다. — 그 값이 무엇인지 console.log 로 찍어 봅니다.
4. 그 값이 왜 그렇게 됐는지 거슬러 올라갑니다.

메시지를 그대로 검색하는 것도 좋은 방법입니다. 다만 내 코드의 이름은 빼고 검색하세요 — Cannot read properties of null 까지만 적습니다.

브라우저마다 문구가 다릅니다

같은 잘못인데 브라우저가 다르게 적습니다. 위 예제들의 출력에 두 가지를 함께 적어 둔 것이 그 때문입니다. 크롬과 Edge 는 같은 엔진이라 문구가 같고, 파이어폭스는 다릅니다.

마지막 줄을 보세요. 오류의 이름부터 다릅니다 — RangeError 와 InternalError 입니다. InternalError 는 표준에 없고 파이어폭스만 내는 것입니다.

그래서 검색할 때 브라우저 이름을 함께 적으면 답을 빨리 찾습니다. 반대로 남이 적어 둔 해결 방법이 내 화면의 문구와 달라도, 오류의 종류가 같으면 같은 문제일 때가 많습니다.

처음에 자주 걸리는 것

try { 위험한코드(); } catch (e) { }   // 이렇게 하지 않습니다

직접 해보기

이 단원의 정리