[JS] JSON

codeCYJ·2022년 7월 20일
0

javaScript

목록 보기
34/35

JSON이란?

클라이언트와 서버간의 HTTP통신을 위한 텍스트 데이터 포맷이다.
JS에 종속되지않는 언어 독립형 데이터포맷이다.

표기방식

JS에서의 객체 리터럴과 유사하게 키와 값으로 구성된다.
JSON의 키는 반드시 큰따옴표(작은따옴표사용불가)로 묶어야 한다.

{
	"name":"Lee",
	"age":20,
	"alive":true,
	"hobby":["traveling", "tennis"],
}

JSON.stringify

객체를 JSON포맷의 문자열로 변환한다. 클라이언트가 서버로 객체를 전송하려면 객체를 문자열화해야하는데 이를 직렬화라 한다.

const obj = {
	name:"Lee",
	age:20,
	alive:true,
	hobby:["traveling", "tennis"],	
}

const json = JSON.stringify(obj);
console.log(typeof json, json);
//string {"name":"Lee","age":20,"alive":true,"hobby":["traveling","tennis"]}

//객체를 JSON포맷의 문자열로 변환하면서 들여쓰기한다.
const prettyJSON = JSON.stringify(obj,null,2);
console.log(typeof prettyJSON, prettyJSON);
/*
string
{
	"name":"Lee",
	"age":20,
	"alive":true,
	"hobby":["traveling", "tennis"],
}
*/

JSON.stringify 메서드는 객체뿐 아니라 배열도 JSON 포맷의 문자열로 변환한다.

const todos = [
  {id:1, content:"HTML", completed: false},
  {id:2, content:"CSS", completed: true},
  {id:3, content:"JavaScript", completed: false},
];

const json = JSON.stringify(todos, null, 2);
console.log(typeof json, json);

/*
string[
{
"id:1,
"content":"HTML",
"completed":false
},
{
"id:2,
"content":"CSS",
"completed":true
},
{
"id:3,
"content":"JavaScript",
"completed":false
},
]
*/

JSON.parse

JSON포맷의 문자열을 객체로 변환한다.
서버로부터 클라이언트에게 전송된 데이터를 객체로 사용하려면 객체화 해야하는데 이를 역직렬화라 한다.

const obj = {
	name:"Lee",
	age:20,
	alive:true,
	hobby:["traveling", "tennis"],	
}

const json = JSON.stringify(obj);
const parsed = JSON.stringify(json);
console.log(typeof parsed, parsed);
//object {name:"Lee",age:20,alive:true,hobby:["traveling","tennis"]}
profile
안녕하세요

0개의 댓글