JSON과 메서드 - 자바스크립트(JS)

네트워크를 통해 객체를 어딘가에 보내거나 로깅 목적으로 객체를 출력해야 한다면 객체를 문자렬로 전환해야 할 것이다.

이때 전환된 문자열엔 원하는 정보가 있는 객체 프로퍼티 모두가 포함되어야만 한다.

let user = {
  name: "John",
  age: 30,

  toString() {
    return `{name: "${this.name}", age: ${this.age}}`;
  },
};
alert(user);

JSON.stringify

JSON은 값이나 객체를 나타내주는 범용 포맷이다. JSON은 원래 자바스크립트에서 사용할 목적으로 만들어진 포맷이다. 하지만 라이브러리를 사용하면 자바스크립트가 아닌 언어에서도 JSON을 충분히 다룰 수 있어서, JSON을 데이터 교환 목적으로 사용하는 경우가 많다. 

• JSON.stringify : 객체를 JSON으로 바꿔준다.
• JSON.parse : JSON을 객체로 바꿔준다.

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

let json = JSON.stringify(student);
alert(typeof json);
alert(json);

JSON.stringify(student)를 호출하면 student는 문자열로 바뀐다.

이렇게 바뀐 문자열은 JSON으로 인코딩된 직렬화 처리된, 문자열로 변환된 객체라고 부른다. 

객체는 문자열로 변환된 후에 네트워크를 통해 전송하거나 저장소에 저장할 수 있다.

 

JSON으로 인코딩된 객체는 일반 객체와는 달리 문자열은 큰따옴표로 감싸야하고 객체 프로퍼티 이름은 큰따옴표로 감싸야 한다.

 

replacer로 원하는 프로퍼티만 직렬화

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

• value : 인코딩 하려는 값
• replacer : JSON으로 인코딩하길 원하는 프로퍼티가 담긴 배열 또는 매핑 함수
  • function(key,value)
• space : 서식 변경 목적으로 사용할 공백 문자 수 

대부분 JSON.stringify에 인수를 하나만 넘겨 사용하지만 순환 참조를 다뤄야 하는 경우와 같이 전환 프로세스를 정교하게 조정하려면 두번째 인수를 사용해야 한다. 

JSON으로 변환하고 싶은 프로퍼티가 담긴 배열을 두번째 인수로 넘겨주면 이 프로퍼티들만 인코딩할 수 있다. 

let room = {
  number: 23
};

let meetup = {
  title: "Conference",
  participants: [{name: "John"}, {name: "Alice"}],
  place: room // meetup은 room을 참조
};

room.occupiedBy = meetup; 

alert( JSON.stringify(meetup, ['title', 'participants']) );

배열에 name을 넣지 않아서 출력된 문자열의 participants가 빈 배열이다.

순환 참조를 발생시키는 프로퍼티 room.occupiedBy만 제외하고 모든 프로퍼티를 배열에 넣는다.

let room = {
  number: 23
};

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

room.occupiedBy = meetup; 

alert( JSON.stringify(meetup, ['title', 'participants', 'place', 'name', 'number']) );

occupiedBy를 제외한 모든 프로퍼티가 직렬화되었다. 배열이 길기 때문에 replacer를 사용하여 해결한다.

replacer에 전달되는 함수는 프로퍼티(키, 값) 전체를 대상으로 호출되는데 반드시 기존 프로퍼티 값을 대신하여 사용할 값을 반환해야한다. 

space로 가독성 높이기

JSON.stringify(value, replacer, space)의 세번째 인수는 space는 가독성을 높이기 위해 중간에 삽입할 공백 문자 수를 나타낸다.

아래처럼 space에 2를 넘겨주면 중첩 객체를 별도의 줄에 출력하고 공백 문자 두개를 써 들여쓰기해준다.

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

alert(JSON.stringify(user, null, 2));

JSON.parse

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

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

• str : JSON 형식의 문자열
• reviver : 모든 (키, 값) 을 대상으로 호출되는 function(key,value) 형태의 함수로 값을 변경시킬 수 있다.

// 문자열로 변환된 배열
let numbers = "[0, 1, 2, 3]";

numbers = JSON.parse(numbers);

alert( numbers[1] );


//중첩 객체에도 사용 가능
let userData = '{ "name": "John", "age": 35, "isAdmin": false, "friends": [0,1,2,3] }';

let user = JSON.parse(userData);

alert( user.friends[1] );

정리

• JSON.stringify를 사용하면 원하는 값을 JSON으로 직렬화 할 수 있고,
• JSON.parse를 사용하면 JSON을 원래 값으로 역 직력화 할 수 있다.