JSON은 JavaScript Object Notation의 약자로, 브라우저와 서버 사이로 오고가는 데이터 형식이다.
JSON.stringify(vale, replacer, space)
value: JSON 문자열로 변환할 값
replacer: 함수나 객체들로 조합된 배열을 사용할 수 있다. 제공되지 않거나 null이면 객체의 모든 속성들이 JSON 문자열 결과에 포함된다.
space: 가독성을 목적으로 JSON 문자열 출력할 때에 공백을 삽입하는데 사용한다.
let parsing = {
num: 1213,
red:"#FF0000",
green: "#00FF00",
blue: "#0033FF",
}
parsing이라는 변수 안에 객체를 담고 JSON.stringfy()를 한번 적용시켜보자.
const a = JSON.stringify(parsing)
a//"{"num":1213,"red":"#FF0000","green":"#00FF00","blue":"#0033FF"}"
위 코드 처럼 데이터타입이 문자열(string)이 된다.
value의 데이터 타입이 number이나 boolean일 경우, 그대로 가져오고, 나머지는 문자열로 바꾸주는 특성을 가지고있다.
const filtering = (key, value) => {
if(typeof value === 'number'){
return undefined;
}
return value;
}
const b = JSON.stringify(parsing, filtering)
const b2 = JSON.stringㅑfy(parsing, ['red', 'blue'])
b//"{"red":"#FF0000","green":"#00FF00","blue":"#0033FF"}"
b2//"{"red":"#FF0000","blue":"#0033FF"}"
replace는 함수로 특정 값만 걸러서 받을 수 있고, 배열로 작성했을 경우 원하는 키를 배열에 담으면 그 값만 가져올 수 있다.
let c = JSON.stringify(parsing, null, 1)
c//"{
"num": 1213,
"red": "#FF0000",
"green": "#00FF00",
"blue": "#0033FF"
}"
space에 타입이 number일 경우 숫자만큼 각 요소에 공백을 삽입한다. 만약 문자열을 입력받으면 어떻게 될까?
let c = JSON.stringify(parsing, null, 'string')
c//"{
string"num": 1213,
string"red": "#FF0000",
string"green": "#00FF00",
string"blue": "#0033FF"
}"
JSON 문자열의 구문을 분석한다음, JavaScript의 객체나 값을 생성한다.
사용법
JSON.parse(text, reviver)
text: 문자열(string) 객체를 JSON 객체로 반환한다.
reviver: 함수를 이용하여 결과값을 바꿀 수 있다.
위에 stringify()를 한 결과들을 parse를 해보자
const parseA = JSON.parse(a)
parseA // {num: 1213, red: "#FF0000", green: "#00FF00", blue: "#0033FF"}