18-1. JSON 오브젝트 / JSON 오브젝트 개요, JS 타입을 JSON 타입으로 변환
JSON 오브젝트 개요
JavaScript Object Notation
- 빌트인 오브젝트
new
연산자로 인스턴스 생성 불가
인스턴스를 생성할 필요가 없습니다.
함수가 딱 2개입니다. 인스턴스가 별로 필요가 없습니다.
JSON 주요 기능
- 데이터 송수신의 변환 기준
서버로 데이터를 보낼 때 어떻게 변환해야된다.
서버에서 클라이언트로 보낼 땐 어떻게 변환한다.
라는 어떤 기준을 정해놓은 겁니다. - 텍스트이므로 전송 속도가 빠름
- 파일 확장자: json, txt도 사용 가능
- 데이터 송수신의 변환 기준
JSON이 나오기 전에는 xml을 썼습니다.
그런데 xml은 텍스트가 아니라 오브젝트입니다.
그래서 무겁습니다.
그렇기 때문에 최근에는 JSON을 많이 사용합니다.
JS 데이터 타입 지원
- 다른 언어도 JSON을 사용하지만, 완전하게 같지 않을 수도 있음
언어에 따라 또 그 언어의 버전에 따라 지원하는 것이 있고 없는 것이 있다.
사전에 체크를 확실하게 해야된다.
- 다른 언어도 JSON을 사용하지만, 완전하게 같지 않을 수도 있음
stringify()
구분 | 데이터(값) |
---|---|
object | JSON 오브젝트 |
파라미터 | 첫번째 파라미터: 변환 대상 두번째 파라미터: 함수 또는 배열opt 세번째 파라미터: 가독성을 위한 구분자opt |
반환 | 변환 결과 |
JS 타입을 JSON 타입의 문자열로 변환 (JSON은 문자열로 통신, 일부는 숫자도 있음)
- JSON.stringify() 형태로 호출
첫번째 파라미터
var value = { book: '책', title: 123 } var result = JSON.stringify(value); console.log(result); // {"book":"책","title":123}
- 변환이란 큰따옴표 안에 작성되도록 만드는 것을 뜻합니다.
- 프로퍼티 이름인 book이 “book”으로 변환
- ‘책’이 “책”으로 변환
- 숫자는 변환하지 않습니다.
원래 value의 book, title은 String입니다.
그런데 따옴표로 작성 안해도 자바스크립트 엔진이 따옴표를 추가해 해석하기 때문에 따옴표를 안붙여도 되는겁니다.var value = ['book', '책', 123]; var result = JSON.stringify(value); console.log(result); // ["book","책",123]
이 부분이 서버랑 반드시 체크해야될 사항입니다.
서버에 null 값으로 가도 괜찮은지, 그리고 null 값으로 제대로 변환되어서 가는지 항상 체크하셔야됩니다.console.log(JSON.stringify([Infinity, NaN, null])); // [null, null, null] console.log(JSON.stringify([true, false])); // [true, false]
- Infinity, NaN, null은 null로 변환됩니다.
- true, false는 변환하지 않습니다.
console.log(JSON.stringify(undefined)); // undefined console.log(JSON.stringify([undefined])); // [null] console.log(JSON.stringify({value: undefined})); // {}
- undefined는 작성한 곳에 따라 다르게 변환됩니다.
- 값 하나이면 그대로 변환
- 배열 안에 있으면 null로 변환
- 프로퍼티 값이면 프로퍼티를 제외시킴
프로퍼티 이름도 없어지므로 주의해야 합니다.
두번째 파라미터
var data = {book: '책', point: 55}; function replace (key, value) { // point 값 55를 11로 변경 return key === "point" ? 11 : value; } var result = JSON.stringify(data, replace); console.log(result); // {"book":"책","point":11}
- 함수에서 return한 값을 변환 값으로 사용합니다.
- 값을 return하지 않거나 undefined를 return하면 최종 데이터에서 제외시킵니다.
즉, 데이터를 걸러내게 됩니다.
var data = {book: '책', point: 11, amount: 90}; var result = JSON.stringify(data, ['book', 'amount']); console.log(result); // {"book":"책","amount":90}
- 배열에 프로퍼티 이름을 작성합니다.
- 이름이 같은 것만 result에 설정됩니다.
- 그래서 {point: 11}이 출력되지 않았습니다.
세번째 파라미터
var data = {sports: 'soccer', time: 90}; var result = JSON.stringify(data, "", '\n'); console.log(result); //{ // //"sports": "soccer", // //"time": 90 //}
- 사람이 데이터를 보기 쉽게 하기 위한 것으로 줄을 분리하여 표시합니다.
var data = {sports: 'soccer', time: 90}; var result = JSON.stringify(data, "", 4); console.log(result); //{ // "sports": "soccer", // "time": 90 //}
- 숫자는 들여쓰기 자릿수입니다.
- 숫자만큼 들여쓰기를 합니다.
var data = {sports: 'soccer', time: 90}; var result = JSON.stringify(data, "", "##"); console.log(result); //{ //##"sports": "soccer", //##"time": 90 //}
- 문자열(##)을 작성하면 데이터 앞에 ##을 표시합니다.