Unexpected reserved word, 발생 이유와 해결법

자바스크립트 코드를 실행하다가 SyntaxError: Unexpected reserved word라는 메시지가 나타나면 어떤 단어가 문제라는 것인지 헷갈릴 수 있습니다. await, yield, import처럼 평소 자바스크립트에서 정상적으로 사용하는 키워드에서도 비슷한 오류를 만날 수 있는데요.

Unexpected reserved word는 쉽게 말해 자바스크립트가 특별한 의미로 사용하는 단어를 현재 위치나 실행 환경에서 올바르지 않게 사용했다는 뜻입니다.

reserved word가 무엇인지부터 대표적인 발생 원인과 해결 순서까지 초보자도 이해하기 쉽게 알아보겠습니다.

Unexpected reserved word 뜻은?

reserved word는 우리말로 '예약어'라고 합니다. 자바스크립트 문법에서 이미 특별한 용도로 사용하기로 정해진 단어라고 생각하면 쉽습니다.

예를 들어 if, return, class, const처럼 각각 문법적인 역할이 있는 키워드가 있습니다. 이런 단어를 허용되지 않는 위치에서 사용하거나 특정 실행 환경의 규칙과 맞지 않게 사용하면 SyntaxError가 발생할 수 있습니다.

// 잘못된 예
const class = "JavaScript";
// class는 자바스크립트에서
// 특별한 의미를 가진 키워드

따라서 이 오류가 발생했다면 에러 메시지에 나온 단어만 지우기보다 “이 키워드를 현재 위치에서 사용할 수 있는가?”를 먼저 확인하는 것이 중요합니다.

Unexpected reserved word 원인, await부터 확인

1. await를 사용할 수 없는 위치에 작성한 경우
실무에서 먼저 확인해볼 만한 원인입니다. await는 비동기 작업의 결과를 기다릴 때 사용하는 키워드이며, 함수 내부에서 사용하려면 일반적으로 해당 함수를 async 함수로 만들어야 합니다.

// 잘못된 예
function getData() {
  const response = await fetch("/api/data");
}
// 올바른 예
async function getData() {
  const response = await fetch("/api/data");
}

최상위 await는 ES Module 환경에서는 사용할 수 있지만 일반적인 classic script와는 규칙이 다릅니다. 따라서 await 관련 오류가 발생했다면 async 누락뿐 아니라 현재 코드가 모듈로 실행되는지도 함께 확인하세요.

reserved word 오류가 발생하는 주요 원인

2. 예약어를 변수 이름으로 사용한 경우
자바스크립트가 문법적으로 사용하는 키워드를 변수명으로 작성하면 코드를 정상적으로 분석하지 못할 수 있습니다. 문제가 되는 이름은 의미가 비슷한 일반적인 이름으로 변경하는 것이 좋습니다.

// 잘못된 예
let class = "초급";
// 변경 예
let className = "초급";

3. yield를 잘못된 위치에서 사용한 경우
yield는 generator function과 관련된 특별한 키워드입니다. 일반 함수에서 generator 문법처럼 사용하면 현재 문맥과 맞지 않아 SyntaxError가 발생할 수 있습니다.

function* makeNumbers() {
  yield 1;
  yield 2;
}

4. import 또는 export를 잘못된 환경에서 사용한 경우
import와 export는 ES Module 문법입니다. 일반 스크립트로 실행하는 파일에서 모듈 문법을 사용하면 환경에 따라 SyntaxError가 나타날 수 있습니다.

브라우저에서 ES Module을 직접 사용하는 경우라면 다음처럼 type="module"을 지정할 수 있습니다.

<script type="module" src="app.js"></script>

예약어가 아닌데 오류가 표시되는 이유는?

5. 바로 앞의 문법이 깨져 있는 경우
에러 메시지에 특정 키워드가 표시됐다고 해서 반드시 그 단어 자체가 원인이라고 단정할 수는 없습니다. 앞쪽의 괄호나 따옴표 등이 잘못되어 자바스크립트가 이후 키워드를 예상하지 못한 위치에서 발견했을 수도 있습니다.

