JS 에러 3대장 완전 정리 — TypeError·ReferenceError·SyntaxError 한눈에

JS 에러 3대장 완전 정리 — TypeError·ReferenceError·SyntaxError 한눈에

자바스크립트 콘솔에 빨간 줄이 뜨면 당황하기 쉽다. 하지만 에러에는 이름이 붙어 있고, 그 이름이 원인의 큰 분류를 알려준다. TypeError, ReferenceError, SyntaxError. 이 세 가지가 실무에서 만나는 에러의 대부분을 차지해 흔히 3대장이라 불린다. 여기에 RangeError까지 더하면 거의 다 설명된다. 핵심은 이렇다. SyntaxError는 문법이 틀린 것, ReferenceError는 이름을 못 찾은 것, TypeError는 값의 타입이나 사용 방법이 잘못된 것이다. 이름만 봐도 어디를 봐야 할지 방향이 잡힌다. 이 글은 세 에러 유형의 차이, 자주 만나는 에러를 유형별로 묶은 표, 그리고 콘솔 에러를 읽는 법을 정리한다. 개별 에러의 상세 원인·해결은 각각 별도 글에서 더 깊이 다룬다.

JS 에러 3대장 완전 정리

 

이 글의 구성

 

🔎에러 이름이 원인을 알려준다

🗂3대장 + RangeError 한눈에

⚖️세 에러의 결정적 차이

📋자주 만나는 에러 유형별 표

💻콘솔 에러 읽는 법

💬자주 묻는 질문 5가지

---

🔎 에러 이름이 원인을 알려준다

자바스크립트 에러는 던져질 때 "이름"과 "메시지"를 함께 갖는다. Uncaught TypeError: x is not a function 같은 줄에서 TypeError가 이름, 뒤가 메시지다. 이 이름이 에러의 큰 갈래를 정한다. 이름만 봐도 "문법 문제인지, 이름 문제인지, 값 문제인지"가 갈리므로, 메시지를 자세히 읽기 전에 유형부터 파악하면 방향이 빨리 잡힌다.

 

세 유형을 한 줄로 요약하면 이렇다. SyntaxError는 코드를 읽어 들이는 단계에서 문법이 맞지 않는 것이고, ReferenceError는 코드를 실행하다 어떤 이름을 못 찾은 것이며, TypeError는 값을 그 타입에 맞지 않는 방식으로 다룬 것이다. 여기에 값이 허용 범위를 벗어난 RangeError를 더하면 대부분의 상황이 설명된다. 그래서 에러를 만나면 첫 단어(이름)부터 확인하는 습관이 도움이 된다.

핵심 — 이름부터 보고 방향을 잡는다

에러의 첫 단어가 유형이다. SyntaxError면 문법, ReferenceError면 이름(선언·초기화), TypeError면 값의 타입·사용, RangeError면 범위다. 이 한 가지만으로 "어디를 손봐야 하는가"가 크게 좁혀진다. 그다음 메시지와 위치를 읽으면 된다.

---

🗂 3대장 + RangeError 한눈에

네 가지 유형의 의미와 대표 사례를 정리하면 이렇다. 각 유형이 "어느 단계·무엇의 문제"인지 보면 외우기 쉽다.

유형	무엇의 문제	대표 사례
SyntaxError	문법(실행 전 파싱)	Unexpected token, JSON 파싱 실패
ReferenceError	이름(선언·초기화)	x is not defined, TDZ
TypeError	값의 타입·사용 방법	undefined 속성 접근, is not a function
RangeError	값이 허용 범위 벗어남	call stack 초과, 배열 길이 오류

소스 코드 자체의 문법이 틀린 SyntaxError는 코드가 아예 실행되지 않는다. 파서가 문법을 이해하지 못해 그 파일 전체가 안 돈다. 반면 ReferenceError·TypeError·RangeError는 실행 중에 나는 런타임 에러라, 문제의 줄에 닿기 전까지는 코드가 실행된다. 이 차이만 알아도 "코드가 한 줄도 안 도는가, 돌다 멈추는가"로 소스 문법 오류인지를 가늠할 수 있다. 다만 예외가 하나 있다. JSON.parse가 던지는 SyntaxError는 이름은 같아도 실행 중에 나는 런타임 에러라, try-catch로 잡을 수 있고 코드도 계속 돈다.

