JSON과 메서드

다른 곳에 데이터를 보내고자 할때, 객체는 문자열로 전환 해야함
그런데 개발하는 과정에서 프로퍼티가 추가, 수정 , 삭제되는 일이 있는데 할 떄마다 문자열로 전환해줘야하는데 이런 소요를 줄이기 위해서 JSON 사용

1. JSON.stringify

JSON : 값이나 객체를 나타내주는 범용 포맷

• JSON.stringfy : 객체를 JSON으로 바꿔줌
• JSON.parse : JSON을 객체로 바꿔줌

let student = {
  name: 'John',
  age: 30,
  isAdmin: false,
  courses: ['html', 'css', 'js'],
  wife: null
};

let json = JSON.stringify(student);

alert(json);
/* JSON으로 인코딩된 객체:
{
  "name": "John",
  "age": 30,
  "isAdmin": false,
  "courses": ["html", "css", "js"],
  "wife": null
}
*/

이렇게 변경된 문자열은 JSON으로 인코딩된, 직렬화 처리된, 문자열로 변환된, 결집된 객체라고 부름

특징

• 문자열은 큰따옴표로 감싸야함, 작은 따옴표나 백틱을 사용할 수 없음

• 객체 프로퍼티 이름은 큰 따옴표로 감싸야함

• 객체 뿐만 아니라 원시값에도 적용할 수 있음
  (객체, 배열, 원시형(문자형, 숫자형, 불린형, null)

• 적용이 안되는 프로퍼티
  (함수 프로퍼티(메서드), 심볼형 프로퍼티, 값이 undefined인 프로퍼티)

• 순환 참조가 있으면 원하는 대로 객체를 문자열로 바꾸는게 불가능

2.replacer로 원하는 프로퍼티만 직렬화하기

JSON.stiringify 전체문법

let json = JSON.stringify(value[, replacer, space])

• value : 인코딩 하려는 값
• replacer : JSON으로 인코딩 하길 원하는 프로퍼티가 담긴 배열. 또는 매핑 함수
• space : 서식 변경 목적으로 사용할 공백 문자 수

순환 참조 문제를 해결할려면 replacer을 사용

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":[{},{}]}

let room = {
  number: 23
};

let meetup = {
  title: "Conference",
  participants: [{name: "John"}, {name: "Alice"}],
  place: room // meetup references room
};

room.occupiedBy = meetup; // room references meetup

alert( JSON.stringify(meetup, ['title', 'participants', 'place', 'name', 'number']) );
/*
{
  "title":"Conference",
  "participants":[{"name":"John"},{"name":"Alice"}],
  "place":{"number":23}
}
*/

replacer에 배열이 너무김, 그래서 함수를 전달해서 이 문제를 해결할 수 있음
replacer에 전달되는 함수는 프로퍼티(키, 값) 전체를 대상으로 호출되는데, 기존 프로퍼티값을 대신하여 사용할 값을 반환해야 함, 누락시킬려면 반환 값을 undefined으로 만들어야함

let room = {
  number: 23
};

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

room.occupiedBy = meetup; // room은 meetup을 참조합니다

alert( JSON.stringify(meetup, function replacer(key, value) {
  alert(`${key}: ${value}`);
  return (key == 'occupiedBy') ? undefined : value;
}));

/* replacer 함수에서 처리하는 키:값 쌍 목록
:             [object Object], 함수가 최초로 호출될 때 {"":meet up} 래퍼객체가 만들어짐
title:        Conference
participants: [object Object],[object Object]
0:            [object Object]
name:         John
1:            [object Object]
name:         Alice
place:        [object Object]
number:       23
*/

3.space로 가독성 높이기

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
    }
}
*/

4. 커스텀 "toJSON"

toString을 사용해 객체를 문자형으로 변환, 객체에 toJSON이라는 메서드가 구현되어 있으면 객체를 JSON으로 바꿀 수 있을 것

let room = {
  number: 23
};

let meetup = {
  title: "Conference",
  date: new Date(Date.UTC(2017, 0, 1)),
  room
};

alert( JSON.stringify(meetup) );
/*
  {
    "title":"Conference",
    "date":"2017-01-01T00:00:00.000Z",  // 데이터 값이 문자열로 변환
    "room": {"number":23}               // (2)
  }
*/

let room = {
  number: 23,
  toJSON() {
    return this.number;
  }
};

let meetup = {
  title: "Conference",
  room
};

alert( JSON.stringify(room) ); // 23

alert( JSON.stringify(meetup) );
/*
  {
    "title":"Conference",
    "room": 23
  }
*/

5. JSON.parse

인코딩된 객체를 다시 객체로 디코딩 할 수 있음

let value = JSON.parse(str, [reviver])

• str : JSON 형식의 문자열
• reviver : 모든 (key, value) 쌍을 대상으로 호출되는 function(key, value)형태의 함수로 값을 변경시킬 수 있음

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

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

alert( meetup.date.getDate() )