JSON.parse SyntaxError 원인과 해결 방법 총정리

자바스크립트에서 JSON.parse()를 사용하다 보면 SyntaxError와 함께 Unexpected token, Unexpected end of JSON input 같은 메시지가 나타날 때가 있습니다.

코드 자체에는 별다른 문제가 없어 보이는데 오류가 발생한다면 무엇부터 확인해야 할지 막막할 수 있는데요.

JSON.parse SyntaxError는 대부분 변환하려는 문자열이 올바른 JSON 형식이 아닐 때 발생합니다.

JSON.parse가 무엇을 하는 함수인지부터 따옴표, 쉼표, 빈 응답, API 데이터 등 자주 문제가 되는 원인과 해결 방법까지 차근차근 알아보겠습니다.

JSON.parse란? 먼저 역할부터 이해하기

JSON.parse()는 JSON 형식으로 작성된 문자열을 자바스크립트 값이나 객체로 변환할 때 사용하는 메서드입니다. 서버에서 받은 JSON 문자열이나 저장된 데이터를 실제 코드에서 다룰 수 있는 형태로 바꿀 때 자주 사용합니다.

const jsonString = '{"name":"민수","age":20}';
const user = JSON.parse(jsonString);
console.log(user.name);
// 민수

여기서 중요한 점은 JSON.parse에 전달하는 문자열이 JSON 문법에 맞아야 한다는 것입니다. 문자열 안에 문법 오류가 하나라도 있으면 파싱 과정에서 SyntaxError가 발생할 수 있습니다.

JSON.parse SyntaxError 원인, 따옴표부터 확인

1. 작은따옴표로 JSON의 문자열을 작성한 경우
JSON에서는 속성 이름과 문자열 값에 큰따옴표 "를 사용해야 합니다. 자바스크립트 객체 작성법과 혼동하면서 자주 발생하는 실수입니다.

// 잘못된 JSON
const data = "{'name':'민수'}";
// 올바른 JSON
const data = '{"name":"민수"}';
JSON.parse(data);

2. 객체의 key에 큰따옴표가 없는 경우
자바스크립트 객체에서는 속성 이름의 따옴표를 생략할 수 있는 경우가 있지만 JSON은 규칙이 더 엄격합니다.

// 잘못된 JSON 문자열
'{name:"민수"}'
// 올바른 JSON 문자열
'{"name":"민수"}'

자바스크립트 객체와 JSON은 완전히 같은 문법이 아니다라는 점을 기억하는 것이 중요합니다.

JSON 마지막 쉼표 때문에 오류가 날 수 있어요

3. 마지막 항목 뒤에 쉼표가 들어간 경우
객체나 배열의 마지막 값 뒤에 불필요한 쉼표를 넣으면 유효하지 않은 JSON이 됩니다.

// 잘못된 JSON
{
  "name": "민수",
  "age": 20,
}
// 올바른 JSON
{
  "name": "민수",
  "age": 20
}

코드가 길어지면 마지막 쉼표를 발견하기 어려울 수 있습니다. JSON을 직접 작성했다면 객체와 배열의 마지막 항목을 먼저 확인해 보세요.

4. 따옴표·중괄호·대괄호가 닫히지 않은 경우
{ }, [ ], 문자열의 " " 중 하나라도 제대로 닫히지 않으면 JSON 전체를 정상적으로 분석할 수 없습니다.

Unexpected end of JSON input은 왜 발생할까?

JSON.parse()와 함께 자주 볼 수 있는 메시지가 Unexpected end of JSON input입니다. 쉽게 말하면 JSON 데이터를 읽고 있는데 필요한 내용이 끝나기 전에 입력이 종료됐다는 뜻입니다.

JSON.parse('{"name":"민수"');
// 닫는 }가 없음

빈 문자열을 파싱하려고 할 때도 문제가 발생합니다.

JSON.parse("");

API를 사용하는 코드라면 서버가 실제로 빈 응답을 반환했는데 무조건 JSON으로 변환하려고 한 것은 아닌지 확인해 보세요.

JSON.parse에 undefined를 넣은 경우

JSON.parse()에 전달되는 값이 항상 JSON 문자열이라고 생각하기 쉽지만 실제 실행 과정에서는 undefined나 예상하지 못한 값이 들어올 수도 있습니다.

