JavaScript JSON object method

자바스크립트와 데이터를 주고받는 네트워크 통신, 파일 저장 등에서 빼놓을 수 없는 표준 데이터 포맷이 바로 JSON(JavaScript Object Notation)입니다.

자바스크립트의 내장 JSON 객체는 이 데이터를 처리하기 위해 딱 2가지 핵심 메소드를 제공합니다.

하나는 자바스크립트 객체를 문자열로 바꾸는 것이고, 다른 하나는 그 반대로 바꾸는 것입니다.

1. JSON.stringify() : 객체를 문자열로 변환 (직렬화)

자바스크립트의 객체나 배열을 JSON 형태의 문자열로 변환할 때 사용합니다.

• 언제 쓰나요?: 브라우저에서 서버로 데이터를 보낼 때, 혹은 로컬 스토리지(localStorage)에 데이터를 저장할 때 문자열 형태로 변환해야 하므로 반드시 이 메소드를 거쳐야 합니다.

const user = {
  name: "Kim",
  age: 26,
  skills: ["HTML", "CSS", "JS"]
};

// 자바스크립트 객체를 JSON 문자열로 변환
const jsonString = JSON.stringify(user);

console.log(typeof jsonString); // "string"
console.log(jsonString); 
// 출력 결과: '{"name":"Kim","age":26,"skills":["HTML","CSS","JS"]}'

💡 꿀팁: 가독성 좋게 줄 바꿈하여 출력하기

JSON.stringify()의 세 번째 인자로 공백 수(보통 2 또는 4)를 주면, 한 줄로 보기 힘들었던 JSON 데이터가 예쁘게 들여쓰기된 문자열로 변환됩니다.

const prettyJson = JSON.stringify(user, null, 2);
console.log(prettyJson);
/*
{
  "name": "Kim",
  "age": 26,
  "skills": [
    "HTML",
    "CSS",
    "JS"
  ]
}
*/

2. JSON.parse() : 문자열을 객체로 변환 (역직렬화)

서버로부터 받은 JSON 문자열을 자바스크립트가 읽을 수 있는 실제 객체나 배열로 변환할 때 사용합니다.

• 언제 쓰나요?: fetch API를 통해 서버에서 받아온 데이터나 localStorage.getItem()으로 꺼내온 문자열 데이터를 다시 데이터로서 접근하고 활용하고 싶을 때 사용합니다.

const dataFromServer = '{"name":"Lee","role":"developer"}';

// JSON 문자열을 실제 자바스크립트 객체로 변환
const userObj = JSON.parse(dataFromServer);

console.log(typeof userObj); // "object"
console.log(userObj.name);   // "Lee" (이제 마침표 연산자로 프로퍼티 접근 가능)

⚠️ JSON 객체 사용 시 주의할 점 및 예외 현상

JSON.stringify()는 모든 자바스크립트 데이터를 완벽하게 변환하지는 못합니다.

JSON 표준 규격에 맞지 않는 값들은 변환 과정에서 누락되거나 변형됩니다.

• 함수(Function) 및 undefined: 객체 내부의 메소드(함수)나 값이 undefined인 프로퍼티는 변환 과정에서 완전히 삭제됩니다.
• Date 객체: JSON.stringify()를 거치면 Date 객체는 ISO 문자열 포맷으로 강제 변환됩니다. 이를 다시 JSON.parse()로 되돌려도 자동으로 Date 객체로 부활하지 않고 그대로 문자열로 남습니다.

const specialObj = {
  action: () => console.log("hello"), // 함수
  data: undefined,                    // undefined
  now: new Date()                     // Date 객체
};

const result = JSON.stringify(specialObj);
console.log(result); 
// 출력 결과: '{"now":"2026-06-01T02:32:26.000Z"}' (함수와 undefined는 증발함)

📋 JSON 메소드 핵심 요약

메소드	역할	입력 타입	출력 타입	주요 용도
JSON.stringify()	객체를 JSON 문자열로 변환	Object / Array	String	서버로 데이터 전송, 로컬 스토리지 저장
JSON.parse()	JSON 문자열을 객체로 변환	String	Object / Array	서버 데이터 수신 후 데이터 가공 및 파싱

학습 정리

• 데이터를 보낼 때는 stringify(문자열화), 데이터를 받아서 쓸 때는 parse(분석) 규칙만 기억하면 흔히 발생하는 데이터 포맷 에러를 예방할 수 있습니다.
• 가끔 깊은 복사(Deep Copy)를 편하게 하기 위해 JSON.parse(JSON.stringify(obj)) 기법을 쓰기도 하지만, 앞서 말한 함수나 undefined 증발 현상이 있으므로 주의해야 합니다.

 

서버와의 통신에 핵심이 되는 JSON 객체를 정복하셨습니다!

---