자바스크립트(JavaScript) JSON.stringify & JSON.parse

JSON.stringify & JSON.parse

JSON.stringify와 JSON.parse는 **JavaScript 객체(Object)**와 JSON 문자열(JSON String) 간의 변환을 수행하는 메서드입니다. 이 두 메서드는 데이터를 저장하거나 전송할 때 자주 사용됩니다.

 

JSON.stringify

 

• 역할: JavaScript 객체를 JSON 문자열로 변환합니다.
• 주요 사용 시점:
  1. 데이터를 서버에 전송할 때
  2. 데이터를 로컬 저장소에 저장할 때
• 문법:
  
  • value: 변환할 JavaScript 값(객체, 배열, 등등)
  • replacer (선택): 변환 시 특정 속성을 포함하거나 제외하기 위한 함수 또는 배열
  • space (선택): JSON 문자열의 들여쓰기를 위한 공백이나 탭 수

JSON.stringify(value[, replacer[, space]])

 

 

 

JSON.parse

 

• 역할: JSON 문자열을 JavaScript 객체로 변환합니다.
• 주요 사용 시점:
  1. 서버에서 받은 데이터를 JavaScript 객체로 변환할 때
  2. 로컬 저장소에 저장된 JSON 데이터를 읽어올 때
• 문법:
  
  • text: JavaScript 객체로 변환할 JSON 문자열
  • reviver (선택): 반환된 객체를 변환하기 위한 함수

JSON.parse(text[, reviver])

 

---

 

예제

간단한 예제 1: JSON.stringify와 JSON.parse 기본 사용법

// JavaScript 객체
const user = {
  name: "Alice",
  age: 25,
  isActive: true,
  hobbies: ["reading", "traveling"],
};

// JSON.stringify: 객체 -> JSON 문자열
const jsonString = JSON.stringify(user);
console.log(jsonString);
/*
출력:
'{"name":"Alice","age":25,"isActive":true,"hobbies":["reading","traveling"]}'
*/

// JSON.parse: JSON 문자열 -> 객체
const parsedObject = JSON.parse(jsonString);
console.log(parsedObject);
/*
출력:
{
  name: "Alice",
  age: 25,
  isActive: true,
  hobbies: ["reading", "traveling"]
}
*/

 

예제 2: 배열 변환

// JavaScript 배열
const fruits = ["apple", "banana", "cherry"];

// JSON.stringify: 배열 -> JSON 문자열
const jsonString = JSON.stringify(fruits);
console.log(jsonString); // '["apple","banana","cherry"]'

// JSON.parse: JSON 문자열 -> 배열
const parsedArray = JSON.parse(jsonString);
console.log(parsedArray); // ["apple", "banana", "cherry"]

 

예제 3: 로컬 스토리지 활용

로컬 스토리지는 문자열만 저장할 수 있기 때문에 JSON.stringify와 JSON.parse가 필요합니다.

// 저장할 객체
const settings = {
  theme: "dark",
  notifications: true,
};

// 로컬 스토리지에 저장
localStorage.setItem("userSettings", JSON.stringify(settings));

// 로컬 스토리지에서 가져오기
const storedSettings = localStorage.getItem("userSettings");

// JSON 문자열 -> JavaScript 객체
const parsedSettings = JSON.parse(storedSettings);

console.log(parsedSettings); // { theme: "dark", notifications: true }

 

---

세부기능

JSON.stringify의 세부 기능

1. replacer를 사용한 특정 속성 제외

const user = { name: "Alice", age: 25, isActive: true };

// age 속성을 제외하고 JSON 문자열 생성
const jsonString = JSON.stringify(user, ["name", "isActive"]);
console.log(jsonString); // '{"name":"Alice","isActive":true}'

 

2. space를 사용한 들여쓰기

const user = { name: "Alice", age: 25, isActive: true };

// 2칸 공백으로 들여쓰기
const jsonString = JSON.stringify(user, null, 2);
console.log(jsonString);
/*
출력:
{
  "name": "Alice",
  "age": 25,
  "isActive": true
}
*/

 

JSON.parse의 세부 기능

1. reviver로 값 변환

const jsonString = '{"name":"Alice","age":25}';

// age 값을 10년 더하도록 변환
const parsedObject = JSON.parse(jsonString, (key, value) => {
  if (key === "age") return value + 10;
  return value;
});

console.log(parsedObject); // { name: "Alice", age: 35 }

 

---

주의사항

1. JSON 문자열은 반드시 유효한 형식이어야 합니다.

// 잘못된 JSON 문자열 (따옴표가 잘못됨)
const invalidJson = "{name: 'Alice'}"; // 오류 발생
const obj = JSON.parse(invalidJson); // SyntaxError

 

2. undefined와 함수는 변환되지 않습니다.

const obj = {
  name: "Alice",
  age: undefined,
  greet: function () {
    console.log("Hello");
  },
};

console.log(JSON.stringify(obj)); // '{"name":"Alice"}'

 

 

---

정리

 

• JSON.stringify: 객체/배열 → JSON 문자열로 변환
• JSON.parse: JSON 문자열 → 객체/배열로 변환
• 두 메서드는 데이터를 저장하거나 서버와 통신할 때 매우 유용하며, 유효한 JSON 형식과 적절한 옵션 사용이 중요합니다.