[Javascript] JSON 오브젝트

JSON 오브젝트

JSON 오브젝트 개요

✓ JSON : Javascript Object Notation
✓ 빌트인 오브젝트
✓ new 연산자로 인스턴스 생성 불가

JSON 주요 기능

✓ 데이터 송수신의 변환 기준
✓ 텍스트이므로 전송 속도가 빠름
✓ 파일 확장자 : json, txt

1. stringify()

// JS 타입을 JSON 타입의 문자열로 변환
// JSON.stringify() 형태로 호출
// 1. 첫 번째 파라미터만 작성
var value = {
  book: '책',
  title: 123
};
var result = JSON.stringify(value);
console.log(result);

[실행 결과]
{"book":"책","title":123}

// 배열 


// infinity, NaN, null은 null로 변환
// true, false는 변환하지 않음.

/* 
undefined는 작성한 곳에 따라 다르게 변환
undefined → undefined
[unddefined] → null
{value: undefined} → {}
*/

// 2. 두 번째 파라미터까지 작성
// 두 번째 파라미터에 함수 작성
var data = {book: '책', point: 55};
function replace(key, value){
  return key === "point" ? 11 : value;	// 함수에서 return한 값을 변환 값으로 사용.	
};
var result = JSON.stringify(data, replace);
console.log(result);

[실행 결과]
{"book":"책", "point":11}

// 두 번째 파라미터에 배열 작성
 var data = {one:1, two: 2, three: 3};
 var result = JSON.stringify('one', 'two', 'five');
 console.log(result);
 /* 
 1. 배열에 프로퍼티 이름을 작성한다.
 2. 이름이 같은 것만 result에 설정된다.
 3. {three: 3}이 출력되지 않았다.
 */
 
 [실행 결과]
 {"one":1,"two":2}
 
 // 3. 세 번째 파라미터
 // 세 번재 파라미터에 줄 분리 작성
 var data = {one:1, two: 2, three: 3};
 var result = JSON.stringify(data, "", '\n');
 console.log(result);
 
 [실행 결과]
 {
   "one":1
   "two":2
   "three":3
 }
 
 // 세 번째 파라미터에 숫자 작성
 var data = {one:1, two: 2, three: 3};
 var result = JSON.stringify(data, "", 4);	// 숫자만큼 들여쓰기
 console.log(result);
 
 [실행 결과]
 {
   	"one":1
   	"two":2
   	"three":3
 }
 
 // 세 번째 파라미터에 문자 작성
 // 문자열을 작성하면 데이터 앞에 표시됨.
 var data = {one:1, two: 2, three: 3};
 var result = JSON.stringify(data, "", "##");	
 console.log(result);
 
 [실행 결과]
 {
   ##"one":1
   ##"two":2
   ##"three":3
 }

2. parse()

// JSON 타입을 JS 타입으로 변환
/*
🚨 작성 주의
"123."을 "123.0"으로 작성해야 한다.
"0123"처럼 첫 자리에 0 사용 불가
대문자 "NULL" 사용 불가, "null" 사용
10진수를 사용해야 한다.
*/

// 1. 값이 숫자일 때
var value = "123";
try {
  var result = JSON.parse(value);
} catch(e){
  console.log("JSON 파싱 에러");
};
console.log(result);
console.log(typeof result);
/*
JSON 형태는 기본적으로 큰따옴표 사용
String 타입이지만 JSON.parse()에서 JS 타입에 맞도록 변환
"123"은 문자열이지만 값이 숫자이므로 Number 타입의 숫자로 변환
파싱 대상이 서버에서 받은 데이터일 때, try-catch 사용은 필수
*/

[실행 결과]
123
Number

// 2. 배열에 작성
// 배열에 작성된 String 타입의 숫자는 숫자로 변환 ✕
var value = '["ABC", "string","123"]';
var result = JSON.parse(value);
console.log(result);

[실행 결과]
["ABC","string","123"]

// 3. Object에 작성
// JS는 프로퍼티 이름에 큰따옴표를 사용하지 않으므로 표시 ✕
var value = '{"point":"123"}';
var result = "JSON.parse(value);
console.log(result);

[실행 결과]
{point: "123"}

// "true","false"도 숫자처럼 true,false로 변환.

// 두 번째 파라미터 작성
var data = {book: '책', point: 55};
function replace(key, value){
  return key === "book" ? "JS" : value;	
};
var result = JSON.parse(data, replace);
console.log(result);
/*
1. 첫 번째 파라미터의 JSON 문자열을 파싱하면 {book:"책","point":"55} 형태
2. 파싱한 오브젝트를 하나씩 읽어가면서 두 번째 파라미터의 함수를 실행
3. 함수에서 값을 반환하면 파싱 결과인 result 변수에 반영
4. 값을 반환하지 않거나 undefined를 반환하면 프로퍼티 제외되므로 반환해야 한다.
*/
[실행 결과]
{book:"JS", point:11}