1. JSON 오브젝트 개요, JS타입을 JSON타입으로 변환
JSON오브젝트 개요
•
Javascript Object Notation
◦
빌트인 오브젝트
◦
new 연산자로 인스턴스 생성 불가 → parse와 stringify 두개의 함수만있어 굳이 인스턴스를 만들 필요X
•
JSON 주요 기능
◦
데이터 송수신의 변환 기준
◦
텍스트이므로 전송 속도가 빠름
◦
파일 확장자: json, txt도 사용 가능
•
JS 데이터 타입 지원
◦
다른 언어도 사용하지만, 완전하게 같지 않을수도 있습니다.
⇒ 어떤 언어의 특정 버전은 지원을 안할수도 있기 때문에 변환 기준에 따라 확인이 필요합니다.
stringify()
JSON.stringify(value[, replacer[, space]])
•
매개변수
◦
value : JSON문자열로 변환할 값
console.log(JSON.stringify({book:'책', price: 1000}));//{"book":"책","price":1000}
console.log(JSON.stringify([123,"책", "Java"]));//[123,"책","Java"]
console.log(JSON.stringify([undefined, NaN, null, Infinity]));//[null,null,null,null]
console.log(JSON.stringify([true, false]));[true, false]));//[true, false]
console.log(JSON.stringify(undefined));//undefined
console.log(JSON.stringify([undefined]));//[null]
console.log(JSON.stringify({value:undefined}));//{}
JavaScript
복사
◦
replacer(optional): 문자열화 동작 방식을 변경하는 함수 함수일 때 문자열화 될 key와 value 매개변수를 받습니다. 그리고 해당 객체가 replacer의 this 매개변수로 제공됩니다.
var obj = {foundation: "Mozilla", model: "box", week: 45, transport: "car", month: 7};
function replacer(key, value){
if(key === "model")return "openedBox"
return value;
}
var jsonString = JSON.stringify(obj, replacer);
//"{"foundation":"Mozilla","model":"openedBox","week":45,"transport":"car","month":7}"
JavaScript
복사
•
space(optional) : 가독성을 목적으로 JSON문자열 출력에 공백을 삽입하는데 사용되는 String or Number객체
var obj = {foundation: "Mozilla", model: "box", week: 45, transport: "car", month: 7};
function replacer(key, value){
if(key === "model")return "openedBox"
return value;
}
var jsonString = JSON.stringify(obj, replacer, "\n");
/*
{
"foundation": "Mozilla",
"model": "openedBox",
"week": 45,
"transport": "car",
"month": 7
}
*/
JavaScript
복사
2. JSON타입 파싱
parse()
JSON.parse(text[, reviver])
•
매개변수
◦
text : JSON으로 변환할 문자열
◦
reviver(optional): 함수라면, 변환 결과를 반환하기 전에 이 인수에 전달해 변형합니다.
•
JSON타입을 JS타입으로 변환합니다.
•
작성 주의
◦
"123."을 "123.0"으로 작성
◦
"0123"처럼 첫 자리에 0 사용불가
◦
대문자 "NULL"사용 불가, "null" 사용
◦
10진수 사용
var value ="123";
try{
var result = JSON.parse(value);
} catch(e){
console.log("JSON 파싱 에러");
}
console.log(result);//123
console.log(typeof result);//number
var value = "true"
var result = JSON.parse(value);
console.log(result);//true
console.log(typeof result);//boolean ---(1)
var value = '["ABC", "가나", "123"]';
var result = JSON.parse(value);
console.log(result);//["ABC", "가나", "12"] ---(2)
JavaScript
복사
⇒(1): "true"라는 문자는 JSON.parse로 boolean 타입으로 변환되고, 실제로 타입도 boolean타입이 됩니다.
⇒(2): 배열안의 타입은 걸맞는 타입으로 바꿔주진 않습니다.
•
두 번째 파라미터 'reviver' 를 사용한 코드
var obj = '{"foundation": "Mozilla", "model": "box", "week": 45, "transport": "car", "month": 7}';
var reviver = function(key, value){
return key === "transport" ? "ship":value;
}
var result = JSON.parse(obj, reviver);
console.log(result);//{foundation: "Mozilla", model: "box", week: 45, transport: "ship", month: 7}
JavaScript
복사
•
값을 반환하지 않거나 undefined를 반환하면 프로퍼티가 제외되므로 반환해야 합니다.