자바스크립트 JSON 심화

HyosikPark·2020년 10월 17일
0

Javascript

목록 보기
9/26
post-custom-banner

JSON Stringify()

JSON : 객체를 네트워크를 통해 전송하거나 저장소에 저장하려면 문자열로 변환해야하는데 JSON은 값이나 객체를 나타내주는 범용포맷이다.

객체뿐만아니라 원시값에도 적용이 가능하다.

객체 프로퍼티 중 매서드, 키가 심볼인 경우, 값이 undefined인 경우, 순환참조가 있는 경우 stringify 되지 않는다.

JSON.stringify(obj, replacer(key, value), space )
2번째 인자는 함수를 통해 객체의 원하는 부분만 인코딩 가능하며, 또는 함수 대신
인코딩 할 객체 프로퍼티 키를 배열로 나타낼 수도 있다.
3번째 인자 space는 인코딩된 객체의 가독성을 위해 들여쓰기 공백을 지정할 수 있다.

let room = {
  number: 23,
};

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

room.occupiedBy = meetUp;

room객체의 occupiedBy와 meetUp객체의 place는 서로를 순환참조하고 있다.
따라서 meetUp객체를 인코딩하길 원한다면 place가 참조한 room의 ocuupiedBy
만 빼고 인코딩하면 된다.

두번째 인자를 배열로 인코딩하는 방법
JSON.stringify(meetUp,['title', 'participants', 'name', 'place', 'number']);

두번째 인자에 배열에 인코딩할 프로퍼티만 골라서 담아뒀다. 특이한 점은
participants는 중첩 객체일지라도 추가 조치 없이 name 키 값을 그냥 배열에
적어주면 된다.

두번째 인자를 함수로 인코딩하는 방법
JSON.stringify(meetUp,function(key, value) {
	return key == 'occupiedBy' ? undefined : value
})

원치않는 객체만 undefined를 반환하고 나머지는 value 그대로 반환하면된다.

{"title":"Conference","participants":[{"name":"John"},{"name":"Alice"}],"place":{"number":23}}
둘다 JSON 문자열로 똑같이 인코딩 된다.

3번째 인자 space값에 2를 넣어보면?
JSON.stringify(meetUp,function(key, value) {
	return key == 'occupiedBy' ? undefined : value
}, 2)

{
  "title": "Conference",
  "participants": [
    {
      "name": "John"
    },
    {
      "name": "Alice"
    }
  ],
  "place": {
    "number": 23
  }
}
들여쓰기 공백을 주어 읽기 편하게 인코딩 할 수 있다.

JSON.parse()

인코딩된 객체를 다시 디코딩하는 매서드.

JSON.parse(str, reviver(key,value)) : 인코딩한 객체 프로퍼티의
value 값이 new Date()같은 객체였을 경우 다시 parse할 때 객체라 인식하지 못하고
문자열로 반환하는데 reviver를 통해 value를 객체로 반환할 수 있게 해준다.

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

위 객체는 JSON으로 인코딩된 객체이다. date 프로퍼티의 value 값은 문자열처럼
보이지만 new Date()값을 인코딩 했던 value이다.

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

위 함수를 사용하여 다시 객체로 변환하여 준다. 

console.log(time.meetups[0].date.getTime());

getTime()같은 매서드를 사용할 수 있게 된다.

참조

https://ko.javascript.info/

post-custom-banner

0개의 댓글