모던 자바스크립트 튜토리얼 part1 - 5.12

5.12 JSON methods, toJSON

JSON.stringify

• JSON.stringify - 객체를 JSON으로 변환
• JSON.parse - JSON을 객체로 변환

종종 ajax 통신을 구현하면서 경험해본 메서드이다.

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

let json = JSON.stringify(student);

alert(typeof json); // we've got a string!

alert(json);
/* JSON-encoded object:
{
  "name": "John",
  "age": 30,
  "isAdmin": false,
  "courses": ["html", "css", "js"],
  "spouse": null
}
*/

• JSON은 ""로만 문자열을 표현한다.
• 속성 이름도 마찬가지, 

아래 타입들을 지원한다.

• Objects { ... }
• Arrays [ ... ]
• Primitives:
  • strings,
  • numbers,
  • boolean values true/false,
  • null.

Excluding and transforming: replacer

value, replacer, space를 파라미터로 전달하여서 원하는 속성만 직렬화를 해줄수도 있다. 보통 value 값 하나만 사용하지만 필요에 따라 활용할 수 있다. 

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']) );
// {"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, function replacer(key, value) {
  alert(`${key}: ${value}`);
  return (key == 'occupiedBy') ? undefined : value;
}));

/* key:value pairs that come to 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
occupiedBy: [object Object]
*/

Formatting: space

space는 그냥 인덴트 설정하는 파라미터이다.

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

alert(JSON.stringify(user, null, 2));
/* two-space indents:
{
  "name": "John",
  "age": 25,
  "roles": {
    "isAdmin": false,
    "isEditor": true
  }
}
*/

/* for JSON.stringify(user, null, 4) the result would be more indented:
{
    "name": "John",
    "age": 25,
    "roles": {
        "isAdmin": false,
        "isEditor": true
    }
}
*/

Custom "toJSON"

toString 함수와 같이 문자열로의 변환이 일어날 때처럼, toJSON을 통해 JSON으로의 변환을 지원한다. JSON.stringify가 자동으로 해당 함수를 호출해서 처리한다.

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에서 string 으로의 변환을 위해 JSON.parse가 존재한다. str, reviver 파라미터를 사용한다.

// stringified array
let numbers = "[0, 1, 2, 3]";

numbers = JSON.parse(numbers);

alert( numbers[1] ); // 1

 

아래처럼 특정 타입으로 변환해주고 싶을 때, reviver 파라미터에 적절한 함수를 넣어 줄 수 있다.

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

let meetup = JSON.parse(str);

alert( meetup.date.getDate() ); // Error!

// -------------------

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() ); // now works!