[JS study] JSON

네트워크를 통해 객체를 어딘가에 보낸다고 가정한다면 그 객체를 문자열로 전환을 해야 한다. 객체를 문자열로 바꾸는 과정에서 프로퍼티가 추가되거나 삭제, 수정될 수 있는데 이럴 때마다 매번 toString()을 사용하는 것은 너무 번거롭다. 다행히 자바스크립트에는 이런 문제를 해결해주는 방법이 있다. 관련 기능이 이미 구현이 되어있어서 우리가 직접 코드를 짤 필요가 없다.

JSON.stringify

JSON.stringify는 객체를 JSON으로 바꿔주는 역할을 한다. 예시를 한번 확인해보자.

let student = {
  name: 'JaeO',
  age: 26,
  courses: ['html', 'css', 'js'],
  wife: null
};

let json = JSON.stringify(student);
console.log(typeof json); // String

console.log(json);
/*
{
  "name": "JaeO",
  "age": 26,
  "courses": ["html", "css", "js"],
  "wife": null
}
*/

JSON.stringify(student)를 호출하자 객체가 문자열로 바뀌었다. 객체는 이렇게 문자열로 변환된 후에야 비로소 네트워크를 통해 전송하거나 저장소에 저장할 수 있다.

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

• 문자열은 큰따옴표로 감싸야 한다. JSON에서는 백틱이나 작은따옴표를 사용할 수 없다.
• 객체 프로퍼티 이름은 큰따옴표로 감싸야 한다.
• 함수 프로퍼티, 심볼형, 값이 undefined인 프로퍼티는 무시되어 빈 객체가 출력된다.

JSON.stringify의 전체 문법은 아래와 같다.

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

여기서 value는 인코딩을 하려는 값을 의미하고, replacers는 인코딩 하기를 원하는 프로퍼티가 담긴 배열, 또는 매핑함수를 의미한다. 마지막으로 space는 서식 변경을 목적으로 하는 공백 문자 수를 의미한다.

보통 JSON.strigify에는 인수를 하나만 넘겨서 사용한다. 그런데 순환 참조를 다뤄야 하는 경우같이 전환 프로세스를 정교하게 조정하려면 두번째 인수를 사용해야 한다. JSON으로 변하길 원하는 프로퍼티가 담긴 배열을 두번째 인수로 넘겨주면 이 프로퍼티들만 인코딩할 수 있다.

JSON.parse

JSON.parse를 사용하면 JSON으로 인코딩된 객체를 다시 객체로 디코딩할 수 있다.

let value = JSON.parse(str, [reviver]);

let userData = '{"name: "JaeO", "age": 26, "number": [0,1,2,3]}';
let uset = JSON.parse(userData);
console.log(user.number[1]); // 1

JSON.parse는 중첩 객체에도 사용할 수 있다.

reviver 사용하기

let str = '{"title": "Conference", "date":"2023-04-02T12:00.0007}';
let meetup = JSON.parse(str);
console.log(meetup.date.getDate()); // Error!

meetup.date의 값은 객체가 아니고 문자열이기 때문에 발생한 에러이다. 그렇다면 문자열을 Date로 전환해줘야 한다는 것을 어떻게 JSON.parse에 알릴 수 있을까? 이럴 때 JSON.parse의 두번째 인수 reviver를 사용하면 된다. 모든 값은 그대로이지만 date만큼은 Date 객체를 반환하도록 할 수 있다.

let str = '{"title": "Conference", "date":"2023-04-02T12:00.0007}';
let meetup = JSON.parse(str, function(key, value) {
  if(key == 'date') return new Date(value);
  return value;
});
console.log(meetup.date.getDate()); // OK!