JSON과 메서드

객체를 어딘가에 보내거나 로깅 목적으로 객체를 출력하려면 객체를 문자열로 전환해야 한다.

let user = {
	name: 'kwonJin',
    age: 22,
    
    toString() {
    	return `{name: '${this.name}', age: ${this.age}}`;
    }
};

alert(user); // {name: 'kwonJin', age: 22}

하지만 이렇게 매번 하드코딩으로 문자열로 변환하지 않고 관련 기능이 구현되어 있다. (JSON)

JSON은 값이나 객체를 나타내주는 범용 포맷이다. 자바스크립트가 제공하는 JSON 관련 메서드는 다음과 같다.

• JSON.stringify - 객체를 JSON으로 바꿔줌
• JSON.parse - JSON을 객체로 바꿔줌

JSON.stringify

//기본 문법
let json = JSON.stringify(value, [replacer, space])

value - 인코딩 하려는 값

replacer - JSON으로 인코딩 하길 원하는 프로퍼티가 담긴 배열 또는 매핑 함수

space - 서식 변경 목적으로 사용할 공백 문자 수

let student = {
	name: 'Jin',
    age: 22,
    girlFriend: true,
    skills: ['html', 'css', 'js'],
};

let json = JSON.stringify(student);

alert(typeof json); // string

alert(json); // {"name":"Jin","age":22,"girlFriend":true,"skills":["html","css","js"]}

객체는 이렇게 문자열로 변환된 후 네트워크를 통해 전송하거나 저장소에 저장할 수 있다. JSON으로 인코딩된 객체는 일반 객체와 다른 특징을 보인다.

1. 문자열은 큰따옴표로 감싸야한다. JSON에선 작은따옴표나 백틱을 사용할 수 없다.
2. 객체 프로퍼티 이름은 큰따옴표로 감싸야한다.

JOSN.stringify 호출 시 무시되는 프로퍼티는 다음과 같다.

• 함수 프로퍼티(메서드)
• 심볼형 프로퍼티(키가 심볼인 프로퍼티)
• 값이 undefined인 프로퍼티

또한 순환 참조가 있으면 원하는 대로 객체를 문자열로 바꾸는 게 불가능하다. replacer로 원하는 프로퍼티만 직렬화 할 수 있다. 대다수 경우 JSON.stringify엔 인수 하나만 넘겨서 사용하지만 순환 참조를 다뤄야 하는 경우와 같이 프로세스를 정교하게 조정하려면 두 번째 인수를 사용해야 한다. 또한 세 번째 인수 space는 가독성을 높이기 위해 중간에 삽입해 줄 공백 문자 수를 나타낸다.

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']));

 

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

// 기본 문법
let value = JSON.parse(str,[reviver]);

str - JSON 형식의 문자열

reviver - 모든 (key, value) 쌍을 대상으로 호출되는 function(key, value) 형태의 함수로 값을 변경시킬 수 있다.

let numbers = "[4, 4, 4, 9]";

numbers = JSON.parse(numbers);

alert(numbers[3]); //9

// 중첩 객체에도 사용가능
let userData = '{"name": "Jin", "age": 22, "isAdmin": false, "friends": [4,5,6,7]}';

let user = JSON.parse(userData);

alert(user.friends[1]); // 5

// JSON은 주석을 지원하지 않음

reviver 사용하기

서버로부터 문자열로 변환된 객체를 전송 받았다고 하였을 때 이 문자열을 자바스크립트 객체로 만들어야 한다.

let str = '{"title": "Conference", "date": "2024-08-03T12:00:00.000Z"}';

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

alert(meetup.date.getDate()) // 3