JSON.stringify vs JSON.parse 제대로 이해하기

자바스크립트에서 데이터를 다룰 때 JSON.stringify와 JSON.parse는 매우 자주 사용되는 메서드입니다. 하지만 이 두 메서드의 역할, 특징, 주의사항을 정확히 이해하고 사용하는 것은 생각보다 중요합니다. 이 글에서는 개념부터 심화 사용법까지 완벽하게 정리해드립니다.

---

✅ JSON.stringify — 자바스크립트 객체를 JSON 문자열로 변환

📌 기본 개념

**객체(Object)**나 **배열(Array)**을 **문자열(String)**로 변환합니다.

📌 기본 사용 예시

const obj = { name: "Alice", age: 25 };
const jsonStr = JSON.stringify(obj);
console.log(jsonStr); // "{"name":"Alice","age":25}"

• 네트워크 전송이나 로컬 저장소(localStorage)에 저장할 때 필수적입니다.

📌 두 번째, 세 번째 매개변수 활용

// 특정 속성만 선택적으로 변환
const jsonStr = JSON.stringify(obj, ["name"]);
console.log(jsonStr); // "{"name":"Alice"}"

// 포맷팅 (가독성 좋게 들여쓰기)
const prettyJson = JSON.stringify(obj, null, 2);
console.log(prettyJson);

---

✅ JSON.parse — JSON 문자열을 자바스크립트 객체로 변환

📌 기본 개념

JSON 문자열(String)을 객체(Object)로 복구합니다.

📌 기본 사용 예시

const jsonStr = '{"name":"Alice","age":25}';
const obj = JSON.parse(jsonStr);
console.log(obj.name); // "Alice"

• 서버로부터 응답받은 JSON 데이터를 객체로 변환할 때 사용됩니다.

📌 두 번째 매개변수: reviver 함수

const jsonStr = '{"birth":"1995-12-17T03:24:00"}';
const obj = JSON.parse(jsonStr, (key, value) => {
  if (key === "birth") {
    return new Date(value);
  }
  return value;
});

console.log(obj.birth.getFullYear()); // 1995

• reviver를 사용하면 변환 시 추가 가공이 가능합니다.

---

🧠 JSON.stringify와 JSON.parse 함께 사용하는 예제

📌 깊은 복사 (Deep Copy) 구현

const original = { a: 1, b: { c: 2 } };
const copied = JSON.parse(JSON.stringify(original));

console.log(copied); // { a: 1, b: { c: 2 } }
console.log(copied.b === original.b); // false

• 단, 함수, undefined, Symbol은 복사되지 않습니다.

---

⚠️ 주의사항

📌 JSON.stringify 제한사항

• 함수(function), undefined, Symbol 타입은 직렬화되지 않음
• 순환 참조가 있는 객체는 오류 발생

const obj = {};
obj.self = obj;

JSON.stringify(obj); // TypeError: Converting circular structure to JSON

📌 JSON.parse 주의사항

• 반드시 JSON 형식이 올바른 문자열이어야 함
• 작은 따옴표(')가 아닌 큰 따옴표(") 사용해야 함

JSON.parse('{ name: "Alice" }'); // 오류 발생 (key는 반드시 "로 감싸야 함)

---

✅ 결론

• JSON.stringify는 객체 → 문자열 변환
• JSON.parse는 문자열 → 객체 복구
• 네트워크 통신, 저장소 사용, 데이터 복사 등에 없어서는 안 되는 핵심 기능입니다.

두 메서드의 작동 방식과 한계를 정확히 이해하면, 더 안전하고 효율적인 데이터 처리가 가능해집니다.