JSON.stringify()와 JSON.parse() 메서드

JSON : JSON은 JavaScript Object Notation의 약자로서 데이터를 문자열의 형태로 나타내기 위해서 사용되는 Data Format. 이름이 암시하듯 JSON은 본래 자바스크립트에서 파생되었지만 현재는 거의 표준으로 자리잡아 대부분의 다른 프로그래밍 언어에서도 지원하는 데이터 포멧입니다. JSON은 특히 네트워크를 통해 서로 다른 시스템들이 데이터를 주고 받을 때 많이 사용되기 때문에 어렵지 않게 접할 수 있습니다.

JSON 내장 객체 : 자바스크립트에서는 JSON 포멧의 데이터를 간편하게 다룰 수 있도록 JSON이라는 객체를 내장하고 있습니다. 이 객체는 자바스크립트 코드를 브라우저에서 실행하든 Node.js 런타임에서 실행하든 상관없이 전역(global)에서 접근이 가능합니다. JavaScript 객체와 JSON 문자열 간의 상호 변환을 수행해주는 두 개의 메서드(stringify, parse)를 제공합니다.

1. JSON.stringify() 메서드

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

📄 The 'JSON.stringify()' static method converts a JavaScript value to a JSON string, optionally replacing values if a replacer function is specified or optionally including only the specified properties if a replacer array is specified.
📄 JSON.stringify() 메서드는 JavaScript 값을 JSON 문자열로 변환하고, replacer 함수가 지정된 경우 선택적으로 값을 바꾸거나, replacer 배열이 지정된 경우 지정된 속성만 선택적으로 포함합니다.

 

JavaScript 객체를 JSON 문자열로 변환할 때는 JSON 객체의 stringify() 메서드를 사용합니다. stringify() 메서드는 JavaScript 객체를 인자로 받고 JSON 문자열을 반환합니다.

 

변환해야하는 JavaScript 객체가 많은 양의 데이터를 담고 있는 경우에는 한 줄의 문자열로 변환되면 알아보기 힘들어지는데, 이때는 stringify() 메서드의 3번째 인자로 들여쓰기할 공백의 크기를 지정해줄 수 있습니다.

const obj = {
  name: "홍길동",
  age: 25,
  married: false,
  family: {
    father: "홍판서",
    mother: "춘섬",
  },
  hobbies: ["독서", "도술"],
  jobs: null,
};

const str = JSON.stringify(obj);

console.log(str);
//'{"name":"홍길동","age":25,"married":false,"family":{"father":"홍판서","mother":"춘섬"},"hobbies":["독서","도술"],"jobs":null}'


const str2 = JSON.stringify(obj, null, 2);

console.log(str2);
//{
//  "name": "홍길동",
//  "age": 25,
//  "married": false,
//  "family": {
//    "father": "홍판서",
//    "mother": "춘섬"
//  },
//  "hobbies": [
//    "독서",
//    "도술"
//  ],
//  "jobs": null
}

 

2. JSON.parse() 메서드

JSON.parse(text[, reviver])

📄 The JSON.parse() static method parses a JSON string, constructing the JavaScript value or object described by the string. An optional reviver function can be provided to perform a transformation on the resulting object before it is returned.
📄 JSON.parse()메서드는 JSON 문자열의 구문을 분석하고, 그 결과에서 JavaScript 값이나 객체를 생성합니다. 선택적으로, reviver함수를 인수로 전달할 경우, 결과를 반환하기 전에 변형할 수 있습니다.

JSON 문자열을 JavaScript 객체로 변환할 때는 JSON 객체의 parse() 메서드를 사용합니다. parse() 메서드는 JSON 문자열을 인자로 받고 결과값으로 JavaScript 객체를 반환합니다.

 

const str = `{
  "name": "홍길동",
  "age": 25,
  "married": false,
  "family": { "father": "홍판서", "mother": "춘섬" },
  "hobbies": ["독서", "도술"],
  "jobs": null
}`;

const obj = JSON.parse(str);
console.log(obj);

// {
//   name: "홍길동",
//   age: 25,
//   married: false,
//   family: {
//       father: "홍판서",
//       mother: "춘섬"
//   },
//   hobbies: [
//       "독서",
//       "도술"
//   ],
//   jobs: null
// }

⭐️ JSON 문자열에서는 키(key)를 나타낼 때 반드시 쌍따옴표로 감싸줘야 하는 반면에, JavaScript 객체에서는 쌍따옴표를 꼭 사용할 필요는 없습니다. (특수 문자나 영어 외의 언어와 같이 키로 허용되지 않는 문자를 키로 사용해야하는 경우에는 쌍따옴표를 사용해야 합니다.)

 

이렇게 외부에서 문자열의 형태로 주어진 데이터를 해당 언어에서 다루기 용이하도록 내장 데이터 타입으로 변환하는 과정 CS(Computer Science)에서는 소위 역직렬화(deserialization)이라고 부릅니다.

 

대표적인 사례로 클라이언트에서 JSON 포멧으로 데이터를 보내면, 서버에서 우선 JavaScript 객체로 변환한 후에 데이터를 처리하게 되는 것을 들 수 있습니다.