---

⚖️ 세 에러의 결정적 차이

3대장을 나란히 두면 무엇이 다른지 또렷하다. 각각이 "언제·무엇" 때문에 나는지가 갈린다.

유형	발생 시점	먼저 볼 곳
SyntaxError	실행 전(파싱)	괄호·따옴표·콤마 짝, JSON 원문
ReferenceError	실행 중	이름 철자·선언 위치·로드 순서
TypeError	실행 중	그 값의 타입(undefined·null·객체 등)

정리하면, SyntaxError는 "문법이 깨졌다"라 실행 전에 막히니 괄호·따옴표·콤마 짝부터 본다. ReferenceError는 "이름을 못 찾았다"라 철자·선언 위치·스크립트 로드 순서를 확인한다. TypeError는 "값을 잘못 다뤘다"라 그 값이 정말 기대한 타입인지(undefined는 아닌지, 함수가 맞는지)를 찍어 본다. 이름으로 방향을 잡고, 이 순서로 좁히면 대부분의 에러가 정리된다.

---

📋 자주 만나는 에러 유형별 표

실무에서 자주 만나는 에러를 유형별로 묶었다. 이름을 보고 유형을 알면 접근법이 정해진다.

유형	자주 만나는 메시지
SyntaxError	Unexpected token / Unexpected end of JSON input / Unexpected token < in JSON
ReferenceError	x is not defined / Cannot access 'x' before initialization
TypeError	Cannot read/set properties of undefined·null / is not a function / is not iterable / Cannot convert undefined or null to object / Assignment to constant variable
RangeError	Maximum call stack size exceeded / Invalid array length

표에서 보듯 TypeError가 가장 종류가 많다. 값의 타입·사용과 얽힌 문제가 그만큼 흔하기 때문이다. 각 메시지의 구체적인 원인과 해결은 메시지마다 사정이 달라, 개별 글에서 더 자세히 다룬다. 여기서는 "이 메시지가 어느 유형인가"만 잡으면 충분하다. 유형을 알면 앞의 표에서 어디를 먼저 볼지가 정해진다.

---

💻 콘솔 에러 읽는 법

에러를 만나면 코드를 노려보기 전에 콘솔 메시지를 차근히 읽는 게 빠르다. 읽을 요소는 세 가지다.

콘솔 에러의 3요소

01이름 — 첫 단어(TypeError 등)로 유형·방향을 잡는다.

02메시지 — 무엇이 문제인지 구체적으로(어떤 속성·이름·토큰).

03스택 추적 — 파일:줄:열로 발생 위치와 호출 경로를 알려줌.

메시지 안에는 단서가 많다. "reading 'name'"이면 어떤 속성을 읽으려다 막혔는지, "x is not defined"면 어떤 이름을 못 찾았는지 알려준다. 그리고 스택 추적의 맨 위 줄이 대개 에러가 난 지점이다. 그 파일:줄:열을 클릭하면 해당 코드로 바로 이동한다. 다만 SyntaxError는 표시된 위치가 "이상을 감지한 곳"이라, 진짜 실수는 그 한두 줄 위에 있을 때가 많다는 점만 기억하면 된다.

# 콘솔 에러 한 줄의 구조
Uncaught TypeError: Cannot read properties of undefined (reading 'name')
#         └유형    └────────── 메시지 (무엇이 문제) ──────────┘
    at loadUser (app.js:42:18)   # ← 스택: 파일:줄:열

---

💬 자주 묻는 질문 5가지

Q1에러 이름만으로 원인을 알 수 있나요?

