JSON

gyomni·2021년 12월 11일
0

JavaScript

목록 보기
3/14
post-thumbnail

JSON (JavaScript Object Notation)

  • 클라이언트와 서버 간의 HTTP 통신을 위한 텍스트 데이터 포맷.
  • 자바스크립트에 종속되지 않은 언어 독립형 데이터 포맷.
  • 대부분의 프로그래밍 언어에서 사용가능.

JSON 표기 방식

  • 객체 리터럴과 유사하게 키, 값으로 구성된 순수 텍스트.
  • 키 -> 반드시 큰따옴표.
  • 값 -> 객체 리터럴과 같은 표기법. 단, 문자열은 반드시 큰따옴표.
{
    "name" : "gyomni",
    "age" : "24",
    "fruits" :["apple", "cherry"] 
}

JSON.stringify

  • 객체를 JSON 포맷의 문자열로 변환.
  • 클라이언트가 서버로 객체를 전송하려면 객체를 문자열화 해야함 = 직렬화 (serializing)
 const obj= {
    "name" : "gyomni",
    "age" : "24",
    "fruits" : ["apple", "cherry"] 
};
   // 객체를 JSON 포맷 문자열로 변환
const json = JSON.stringify(obj);
console.log(typeof json, json); 		// sring {"name":"gyomni","age":"24", "fruits" : ["apple", "cherry"] }
// 객체를 JSON 포맷의 문자열로 변환하면서 들여쓰기
cosnt goodJson =JSON.stringify(obj, null, 2);	// (data, replacer, space)
console.log(typeof goodJson, goodJson);
> 
	// string{
	//	  "name":  "gyomni",
	//    "age":   "24",
	//    "fruits":  [
	//    	"apple", 
	//     	"cherry"
	//      ] 
	// }

JSON.parse

  • JSON 포맷의 문자열을 객체로 변환.
  • 서버로부터 클라이언트에게 전송된 JSON 데이터는 문자열.
  • 문자열을 객체로서 사용하려면 JSON 포맷의 문자열을 객체화해야함 -> 역직렬화 (deserializing)
> const obj= {
	"name" : "gyomni",
    "age" : "24",
    "fruits" : ["apple", "cherry"] 
};

> 	// 객체를 JSON 포맷 문자열로 변환
const json = JSON.stringify(obj);

>     > // JSON 포맷의 문자열을 객체로 변환
const parsed = JSON.parse(json);
console.log(typeof parsed, parsed);
// object {"name" : "gyomni","age" : "24","fruits" : ["apple", "cherry"]}
  • 배열이 SON 포맷의 문자열로 변환되어 있는 경우 JSON.parse는 문자열을 배열 객체로 변환.
  • 배열의 요소가 객체인 경우 배열의 요소까지 객체로 변환.

학습 자료 : 모던 자바스크립트 Deep Dive - 이웅모

profile
Front-end developer 👩‍💻✍

0개의 댓글