[javascript] 자바스크립트 "[object Object]" is not valid JSON (syntaxError 문법 에러 처리)

 

 

 

안녕하세요.

오늘은 자바스크립트에서 JSON.parse() 함수를 사용하다 보면 자주 마주하는 에러를 포스팅하려고 합니다.

에러 내용은 "[object Object]" is not valid JSON 입니다.

위의 에러 내용은 보통 JSON.parse() 함수를 사용하여 JSON 타입의 문자열 데이터를 다시 JSON 타입의 데이터로 parsing 하는데 이미 JSON 타입의 데이터인데 JSON.parse()를 사용하여 발생하게 되는 에러입니다. 에러 내용에서도 볼 수 있듯이 [object Object] 데이터는 JSON 타입의 데이터인데 강제로 JSON으로 만들어 달라고 해서 에러가 발생을 한 상태입니다.

위의 상황을 재현한 소스 코드를 작성하였습니다.

 

---

<script>
/**
 * window document load 실행
 */
window.addEventListener('DOMContentLoaded', () => {
    
    // JSON 형태의 데이터
    
    const dataObj = {"name"  : "test", "list"  : ["a", "b", "c", "d", "e"]};

    console.log(JSON.parse(dataObj));
});
</script>

위의 소스 코드를 보게 되면 dataObj는 이미 JSON 타입의 데이터입니다. 그런데 그 데이터에 한번 더 JSON.parse() 처리를 하면 위의 에러가 발생하게 되는 것이죠. 

 

그렇다면 위의 상황이 발생할 경우에는 어떻게 처리를 해야 할까요? 

 

1. try / catch 예외 처리

try {
    console.log(JSON.parse(dataObj));
} catch (err) {
    console.log(dataObj);
}

2. typeof 확인

if (typeof dataObj === 'string') {
    console.log(JSON.parse(dataObj));
} else {
    console.log(dataObj);
}

위의 두 가지 방법 말고도 다양한 방법이 있지만 위의 두가지 케이스로 간단하게 해결할 수 있습니다.

아니면 가공할 데이터를 받아오는 측에서 데이터 처리를 엄격하게 해주는 것도 방법입니다.

 

---

최종 정리

  1. try / catch 예외 처리

  2. typeof 확인

  3. 넘어오는 원천 데이터의 엄격한 데이터 처리

---

마무리

JSON.parse()를 사용하다 보면 이 밖에도 유사한 에러들이 종종 발생을 하곤 합니다. 개발 업무를 보면서 자주 마주하곤 하는데 정리를 안 하고 항상 원인을 잊고 찾아보게 됩니다... 에러가 발생하는 상황이 왔을 때 항상 글로 정리하고 복습하는 습관을 길러야겠습니다.. ㅎ

 

 

 

그럼 오늘도 저의 작고 소중한 글을 읽어주셔서 감사합니다.