JSON.stringify() vs JSON.parse() 완벽 이해하기 (입문자 친절 가이드)

프로그래밍을 배우다 보면 반드시 만나게 되는 개념이 있습니다. 바로 JSON인데요. 특히 자바스크립트를 사용할 때 JSON.stringify() 와 JSON.parse() 를 언제, 왜 써야 하는지 헷갈려 하는 분들이 정말 많습니다. 이번 글에서는 입문자도 쉽게 이해할 수 있도록 두 메서드의 차이, 활용법, 그리고 실제 개발에서 유용하게 쓰는 방법까지 정리해 드리겠습니다.

---

JSON이란 무엇일까?

먼저 JSON부터 간단히 짚고 넘어가겠습니다.
JSON은 JavaScript Object Notation의 줄임말로, 데이터를 표현하는 하나의 형식입니다.

쉽게 말해, 우리가 흔히 쓰는 객체(Object)나 배열(Array)을 문자열(String)로 바꿔서 저장하거나 전송하기 좋은 포맷이 JSON입니다.

예를 들어 이런 자바스크립트 객체가 있다고 해봅시다.

const user = {
  name: "철수",
  age: 30,
  job: "개발자"
};

이 데이터를 그대로 서버에 보내려고 하면 문제가 생깁니다. 서버는 자바스크립트 객체 자체를 이해하지 못하기 때문이죠. 그래서 이 객체를 문자열로 바꿔야 하고, 그때 사용하는 것이 JSON.stringify() 입니다.

---

JSON.stringify() – 객체를 문자열로 변환

정의

JSON.stringify()는 자바스크립트 객체 → JSON 문자열로 변환하는 메서드입니다.

예시

 

const user = { name: "철수", age: 25 };
const jsonData = JSON.stringify(user);

console.log(jsonData);
// 출력: {"name":"철수","age":25}

보시는 것처럼 원래는 객체였던 데이터가 큰따옴표("")가 포함된 문자열 형태로 바뀌었습니다. 이렇게 변환해야 서버나 데이터베이스에 안전하게 보관하거나 다른 언어에서도 읽을 수 있게 됩니다.

---

JSON.parse() – 문자열을 다시 객체로 변환

정의

JSON.parse()는 JSON 문자열 → 자바스크립트 객체로 변환하는 메서드입니다.

예시

 

const jsonData = '{"name":"철수","age":25}';
const user = JSON.parse(jsonData);

console.log(user.name); // 철수
console.log(user.age);  // 25

여기서 중요한 포인트는, JSON.parse()의 입력값은 반드시 문자열이어야 한다는 점입니다. 객체를 바로 넣으면 에러가 발생합니다.

---

stringify와 parse를 함께 사용하는 경우

실제 개발에서는 이 두 메서드를 세트로 자주 사용합니다. 예를 들어 브라우저의 로컬스토리지(localStorage) 에 데이터를 저장할 때가 대표적인 사례입니다.

로컬스토리지는 기본적으로 문자열만 저장할 수 있습니다. 그래서 객체를 저장하려면 JSON.stringify()로 변환해야 하고, 다시 불러올 때는 JSON.parse()로 되돌려야 합니다.

const settings = { darkMode: true, language: "ko" };

// 저장할 때
localStorage.setItem("settings", JSON.stringify(settings));

// 불러올 때
const saved = JSON.parse(localStorage.getItem("settings"));
console.log(saved.darkMode); // true

만약 stringify를 하지 않고 그냥 객체를 넣으려고 하면 [object Object] 같은 이상한 값이 들어가 버립니다. 입문자분들이 흔히 실수하는 부분이니 꼭 기억하세요.

---

자주 하는 실수와 주의할 점

1. 문자열인지 객체인지 헷갈릴 때
   • "{"name":"철수"}" 는 문자열입니다.
   • { name: "철수" } 는 객체입니다.
     parse는 문자열을 객체로, stringify는 객체를 문자열로 변환한다는 점을 항상 기억하세요.
2. 순환 참조 에러
   객체 안에 자기 자신을 참조하는 값이 들어가 있으면 JSON.stringify()에서 에러가 납니다.
   예:
    
    
3. 데이터 손실 가능성
   JSON은 함수나 undefined, Symbol 같은 특별한 값을 표현하지 못합니다. stringify 과정에서 이런 값들은 사라지니 주의해야 합니다.

const obj = {};
obj.self = obj;
JSON.stringify(obj); // 에러 발생

---

정리: 언제 무엇을 써야 할까?

• JSON.stringify() → 객체를 문자열로 바꿔야 할 때 (서버 전송, 저장)
• JSON.parse() → 문자열을 다시 객체로 바꿔서 활용할 때 (데이터 읽기, 로직 실행)

즉, 저장·전송할 땐 stringify, 불러와서 쓸 땐 parse 라고 외우면 딱 맞습니다.