[JS] JSON.parse()와 JSON.stringify() 사용법

JSON parse와 stringify는 JavaScript에서 데이터를 처리할 때 매우 중요한 두 가지 함수다.

JSON parse는 JSON 문자열을 JavaScript 객체로 변환하는 데 사용되고, JSON stringify는 JavaScript 객체를 JSON 문자열로 변환하는 데 사용된다.

직렬화랑 역직렬화가 뭔지도 모르고 일단 시작한 JSON은 쉽지 않은 험난한 길이었다..

JSON 'parse'와 'stringify' 란?

JSON(JavaScript Object Notation)은 데이터를 저장하고 전송하는 데 널리 사용되는 포맷이다. 이건 사실 별로 중요하지 않은 이야기이긴 한데 개념은 적어야 될 것 같으니까..?

JSON에서 중요한 함수 'parse'와 'stringify' 이 두개만 알아도 사실 별 문제는 없다. 다른건 다 어차피 구글에서 찾을거기 때문에..

• parse : JSON 문자열을 javaScript 객체로 변환한다. 예를 들어, 서버에서 받은 JSON 형식의 데이터를 JavaScript에서 사용하려면 먼저 'parse'를 통해 객체로 변환해야 한다.
• stringify : JavaScript 객체를 JSON 문자로 변환한다. 예를 들어, 데이터를 서버로 전송하기 위해 객체를 JSON 형식으로 변환해야 할 때 유용하다.

JSON.parse() 사용법

let jsonData = '{"name": "John", "age": 30}';
let obj = JSON.parse(jsonData);
console.log(obj.name);

출력 결과는 John이고 jsonData는 JSON 형식의 문자열이며, JSON.parse를 통해 자바스크립트 객체로 변환되었다.

좀 더 응용을 해보자면..?

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    let obj = JSON.parse(data);
    console.log(obj);
  });

서버로부터 JSON 데이터를 받아 자바스크립트 객체로 변환해 사용하는 것이다.

JSON.stringify() 사용법

let obj = { name: "John", age: 30 };
let jsonData = JSON.stringify(obj);
console.log(jsonData);

출력 결과는 {"name":"John","age":30} 이고, obj는 자바스크립트 객체이며, JSON.stringify를 통해 JSON 문자열로 변환되었다.

JSON 데이터 변환 시 주의할 점

JSON 데이터를 처리할 때 가장 흔히 발생하는 오류는 JSON 형식이 올바르지 않을 때이다. 예를 들어, 문자열에 불필요한 쉼표나 누락된 괄호가 있다면 JSON.parse()는 오류를 발생시킨다.
이를 방지하기 위해 try catch 블록을 사용해 오류를 처리한다.

try {
  let obj = JSON.parse('{"name": "John", "age": 30,}');
} catch (error) {
  console.error("JSON 파싱 오류:", error);
}

JSON.parse()와 JSON.stringify()는 자바스크립트 할 때 중요한 것 같으므로 잘 이해하고 넘어간다면 나중에 유용하게 써먹기 좋을 것 같다.