Archive

JSON 과 메서드

livemehere 2022. 8. 30. 19:55

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

 

반응형