const data = undefined;
JSON.parse(data);

이런 경우에는 JSON 문법만 계속 수정해도 문제가 해결되지 않습니다. 파싱 직전에 실제 값이 무엇인지 출력해보는 것이 가장 빠른 확인 방법입니다.

console.log(data);
console.log(typeof data);

JSON.parse 오류를 만났다면 함수 자체를 의심하기보다 JSON.parse 안으로 들어오는 원본 데이터를 먼저 확인해 보세요.

API에서 JSON.parse 오류가 발생한다면?

API 요청에서 SyntaxError가 발생한다면 서버가 JSON이 아닌 다른 데이터를 반환했을 가능성도 있습니다. 대표적인 것이 404 오류 페이지나 로그인 페이지 같은 HTML 응답입니다.

예를 들어 JSON을 예상했지만 응답이 다음과 같이 시작한다면 JSON.parse로 처리할 수 없습니다.

<!DOCTYPE html>
<html>
  ...
</html>

이런 상황에서는 앞서 살펴본 Unexpected token '<' 오류가 나타날 수도 있습니다. 브라우저 개발자 도구의 Network 탭에서 실제 Response와 HTTP 상태 코드, Content-Type을 확인하면 원인을 찾는 데 도움이 됩니다.

JSON.parse SyntaxError 해결 순서 7단계

JSON 오류가 발생했을 때는 무작정 문자열을 수정하기보다 실제로 어떤 값이 들어오는지 확인하는 것부터 시작하세요. 특히 API 데이터라면 예상한 응답과 실제 응답이 다를 수 있습니다.

순서	확인할 내용
1단계	JSON.parse에 전달되는 실제 값 출력
2단계	빈 문자열이나 undefined인지 확인
3단계	key와 문자열의 큰따옴표 확인
4단계	마지막 불필요한 쉼표 확인
5단계	{ }, [ ], 따옴표의 짝 확인
6단계	API라면 Response와 Content-Type 확인
7단계	JSON 유효성 검사 후 다시 실행

JSON.parse와 JSON.stringify 차이는?

두 메서드는 이름이 비슷해 처음 배울 때 자주 헷갈립니다. JSON.parse()는 JSON 문자열을 자바스크립트 값으로 바꾸는 것이고, JSON.stringify()는 반대로 자바스크립트 값을 JSON 문자열로 변환할 때 사용합니다.

const user = {
  name: "민수",
  age: 20
};
// 객체 → JSON 문자열
const json = JSON.stringify(user);
// JSON 문자열 → 객체
const result = JSON.parse(json);

간단하게 stringify = 문자열로 만들기, parse = 문자열을 읽어 값으로 바꾸기라고 기억하면 구분하기 쉽습니다.

JSON.parse를 안전하게 사용하는 방법

외부에서 들어오는 데이터는 항상 정상적인 JSON이라고 장담하기 어렵습니다. 따라서 오류가 발생할 가능성이 있는 데이터라면 try...catch를 활용해 예외를 처리할 수 있습니다.

try {
  const data = JSON.parse(jsonString);
  console.log(data);
} catch (error) {
  console.error("JSON 변환 실패:", error.message);
}

다만 try...catch를 추가하는 것만으로 잘못된 JSON이 정상 데이터로 바뀌는 것은 아닙니다. 오류를 숨기기보다 어떤 데이터가 들어왔는지 기록하고 원인을 찾아 수정하는 것이 중요합니다.

JSON.parse SyntaxError는 대부분 “JSON.parse가 읽으려는 문자열이 올바른 JSON이 아니다”라는 신호입니다. 큰따옴표, 마지막 쉼표, 닫히지 않은 괄호와 문자열을 먼저 확인하고 빈 값이나 undefined가 전달되지 않았는지도 살펴보세요.

API를 사용하고 있다면 JSON 문법만 볼 것이 아니라 서버의 실제 응답까지 확인해야 합니다.

원본 데이터 확인 → JSON 문법 확인 → 서버 응답 확인 순서만 기억해도 대부분의 JSON.parse 오류를 훨씬 빠르게 해결할 수 있습니다.

도전 바이브코딩

JSON.parse SyntaxError 원인과 해결 방법 총정리