JSON 과 메서드

JSON은 Javasript Objct Notation의 약자이다.

말그대로 자바스크립트에서 사용될 목적으로 만들어진 포맷이다. (데이터를 교환할 목적)

처음 얼핏듣기로는 네트워크 통신을 할때 사용되는 포맷이라고 알고있었는데, 얼추 맞는말이긴한데 정확하게 정의를 이렇게 해버린다면 틀린말이다.

 

그러면 왜 JSON은 웹통신을 할때 거의 표준이되었을까?

JSON은 객체를 문자열간에 손쉽게 변환해주고, 라이브러리를 사용하면 다른언어에서도 쉽게 JSON을 다룰 수 있어서 데이터의 교환 목적으로 사용되는 경우가 많다.

 

JSON으로 변경경된 문자열은 JSON-encoded, serialized, stringified, marshalled 라고 부른다.

 

JSON의 표현방식에는

문자열은 "",

객체 { }

배열 [ ]

원시형 : 문자, 숫자, boolean, null

 

이 있다. undefined는 javascript에만 있는 자료형으로 범용해서 사용되지 않는다.(데이터 교환이 목적이기 때문에 JS특유의 객체 프로퍼티는 처리할 수 없음)

또 Symbol이나 function 도 안된다.

 

객체간 순환참조가 이루어지는 경우 문자열로 파싱할 수 없다.

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

이럴 때는 두번째 인자인 replacer로 인코딩하고자하는 프로퍼티를 명시해주면 할 수 있다.

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

 

3번째 인자로는 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()가 자동으로 호출한다.

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

 

JSON.parse() 의 두번째인자도 존재한다.

reviver이라는 콜백함수인데, key,value를 받으며, 값을 변환할 수 있다

아래처럼 원래라면 그냥 string문자열인데, Date객체로 변경할 수 있다.

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() ); // 제대로 동작