자바스크립트 JSON 활용 stringify와 parse 정리

프론트엔드 개발을 하다 보면 서버와 데이터를 주고받을 때 JSON(JavaScript Object Notation) 형식을 자주 사용합니다.
자바스크립트는 JSON을 기본적으로 지원하며, JSON.stringify()와 JSON.parse() 메서드를 통해 데이터를 직렬화하거나 역직렬화할 수 있습니다.
이번 글에서는 자바스크립트에서 JSON을 다루는 핵심 방법을 정리해 보겠습니다.

1. JSON이란 무엇인가

JSON은 데이터를 키-값 쌍으로 표현하는 경량 데이터 포맷입니다.
자바스크립트 객체 문법을 기반으로 하지만, 다양한 언어에서 지원합니다.
문자열 기반이므로 네트워크 전송이나 데이터 저장에 적합합니다.

예시:

{
  "name": "홍길동",
  "age": 30,
  "isAdmin": false
}

2. JSON.stringify() 사용법

JSON.stringify()는 자바스크립트 객체를 JSON 문자열로 변환합니다.

let obj = { name: "홍길동", age: 30 };
let jsonStr = JSON.stringify(obj);

console.log(jsonStr); // {"name":"홍길동","age":30}
console.log(typeof jsonStr); // string

옵션 인자를 활용하면 출력 형식을 제어할 수도 있습니다.

console.log(JSON.stringify(obj, null, 2)); 
/*
{
  "name": "홍길동",
  "age": 30
}
*/

3. JSON.parse() 사용법

JSON.parse()는 JSON 문자열을 자바스크립트 객체로 변환합니다.

let jsonStr = '{"name":"홍길동","age":30}';
let obj = JSON.parse(jsonStr);

console.log(obj.name); // 홍길동
console.log(typeof obj); // object

👉 서버에서 받아온 데이터를 실제 객체처럼 다룰 수 있게 됩니다.

4. stringify와 parse 활용 예제

(1) 로컬스토리지 저장 및 불러오기

let user = { id: 1, name: "홍길동" };

// 저장 시 객체 → 문자열
localStorage.setItem("user", JSON.stringify(user));

// 불러오기 시 문자열 → 객체
let savedUser = JSON.parse(localStorage.getItem("user"));
console.log(savedUser.name); // 홍길동

(2) 네트워크 요청/응답 처리

fetch("/api/user")
  .then(res => res.json()) // JSON 문자열 → 객체
  .then(data => console.log(data));

5. 실무에서 JSON 다루기 주의사항

JSON.stringify()는 함수나 undefined 값을 직렬화하지 못합니다.

JSON.stringify({ a: undefined, b: () => {} }); // {}

**순환 참조(Circular Reference)**가 있는 객체는 직렬화 불가능합니다.

let obj = {};
obj.self = obj;
JSON.stringify(obj); // 오류 발생

JSON.parse() 시 에러: 잘못된 JSON 문자열을 파싱하면 예외가 발생하므로 try-catch로 감싸는 것이 안전합니다.

try {
  JSON.parse("{ name: '홍길동' }"); // 잘못된 JSON → 오류
} catch (e) {
  console.error("JSON 파싱 실패:", e.message);
}

✅ 마무리

자바스크립트에서 JSON을 다루는 핵심은 두 가지입니다.

객체 → 문자열 변환: JSON.stringify()
문자열 → 객체 변환: JSON.parse()

이를 적절히 활용하면 로컬스토리지 저장, 네트워크 통신, 데이터 직렬화 등 다양한 작업을 쉽게 처리할 수 있습니다.

기록기록