복잡한 객체를 다루고 있을 때, 네트워크를 통해 객체를 보내거나 로깅 목적으로 객체를 출력해야 한다면 객체를 문자열로 전환해야 한다. 이때 전환된 문자열에는 원하는 정보가 있는 객체 프로퍼티 모두가 포함되어야만 한다.
1. toString() 메서드를 통해 객체를 문자열로 전환한다고 가정했을 때,
- 개발 과정에서 프로퍼티가 추가/삭제/수정 될 경우 매번 수정해야 하는 번거로운 작업이 뒤따릅니다.
2. 프로퍼티에 반목문을 돌리는 방법을 사용할 수도 있지만,
- 중첩 객체 등 복작한 경우 까다로워져 쉽지 않을 수 있습니다.
위 같은 문제들 때문에 많이 사용하는 것이 JSON 인데 아래에서 공부한 내용을 간단하게 정리해보았습니다.
1. JSON의 개념
1. JSON 이란?
- JavaScript Object Notation
- Javascript 객체 문법으로 구조화된 데이터를 표현하기 위한 문자 기반의 표준 포맷
- 데이터 전송 시 사용
2. JSON을 많이 사용하는 이유
- 인간이 읽을 수 있는 문서로 이루어져 있음
- 코딩이 더 적게 필요
- 처리 속도가 빠른 경량 언어
3. JSON 데이터 유형 : 문자열 / 숫자 / 부울 / Null / 객체 / 배열 등 다양한 데이터 유형 사용
4. 가장 자주 사용되는 유형
- 사용자 생성 데이터로부터 JSON 객체 생성 : 고도의 상호 운용성을 제공해 임시 데이터 저장에 적합
- 시스템 간 데이터 전송
- 애플리케이션 데이터 구성
- 복잡한 데이터 모델 간소화
2. JSON 관련 메서드 - stringify()
1. stringify() : 객체를 JSON 으로 변환
const myInfo = {
name: "홍길동",
age: 30,
graduate: true,
etc: null,
family: {
father: "홍성식",
mother: "이미자"
},
hobby: ["soccer", "trip", "cooking"]
};
let json = JSON.stringify(myInfo);
console.log(json);
/*
{"name":"홍길동","age":30,"graduate":true,"etc":null,
"family":{"father":"홍성식","mother":"이미자"},
"hobby":["soccer","trip","cooking"]}
*/
console.log(typeof json); // string- 이렇게 변경된 문자열은 JSON으로 인코딩된(JSON-encoded), 직렬화 처리된(serialized), 문자열로 변환된(stringified), 결집된(marshalled) 객체라고 부른다. 객체는 이렇게 문자열로 변환된 후에야 비로소 네트워크를 통해 전송하거나 저장소에 저장할 수 있다.
2. JSON으로 인코딩된 객체가 일반 객체와 다른 특징
- 문자열은 큰따옴표를 사용 (작은따옴표 ‘’ / 백틱`` 사용 X)
- 객체 프로퍼티 이름은 큰따옴표를 사용
3. 객체 뿐만 아니라 원시값에도 적용 가능
alert(JSON.stringify(23)); // 23
alert(JSON.stringify('hello!')); // "hello"
alert(JSON.stringify(true)); // true
alert(JSON.stringify([1, 2, 3])); // [1,2,3]
4. Javascript 특유의 객체 프로퍼티는 stringfy 처리 불가능
- 함수 프로퍼티(메서드)
- 심볼형 프로퍼티(키가 심볼인 프로퍼티)
- 값이 undefined인 프로퍼티
let json = {
hello() {
alert("hello!") // 무시
},
[Symbol("id")]: 123, // 무시
something: undefined // 무시
};
console.log(JSON.stringify(json)); // { } 빈 객체가 출력
5. 중첩 객체도 알아서 문자열로 변환
let party = {
title: "Chirstmas party",
room: {
number : 1002,
participants: ["smith", "mark", "tony"]
}
};
console.log(JSON.stringify(party));
/*
{"title":"Chirstmas party","room":{"number":1002,"participants":["smith","mark","tony"]}}
*/- 객체 전체가 문자열로 반환
6. replacer로 원하는 프로퍼티만 직렬화 / space로 가독성 높이기
- 기본 문법
let json = JSON.stringify(value, [replacer], space);
// value = 인코딩 하려는 값
// replacer = JSON으로 인코딩 하길 원하는 프로퍼티가 담긴 배열, 또는 매핑 함수
// space = 서식 변경 목적으로 사용할 공백 문자 수- JSON으로 변환하길 원하는 프로퍼티가 담긴 배열을 두 번째 인수인 replacer로 넘겨준다.
- JSON으로 변환 시 space 값을 넣어주면 중첩 객체를 별도의 줄에 출력하고, 공백 문자를 써 들여쓰기 해준다.
let party = {
title: "Chirstmas party",
room: {
number : 1002,
participants: ["smith", "mark", "tony"]
}
};
console.log(JSON.stringify(party, ["room","participants"]));
// {"room":{"participants":["smith","mark","tony"]}}
console.log(JSON.stringify(party, ["room","participants"], 2));
/*
{
"room": {
"participants": [
"smith",
"mark",
"tony"
]
}
}
*/
2. JSON 관련 메서드 - parse()
1. pasre() : JSON을 객체로 변환
- 기본 문법
let value = JSON.parse(json, [reviver]);
// json : JSON 형식의 문자열
// reviver : 모든 (key, value) 쌍을 대상으로 호출되는 function(key, value) 형태의 함수로 값을 변경- 위 문법을 사용한 예시
let json = JSON.stringify([0, 1, 2, 3]); // JSON 객체로 인코딩
console.log(json); // [0,1,2,3]
console.log(typeof json); // string
let value = JSON.parse(json); // 인코딩된 JSON 객체를 다시 객체로 변환
console.log(value); // [0, 1, 2, 3] -> length: 4
console.log(typeof value); // object
console.log(value[2]); // 2
console.log(typeof value[2]); // number
| 참고 - https://ko.javascript.info/json |
