[Javascript]JSON.stringify(), JSON.parse() 사용법

개요

자바스크립트(Javascript)에서는 JSON형태의 데이터 포맷을 다룰 수 있는 JSON객체가 존재합니다.
이러한 JSON 객체에는 stringify와 parse 2가지의 메서드가 있습니다.

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

stringify()는 객체(Object)를 String 형식으로 변환합니다.

const obj = {
  name: 'cary',
  gender: 'male',
  age: 30
};

JSON.stringify(obj);  // '{"name":"car","gender":"male",age":30}'

replacer

JSON 문자열에 포함될 값 객체의 속성들을 선택하기 위한 매개변수입니다.

const obj = {
  name: 'cary',
  gender: 'male',
  age: 30
};

function replacer(key, value) {
  if (key === 'gender') {
    return undefined;
  }
  return value;
}

JSON.stringify(obj, replacer);  // '{"name":"cary","age":30}'

space

JSON 문자열을 가독성을 높이기 위하여 삽입되는 String이나 Number입니다.
String입력시에는 공백 대신에 해당 문자열이 표시됩니다.
Number일 경우에는 공백의 스페이스(space) 수를 나타내며, 1 ~ 10 사이의 값을 가지게 되며 1보다 작을 경우에는 공백을 허용하지 않고 10 이상일 경우에는 공백의 수를 10으로 표시합니다. 또한 해당 값이 null일 경우에는 공백을 허용하지 않습니다.

const obj = {
  name: 'cary',
  gender: 'male',
  age: 30
};
JSON.stringify(obj, null, '...');
// "{
// ..."name": "cary",
// ..."gender": "male",
// ..."age": 30
// }"

JSON.stringify(obj, null, 3);
//"{
//   "name": "cary",
//   "gender": "male",
//   "age": 30
//}"

JSON.parse(text [, reviver])

parse()는 String형식의 데이터를 객체(Object) 형식으로 변환합니다.

const str = '{"name": "car", "gender": "male", "age": 30}';

JSON.parse(str);  // {name: "car", "gender": "male", age: 30}

reviver

반환 결과를 반환하기 전에 해당 인자에 값을 전달하여 최종적으로 값을 변환할 수 있게 합니다.
reviver에서 값을 undefined 또는 값을 반환하지 않는다면 JSON 최종 결과물에 값이 제외됩니다.

const str = '{"name": "car", "gender": "male", "age": 30}';

JSON.parse(str, (key, value) =>
  typeof value === 'number'
    ? value * 2 // 숫자라면 2배
    : value     // 나머진 그대로
);  // {name: "car", "gender": "male", age: 60 }

참고자료

(W3School: parse)[https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse]
(W3School: stringify)[https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify]