Blog

도입

JavaScript 개발 중 가장 자주 마주치는 에러 중 하나인 ‘SyntaxError: Unexpected token’은 코드의 문법적 오류로 인해 발생합니다. 이 에러는 JavaScript 엔진이 예상하지 못한 문자나 기호를 만났을 때 발생하며, 초보 개발자부터 숙련된 개발자까지 누구나 경험할 수 있는 흔한 문제입니다.

에러 설명

SyntaxError: Unexpected token은 JavaScript 파서가 코드를 분석하는 과정에서 예상되지 않은 토큰(문자, 기호, 키워드 등)을 발견했을 때 발생하는 구문 오류입니다. 이 에러는 컴파일 타임에 발생하므로 코드가 실행되기 전에 감지됩니다. 토큰은 JavaScript 엔진이 코드를 이해하기 위해 분석하는 최소 단위로, 변수명, 연산자, 괄호, 세미콜론 등이 모두 토큰에 해당합니다. 에러 메시지에는 보통 어떤 토큰이 예상되지 않았는지에 대한 정보가 포함되어 있습니다.

주요 원인 3가지

1. 괄호, 중괄호, 대괄호의 불일치
가장 흔한 원인으로, 여는 괄호와 닫는 괄호의 개수가 맞지 않거나 잘못된 위치에 배치된 경우입니다. 특히 중첩된 함수나 객체에서 자주 발생합니다.

2. 따옴표나 백틱의 미스매치
문자열을 정의할 때 사용하는 작은따옴표(‘), 큰따옴표(“), 백틱(`)이 제대로 닫히지 않았거나 서로 다른 종류의 따옴표로 시작과 끝을 마무리한 경우 발생합니다.

3. 예약어의 잘못된 사용
JavaScript의 예약어(const, let, function, if 등)를 변수명으로 사용하거나, 잘못된 위치에 배치했을 때 발생합니다. 또한 strict mode에서만 예약어인 키워드들을 일반 모드에서 사용할 때도 문제가 될 수 있습니다.

해결법 5가지

1. 괄호 매칭 확인
코드 에디터의 괄호 매칭 기능을 활용하여 모든 괄호가 올바르게 닫혔는지 확인합니다.

// 잘못된 예
if (condition {
  console.log('error');
}

// 올바른 예
if (condition) {
  console.log('success');
}

2. 따옴표 정리
문자열의 시작과 끝에 동일한 종류의 따옴표를 사용하고, 문자열 내부에 같은 종류의 따옴표가 있다면 이스케이프 처리합니다.

// 잘못된 예
const message = "Hello world';

// 올바른 예
const message = "Hello world";
const escaped = "He said \"Hello\"";

3. 세미콜론 추가
문장의 끝에 세미콜론을 명시적으로 추가하여 JavaScript 엔진의 자동 세미콜론 삽입(ASI) 문제를 방지합니다.

// 문제가 될 수 있는 예
const a = 1
const b = 2

// 안전한 예
const a = 1;
const b = 2;

4. 문법 검사 도구 사용
ESLint, JSHint 같은 린터를 사용하여 실시간으로 문법 오류를 감지하고 수정합니다.

5. 코드 포맷터 활용
Prettier 같은 코드 포맷터를 사용하여 일관된 코드 스타일을 유지하고 문법 오류를 예방합니다.

예방법

SyntaxError를 예방하기 위해서는 일관된 코딩 스타일을 유지하고, 코드 에디터의 문법 하이라이팅과 자동 완성 기능을 적극 활용해야 합니다. 정기적으로 린터를 실행하여 잠재적인 문법 오류를 미리 감지하고, 복잡한 코드를 작성할 때는 단계별로 나누어 테스트하는 습관을 기르는 것이 중요합니다. 또한 팀 프로젝트에서는 코드 리뷰를 통해 서로의 실수를 점검하는 것도 효과적인 예방법입니다.