JavaScript 개발 과정에서 다양한 런타임 오류와 예외 상황이 발생할 수 있다. 이러한 오류는 애플리케이션의 안정성과 사용자 경험에 직접적인 영향을 미치므로, 정확히 이해하고 적절히 처리하는 것이 중요하다. 다음은 자주 발생하는 JavaScript 오류 유형과 그에 대한 대응 방안이다.

1. 런타임 문법 및 참조 오류

SyntaxError는 코드 구문이 잘못되었을 때 발생한다. 변수명이 숫자로 시작하거나, 예약어에 값을 할당하거나, 괄호가 닫히지 않은 경우 등이 해당된다.

// 잘못된 변수 이름
var 1name; // SyntaxError: Invalid or unexpected token

// 예약어에 값 할당
let = 10; // SyntaxError: Unexpected token '='

// 불완전한 제어문
if (true) {
  console.log("start");
else {
  console.log("end");
} // SyntaxError: Unexpected token 'else'

ReferenceError는 선언되지 않은 변수를 참조하거나, 할당이 불가능한 식에 값을 할당하려 할 때 발생한다.

console.log(notDefined); // ReferenceError: notDefined is not defined

"hello" = 5; // ReferenceError: Invalid left-hand side in assignment

2. 범위 및 타입 관련 오류

RangeError는 값이 허용 범위를 벗어났을 때 발생한다. 예를 들어 배열 길이를 음수로 설정하거나, toFixed() 메서드에 유효하지 않은 소수점 자릿수를 전달하는 경우다.

const arr = [];
arr.length = -1; // RangeError: Invalid array length

(12.34).toFixed(-1); // RangeError: toFixed() digits argument must be between 0 and 20

TypeError는 객체나 함수가 기대한 타입이 아닐 때 발생한다. 존재하지 않는 메서드 호출, 원시 값에 new 연산자 사용 등이 대표적이다.

"text"(); // TypeError: "text" is not a function

const obj = {};
obj.nonExistentMethod(); // TypeError: obj.nonExistentMethod is not a function

new 123; // TypeError: 123 is not a constructor

3. URI 및 비동기 오류

URIError는 decodeURI() 또는 decodeURIComponent()에 잘못된 형식의 문자열을 전달할 때 발생한다.

decodeURI("%"); // URIError: URI malformed

또한, Promise가 reject되었으나 처리 핸들러가 없을 경우 unhandledrejection 이벤트가 발생하며, 이는 명시적인 오류 로그 없이 조용히 실패할 수 있어 주의가 필요하다.

4. 크로스오리진 스크립트 오류 (Script Error)

외부 도메인(CDN 등)에서 로드된 스크립트에서 발생한 미처리 오류는 보안 정책상 브라우저가 상세 정보를 숨기고 "Script error."만 보고한다. 이를 해결하려면 외부 리소스에 CORS 헤더(Access-Control-Allow-Origin: *)를 설정하거나, 해당 자원을 자체 도메인으로 호스팅해야 한다.

5. 사용자 정의 오류 및 수동 예외

비즈니스 로직 내에서 명시적으로 오류를 발생시키기 위해 throw 문을 사용할 수 있다. 이는 라이브러리 개발 시 잘못된 사용을 방지하는 데 유용하지만, 실행 흐름을 중단시키므로 신중히 사용해야 한다.

throw new Error("필수 파라미터 누락");
throw new TypeError("입력값이 올바른 타입이 아님");
throw new RangeError("값이 허용 범위를 초과함");

이러한 오류는 일반적으로 console.error()로 기록되며, 스택 트레이스가 없어 정확한 위치 추적이 어렵다. 따라서 오류 메시지에 충분한 컨텍스트를 포함시키는 것이 좋다.

6. 메모리 누수

전역 변수 남용, 클로저 내부에서 외부 변수 참조 유지, 이벤트 리스너 해제 누락 등은 메모리 누수를 유발할 수 있다. 특히 SPA(Single Page Application) 환경에서는 컴포넌트 언마운트 시 이벤트 리스너나 타이머를 반드시 정리해야 한다.