Unexpected identifier 어디가 왜 문제일까?

자바스크립트 코드를 실행했는데 SyntaxError: Unexpected identifier가 나타나면 어떤 부분을 고쳐야 하는지 바로 이해하기 어려울 수 있습니다.

만약 identifier라는 단어 자체가 낯설다면 에러 메시지만 보고 원인을 찾기가 더 어렵죠.

하지만 Unexpected identifier는 뜻을 풀어보면 생각보다 단순합니다.

자바스크립트가 코드를 읽다가 “여기서는 이런 이름이 나오면 안 되는데?”라고 판단했다는 의미인데요. identifier가 무엇인지부터 자주 발생하는 원인과 해결 순서까지 하나씩 알아보겠습니다.

Unexpected identifier 뜻, identifier가 뭘까?

identifier(식별자)는 변수, 함수, 클래스 등에 붙이는 이름을 말합니다. 예를 들어 아래 코드에서 userName과 getUser가 식별자입니다.

const userName = "민수";
function getUser() {
  return userName;
}

Unexpected identifier는 자바스크립트 엔진이 문법을 해석하다가 현재 위치에서 예상하지 않았던 식별자를 발견했다는 의미입니다. 따라서 에러에 표시된 이름 자체보다 그 이름의 앞뒤 문법이 잘못된 경우도 많습니다.

Unexpected identifier 원인, 앞줄부터 확인하세요

1. 문자열 따옴표를 빠뜨린 경우
초보자가 특히 자주 하는 실수입니다. 문자열에는 따옴표가 필요한데 이를 생략하면 자바스크립트가 해당 단어를 변수나 다른 식별자로 해석하려고 합니다.

// 잘못된 예
const name = 홍길동;
// 올바른 예
const name = "홍길동";

2. 두 문장 사이의 문법이 잘못된 경우
앞쪽 표현식이 제대로 끝나지 않은 상태에서 다음 식별자가 등장하면 Unexpected identifier가 나타날 수 있습니다. 이 때문에 에러가 표시된 단어만 수정해서는 해결되지 않는 경우가 있습니다.

3. 객체 속성 사이 쉼표를 빠뜨린 경우
객체에 여러 속성을 작성할 때는 각 속성을 쉼표로 구분해야 합니다. 쉼표가 없으면 다음 속성 이름이 예상하지 못한 식별자로 해석될 수 있습니다.

// 잘못된 예
const user = {
  name: "민수"
  age: 20
};
// 올바른 예
const user = {
  name: "민수",
  age: 20
};

4. 예약어를 잘못 사용한 경우
let, const, class, return 등 자바스크립트 문법에서 특별한 의미를 갖는 단어는 아무 위치에서나 일반적인 이름처럼 사용할 수 없습니다. 변수나 함수 이름을 정할 때도 예약어 사용 여부를 확인하는 것이 좋습니다.

Unexpected identifier가 나는 다른 이유 4가지

5. 함수 문법을 잘못 작성한 경우
함수 선언에서 괄호나 중괄호가 빠졌거나 화살표 함수 문법이 잘못되면 뒤에 나오는 이름에서 오류가 발견될 수 있습니다. 에러가 함수명에 표시되더라도 함수 선언 전체를 확인하세요.

6. import/export 문법이 잘못된 경우
import는 다른 파일에서 내보낸 기능을 가져오고, export는 현재 파일의 기능을 다른 파일에서 사용할 수 있도록 내보내는 문법입니다. 중괄호나 from 등을 빠뜨리면 모듈 문법을 제대로 해석하지 못할 수 있습니다.

// named export
export function getData() {
  return "data";
}
// named import
import { getData } from "./utils.js";

쉽게 기억하면 export = 보내기, import = 가져오기입니다. 에러가 발생했다면 보내는 방식과 가져오는 방식이 맞는지, 파일 경로는 정확한지도 함께 확인해 보세요.

7. JSX를 일반 자바스크립트로 실행한 경우
React에서 사용하는 JSX는 HTML처럼 보이지만 별도의 변환 과정이 필요한 문법입니다. JSX를 처리할 수 없는 환경에서 그대로 실행하면 SyntaxError가 나타날 수 있습니다.

8. 복사한 코드에 잘못된 문자가 포함된 경우
웹페이지나 문서에서 코드를 복사하면서 스마트 따옴표 같은 특수문자가 들어가는 경우도 있습니다. 문법상 이상이 없어 보인다면 문제가 의심되는 따옴표나 기호를 직접 다시 입력해 보세요.

Unexpected identifier 해결 순서 6단계

이 오류를 만났을 때 가장 먼저 해야 할 일은 콘솔에 표시된 파일과 줄 번호를 확인하는 것입니다. 다만 표시된 식별자가 반드시 실제 원인은 아니라는 점을 기억해야 합니다.

자바스크립트가 앞의 문법 오류 때문에 다음 단어를 예상하지 못한 경우가 많기 때문입니다. 따라서 해당 줄뿐 아니라 바로 위의 2~3줄까지 함께 확인하는 것이 훨씬 효과적입니다.

순서	확인할 내용
1단계	에러 메시지의 파일과 줄 번호 확인
2단계	에러 줄 바로 위 코드까지 확인
3단계	따옴표와 괄호가 제대로 닫혔는지 확인
4단계	객체·배열의 쉼표 누락 확인
5단계	예약어와 함수·import 문법 확인
6단계	코드를 저장하고 다시 실행

Unexpected identifier와 is not defined 차이는?

두 오류는 비슷해 보이지만 발생하는 시점이 다릅니다. Unexpected identifier는 주로 코드를 실행하기 전 문법을 해석하는 과정에서 발생하는 SyntaxError입니다.

반면 xxx is not defined는 코드 문법 자체는 해석할 수 있지만 실행 과정에서 해당 식별자를 찾지 못할 때 나타나는 ReferenceError입니다.

// ReferenceError 예시
console.log(userName);
// userName이 선언되어 있지 않음

따라서 Unexpected identifier가 보인다면 변수의 값부터 찾기보다 문법 구조를 먼저 확인하는 편이 좋습니다. 따옴표, 쉼표, 괄호와 앞줄의 코드부터 살펴보세요.

SyntaxError를 예방하는 쉬운 방법

VS Code 같은 코드 편집기를 사용하면 문법 오류가 의심되는 부분에 밑줄이나 색상으로 표시되는 경우가 많습니다. 에러가 발생한 뒤 콘솔만 확인하지 말고 에디터의 경고 표시도 함께 살펴보세요.

Prettier로 코드 형식을 일정하게 정리하고 ESLint 같은 정적 분석 도구를 활용하는 것도 도움이 됩니다. 무엇보다 코드를 너무 길게 작성한 뒤 한꺼번에 실행하기보다 작은 단위로 저장하고 테스트하면 오류가 생긴 범위를 훨씬 빠르게 찾을 수 있습니다.

Unexpected identifier는 쉽게 말해 자바스크립트가 “지금 이 위치에서 이 이름이 나오는 건 문법적으로 이상하다”고 알려주는 오류입니다. 에러에 표시된 단어가 범인이라고 단정하지 말고 바로 앞의 따옴표, 쉼표, 괄호, 예약어와 문법 구조를 먼저 확인해 보세요.

이전에 살펴본 Unexpected token이나 Unexpected end of input과 마찬가지로 주변 코드를 함께 보는 습관이 중요합니다. 에러 위치에서 한두 줄씩 거꾸로 확인하면 코딩 초보자도 충분히 원인을 찾을 수 있습니다.

도전 바이브코딩

Unexpected identifier 어디가 왜 문제일까?