파트 1 - 4) 자료구조와 자료형 - 12) JSON과 메서드

JSON과 메서드 : https://ko.javascript.info/json

JSON.stringify : 객체 => JSON
JSON.parse : JSON => 객체

JSON 형식에는 작은 따옴표나 벡틱은 사용할 수 없다. 쌍따옴표(")만 사용할 수 있다.
주의 : JSON.stringify 사용 시 순환 참조가 있으면 원하는 대로 객체를 문자열로 바꾸는 게 불가능하다.

let room = {
  number: 23
};

let meetup = {
  title: "Conference",
  participants: ["john", "ann"]
};

meetup.place = room;       // meetup은 room을 참조
room.occupiedBy = meetup; // room은 meetup을 참조

JSON.stringify(meetup); // Error: Converting circular structure to JSON

room.occupiedBy는 meetup을, meetup.place는 room을 참조하기 때문에 JSON으로의 변환이 실패.

stringify 메서드에는 주로 하나의 인수를 넣지만
let json = JSON.stringify(value[, replacer, space]);
이렇게 value, replacer, space 인수를 따로줘서 원하는 프로퍼티만 JSON화 시킬 수 있다.

value: 인코딩 하려는 값
replacer: JSON으로 인코딩 하길 원하는 프로퍼티가 담긴 배열. 또는 매핑 함수 function(key, value)
space: 서식 변경 목적으로 사용할 공백 문자 수, 예시로 space에 2를 넘겨주면 자바스크립트는 중첩 객체를 별도의 줄에 출력해주고 공백 문자 두 개를 써 들여쓰기해준다.

//rplacer 예시
let room = {
  number: 23
};

let meetup = {
  title: "Conference",
  participants: [{name: "John"}, {name: "Alice"}],
  place: room // meetup은 room을 참조합니다.
};

room.occupiedBy = meetup; // room references meetup

alert( JSON.stringify(meetup, ['title', 'participants']) );
// {"title":"Conference","participants":[{},{}]}
// 중첩의 property 명도 위 배열에 넣어줘야 participants가 정상출력 됨.
//-------------------------------------------------
alert( JSON.stringify(meetup, ['title', 'participants', 'place', 'name', 'number']) );
/*
{
  "title":"Conference",
  "participants":[{"name":"John"},{"name":"Alice"}],
  "place":{"number":23}
}
*/

space 예시

let user = {
  name: "John",
  age: 25,
  roles: {
    isAdmin: false,
    isEditor: true
  }
};

alert(JSON.stringify(user, null, 2));
/* 공백 문자 두 개를 사용하여 들여쓰기함:
{
  "name": "John",
  "age": 25,
  "roles": {
    "isAdmin": false,
    "isEditor": true
  }
}
*/

/* JSON.stringify(user, null, 4)라면 아래와 같이 좀 더 들여써진다.
{
    "name": "John",
    "age": 25,
    "roles": {
        "isAdmin": false,
        "isEditor": true
    }
}
*/

Json.parse 도 보통 하나의 인수를 쓰지만 두번째 인수인 reviver 인수도 사용할 수 있다.

let str = '{"title":"Conference","date":"2017-11-30T12:00:00.000Z"}';

let meetup = JSON.parse(str);

alert( meetup.date.getDate() ); // 에러!
//--------------------------------------------------
let meetup = JSON.parse(str, function(key, value) {
  if (key == 'date') return new Date(value);
  return value;
});

alert( meetup.date.getDate() ); // 정상 동작!

중첩객체에도 사용할 수 있다.

let schedule = `{
  "meetups": [
    {"title":"Conference","date":"2017-11-30T12:00:00.000Z"},
    {"title":"Birthday","date":"2017-04-18T12:00:00.000Z"}
  ]
}`;

schedule = JSON.parse(schedule, function(key, value) {
  if (key == 'date') return new Date(value);
  return value;
});

alert( schedule.meetups[1].date.getDate() );