[모던 JavaScript] 5.12 JSON과 메서드

JSON.stringify

- JSON(JavaScript Object Notation) : 값이나 객체를 나타내주는 범용 포맷, RFC 4627 표준에 정의되어 있음

- 본래 자바스크립트에서 사용할 목적으로 만들어진 포맷이나 다른 언어에서 데이터 교환 목적으로 사용하는 경우도 많음

- 순환 참조가 있으면 원하는 대로 객체를 문자열로 바꿀 수 없음

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

 

- JSON으로 인코딩된 객체는 일반 객체와 다른 특징을 보임

• 문자열은 큰따옴표로 감싸야 함, JSON에선 작은따옴표나 백틱을 사용할 수 없음
• 객체 프로퍼티 이름은 큰따옴표로 감싸야 함

 

 

 

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

- value : 인코딩 하려는 값

- replacer : JSON으로 인코딩 하길 원하는 프로퍼티가 담긴 배열 또는 매핑 함수(function(key, value))

- space : 서식 변경 목적으로 사용할 공백 문자 수 

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

 

- 예시

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에 함수를 사용한 예시

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]
title:        Conference
participants: [object Object],[object Object]
0:            [object Object]
name:         John
1:            [object Object]
name:         Alice
place:        [object Object]
number:       23
*/

 

 

 

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

 

 

 

커스텀 "toJSON"

- JSON.stringify는 date 값에 toJSON을 자동으로 호출해줌

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",  // (1)
    "room": {"number":23}               // (2)
  }
*/

 

 

 

JSON.parse

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

- str : JSON 형식의 문자열

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

// 문자열로 변환된 배열
let numbers = "[0, 1, 2, 3]";

numbers = JSON.parse(numbers);

alert( numbers[1] ); // 1


let userData = '{ "name": "John", "age": 35, "isAdmin": false, "friends": [0,1,2,3] }';

let user = JSON.parse(userData);

alert( user.friends[1] ); // 1

 

 

 

reviver 사용하기

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() ); // 이제 제대로 동작하네요!