큰 방향은 잡힙니다. SyntaxError면 문법, ReferenceError면 이름(선언·초기화), TypeError면 값의 타입·사용, RangeError면 범위입니다. 이름으로 유형을 정하고, 그다음 메시지와 스택 추적으로 구체 위치를 좁히면 대부분 해결됩니다.

Q2코드가 한 줄도 안 돌아요.

SyntaxError일 가능성이 큽니다. 문법 오류는 실행 전 파싱 단계에서 막혀 그 파일 전체가 실행되지 않습니다. 런타임 에러(TypeError 등)는 문제 줄까지는 실행되죠. 그래서 "아예 안 도는가"로 SyntaxError 여부를 가늠할 수 있습니다.

Q3TypeError와 ReferenceError는 뭐가 다른가요?

ReferenceError는 이름 자체를 못 찾은 것(선언 안 됨·초기화 전), TypeError는 이름은 있고 값도 있는데 그 값을 타입에 안 맞게 다룬 것입니다. x is not defined는 ReferenceError, x.foo is not a function은 TypeError죠. 전자는 선언·로드를, 후자는 값의 타입을 봅니다.

Q4스택 추적은 어떻게 보나요?

맨 위 줄이 에러가 난 지점이고, 아래로 갈수록 그 함수를 부른 호출 경로입니다. 각 줄의 파일:줄:열을 클릭하면 해당 코드로 이동하죠. 보통 맨 위(내 코드)부터 보면 되고, 라이브러리 내부 줄은 건너뛰어도 됩니다.

Q53대장 말고 다른 에러도 있나요?

있습니다. 값이 허용 범위를 벗어난 RangeError(무한 재귀·배열 길이)가 대표적이고, URIError·AggregateError처럼 드물게 만나는 것도 있습니다. 하지만 실무에서 마주치는 대부분은 SyntaxError·ReferenceError·TypeError·RangeError 넷 안에 들어옵니다.

---

📌 결론

자바스크립트 에러는 이름이 원인의 큰 분류를 알려준다. SyntaxError는 문법(실행 전 파싱), ReferenceError는 이름(선언·초기화), TypeError는 값의 타입·사용, RangeError는 범위다. 이름으로 방향을 잡고 메시지·스택 추적으로 좁히면, 낯선 에러도 침착하게 접근할 수 있다.

실무 원칙은 다음과 같다.

🏷 이름부터 본다. 첫 단어(유형)로 문법·이름·타입·범위 중 어디인지를 먼저 가른다. 이 한 가지가 방향을 정한다.

🔍 메시지·스택을 읽는다. 메시지의 속성·이름·토큰 단서와 스택 추적의 파일:줄:열로 발생 위치를 찾는다. SyntaxError는 표시 위치의 한두 줄 위도 함께 본다.

🧭 유형별로 접근한다. SyntaxError는 괄호·따옴표 짝, ReferenceError는 철자·선언·로드, TypeError는 값의 타입을 확인한다. 개별 메시지의 상세 해결은 각 코드별 글을 참고한다.

JS 에러 읽기 체크리스트

 

01첫 단어(유형)로 문법·이름·타입·범위 분류.

02코드가 아예 안 돌면 SyntaxError 의심.

03메시지의 속성·이름·토큰 단서 읽기.

04스택 추적 맨 위 줄(파일:줄:열)로 위치 이동.

05SyntaxError는 표시 위치의 한두 줄 위도 확인.

06유형별 접근(문법·이름·타입·범위) 후 개별 글 참고.

---

본 글은 자바스크립트 에러 유형(TypeError·ReferenceError·SyntaxError·RangeError)의 분류와 콘솔 읽는 법을 정리한 입문 자료다. 개별 에러의 상세 원인·해결은 각 에러별 글을 참고하면 된다.

 

#JavaScript #자바스크립트에러 #TypeError #ReferenceError #SyntaxError #RangeError #에러처리 #콘솔 #스택추적 #디버깅 #JS기초 #프론트엔드 #웹개발 #코딩초보 #에러읽는법