6. 실행 환경이 해당 문법을 지원하지 않는 경우
최신 자바스크립트 문법을 오래된 브라우저나 호환되지 않는 런타임에서 실행하면 문법을 제대로 해석하지 못할 수 있습니다. 사용 중인 브라우저와 Node.js 등의 버전 및 문법 지원 여부를 확인해 보세요.

7. 객체 속성과 변수명을 혼동한 경우
일부 예약어는 객체의 속성 이름으로 사용할 수 있는 경우가 있습니다. 따라서 예약어가 보인다고 무조건 이름을 바꾸기보다 그것이 변수명인지, 객체의 속성명인지 문맥을 확인해야 합니다.

const course = {
  class: "JavaScript"
};
console.log(course.class);

8. 복사한 예제의 실행 조건이 다른 경우
인터넷에서 가져온 코드는 ES Module이나 특정 프레임워크, 최신 Node.js 등을 전제로 작성됐을 수 있습니다. 코드만 그대로 복사하지 말고 예제가 어떤 환경을 기준으로 작성됐는지도 확인하는 것이 좋습니다.

Unexpected reserved word 해결 순서 6단계

먼저 콘솔에서 어떤 파일의 몇 번째 줄에서 오류가 발생했는지 확인합니다. 그리고 해당 위치에 있는 await, yield, import 등의 키워드를 살펴보세요.

다음으로 키워드 자체뿐 아니라 앞쪽 코드까지 확인해야 합니다. 이전 줄에서 괄호나 중괄호를 잘못 닫아 실행 문맥이 달라진 것은 아닌지도 함께 살펴보면 좋습니다.

순서	확인할 내용
1단계	에러가 발생한 파일과 줄 번호 확인
2단계	어떤 예약어에서 오류가 발생했는지 확인
3단계	예약어가 현재 위치에서 허용되는지 확인
4단계	앞쪽 괄호·따옴표 등 문법 구조 확인
5단계	브라우저·Node.js·모듈 실행 환경 확인
6단계	코드 수정 후 저장하고 다시 실행

자주 사용하는 자바스크립트 키워드

자바스크립트에는 let, const, function, class, if, else, for, while, switch, return, try, catch, throw, new, this, import, export, async, await 등 문법적으로 특별한 의미를 갖는 다양한 키워드가 있습니다.

다만 모든 단어에 동일한 제한이 적용되는 것은 아닙니다. strict mode인지, module인지, generator인지 등 문맥에 따라 사용할 수 있는 위치가 달라질 수 있기 때문입니다. 따라서 단순한 예약어 목록을 외우기보다는 오류가 발생한 코드의 문맥을 확인하는 것이 더 중요합니다.

Unexpected reserved word 예방 방법

변수와 함수에는 className, returnValue, userData처럼 역할이 명확한 이름을 사용해 예약어와 충돌할 가능성을 줄여보세요. VS Code와 ESLint 같은 도구를 활용하면 문법적으로 잘못된 키워드 사용을 개발 과정에서 발견하는 데도 도움이 됩니다.

또한 await나 import처럼 실행 환경의 영향을 받는 문법을 사용할 때는 현재 파일이 일반 스크립트인지 ES Module인지 확인하는 습관이 중요합니다.

Unexpected reserved word는 자바스크립트가 특별한 의미로 사용하는 키워드를 현재 문맥에서 예상하지 못했다는 의미로 이해하면 쉽습니다. 오류가 발생했다면 예약어를 무조건 삭제하기보다 해당 키워드가 지금 위치에서 올바르게 사용됐는지부터 확인하세요.

await라면 async 함수 또는 모듈 환경을 확인하고, import와 export라면 ES Module 설정을 살펴보는 것이 좋습니다. 여기에 앞줄의 문법과 실행 환경까지 차례대로 점검하면 원인을 훨씬 빠르게 찾을 수 있습니다.

도전 바이브코딩

Unexpected reserved word, 발생 이유와 해결법