JSON(Javascript Object Notation) 은 애플리케이션 간 객체 데이터를 주고받는 약속된 텍스트 포맷이며 자바스크립트 json 객체 파싱 등에 대해 알아보도록 하겠습니다.
JSON은 원래 목적 자체가 자바스크립트에서 사용하기 위해서 만들어진 포맷입니다. 하지만 표준으로써 타 언어에서도 JSON을 충분히 사용할 수 있기 때문에 데이터 교환 목적으로 사용하는 경우가 많습니다.
JSON의 특징은 다음과 같습니다.
- 객체, 배열 리터럴, 문자열, 소수점, true/false, null을 값으로 사용됩니다.
- 모든 프로퍼티 이름은 큰 따옴표를 사용해야 합니다.
- 마지막 요소에는 쉼표를 사용할 수 없으며 정의된 만큼만 요소를 사용해야 합니다.
- 모든 문자열은 큰 따옴표를 사용해야 합니다.
JSON.stringify 메서드로 기본 문자열 변환
JSON의 stringify의 기본 형태는 다음과 같습니다.
JSON.stringify( 값, 필요한 프로퍼티만 정의(배열), space ( 공백 ) )
JSON.stringify는 자바스크립트 객체를 JSON 문자열로 변환합니다. 만약 반환 값 중에 undefined가 있다면 null로 변환하여 반환하게 됩니다.
<body>
<script>
const jsonObj = {
name: "철수",
age: 30,
job: "student",
};
const refObj = JSON.stringify(jsonObj); //JSON 객체로 변경
console.log(refObj); // string 형태
</script>
</body>
JSON.stringify는 자바스크립트 객체를 JSON 형태로 변경해주며, 따라서 typeof 로 자료형을 확인해 보면 string 객체로 변환되었음을 확인할 수 있습니다.
아래의 결과를 보면, name, age 등의 키값은 모두 쌍따옴표로 감싸져서 변환되었음을 확인할 수 있습니다.
{“name”:”철수”,”age”:30,”job”:”student”}
정리하면, JSON 파일의 문자열은 큰 따옴표로 감싸져야 합니다. 자바스크립트와는 달리, JSON에서는 작은따옴표나 백틱은 사용할 수 없습니다. 객체 프로퍼티의 이름 역시 큰 따옴표로 감싸져야 합니다.
JSON.stringify는 중첩 객체의 경우에도 JSON 형태로 변환해 줍니다.
<body>
<script>
const book = {
title: "SAPUI5 자바스크립트",
author: "sap-learn-more",
toc: ["개요", "설명", "소스코드"],
};
//자바스크립트 형태
console.log(book);
const jSonBook = JSON.stringify(book);
//json으로 변환된 상태의 스트링
console.log(jSonBook);
</script>
</body>
JSON.stringify 에서 원하는 프로퍼티만 JSON형태로 만들기
JSON.stringify 의 두번째 파라메터 replacer 파라메터를 사용하면 원하는 부분만을 직렬화 할 수 있습니다.
<body>
<script>
const book = {
title: "SAPUI5 자바스크립트",
author: "sap-learn-more",
toc: ["개요", "설명", "소스코드"],
};
console.log(book);
const jSonBook = JSON.stringify(book, ["title", "toc"]);
console.log(jSonBook);
const reBook = JSON.parse(jSonBook);
console.log(reBook);
</script>
</body>
JSON.stringify 의 세번째 매개변수 space로 JSON 답게 꾸미기
세번째 파라메터인 space 파라메터에 공백 숫자를 넣어 String의 포맷을 변경할 수 있습니다.
<body>
<script>
const book = {
title: "SAPUI5 자바스크립트",
author: "sap-learn-more",
toc: ["개요", "설명", "소스코드"],
};
console.log(book);
const jSonBook = JSON.stringify(book);
console.log(jSonBook);
// replacer 매개변수를 활용하여 title, toc만 가져옴
const replBook = JSON.stringify(book, ["title", "toc"]);
console.log(replBook);
const spacedBook = JSON.stringify(book, ["title", "toc"], 4);
console.log(spacedBook);
</script>
</body>
아래와 같이 각 라인상에 공백 4칸으로 보기 좋게 변경이 가능합니다.
JSON.parse 로 JSON 객체를 자바스크립트 객체로 변환하기
JSON.parse() 메소드를 통해 JSON 객체를 자바스크립트 객체로 변환할 수 있습니다.
<body>
<script>
const book = {
title: "SAPUI5 자바스크립트",
author: "sap-learn-more",
toc: ["개요", "설명", "소스코드"],
};
console.log(book);
const jSonBook = JSON.stringify(book, ["title", "toc"], (space = 4));
console.log(jSonBook);
const reBook = JSON.parse(jSonBook);
console.log(reBook);
</script>
</body>
date형만 따로 로직을 넣어 변경 후 자바스크립트 객체로 변환할 수 있습니다. reviver 매개변수에 아래와 같이 콜백 함수를 정의해 주면 됩니다.
<body>
<script>
const book = {
title: "SAPUI5 자바스크립트",
author: "sap-learn-more",
toc: ["개요", "설명", "소스코드"],
release: "2022-03-29",
};
const jsonBook = JSON.stringify(book);
console.log(jsonBook);
const dateBook = JSON.parse(jsonBook, (key, value) => {
if (key == "release") {
return new Date(value);
}else{
return value;
}
});
console.log(dateBook);
</script>
</body>
이상으로 자바스크립트 JSON 객체 파싱 등을 알아보았습니다. 좀 더 상세한 내용은 문서 stringify() , parse() 를 통해 확인해 보시기 바랍니다.