JSON

JSON ( JavaScript Object Notation )

• 데이터를 저장하거나 전송할때 많이 사용되는 경량의 data 교환 형식
• JSON 은 데이터 포맷일 뿐이며, 어떠한 통신 방법도, 프로그래밍 문법도 아닌 ❗ 단순히 데이터를 표시하는 표현 방법일 뿐
• Object 와 유사하게 {key : value}로 이루어진 간단한 파일 포맷
• 자바스크립트를 이용하여 JSON 형식의 문서를 쉽게 자바스크립트 객체로 변환할 수 있음
• 프로그래밍 언어와 플랫폼에 상관없이 독립적으로 사용가능
• 자바스크립트 문법과 굉장히 유사하지만 텍스트 형식일 뿐

 

JSON 문법

자바스크립트의 객체와 마찬가지로 key, value 존재할 수 있음

key 값이나 문자열은 항상 쌍따옴표

{
  "students" : [
   {
     "name" : "Alice",
     "major" : "Math"
   },
   {
	 "name" : "Julie",
	 "major" : "Physics"
   },
  ]
}

 

JSON ↔ Javascript Object 변환

JSON.parse : JSON 형식의 텍스트를 자바스크립트 객체로 변환

JSON.stringify : 자바스크립트 객체를 JSON 형식의 텍스트로 변환

 

1. Object → String (JSON) : serialize 직렬화

//Object to JSON
let json = JSON.stringify(true);
console.log(json); //출력결과 : true 

json=JSON.stringify(['apple','banana']);
console.log(json); //출력결과 : ["apple", "banana"] 
 
const rabbit = {
    name: 'anna',
    color: 'white',
    size: null,
    birthDate: new Date(),
    jump: function () {
      console.log(`${this.name} can jump!`);
    }, //함수는 json에 포함되지 않음
  }; 

  json=JSON.stringify(rabbit);
  console.log(json); //출력결과 : ["apple", "banana"]

  json=JSON.stringify(rabbit, ['name', 'color']); //원하는 property만 json으로 변환가능
  console.log(json); //출력결과 : {"name":"anna","color":"white","size":null,"birthDate":"2021-01-10T13:46:16.289Z"}

  json=JSON.stringify(rabbit, (key, value)=>{
      console.log(`key: ${key}, value: ${value}`);
      return value;
  }) 
  //출력결과: 
  /*
    key: , value: [object Object]
    key: name, value: anna
    key: color, value: white
    key: size, value: null
    key: birthDate, value: 2021-01-10T13:46:16.289Z
    key: jump, value: function () {
      console.log(`${this.name} can jump!`);
    }
   */

 

 

2. String (JSON) → Object : deserialize

//JSON to Object
   json=JSON.stringify(rabbit);
   const obj=JSON.parse(json, (key, value)=>{
    console.log(`key: ${key}, value: ${value}`);
    return value;
   });
   console.log(obj);
   rabbit.jump();
   obj.jump(); //serialize 될때 함수는 포함안됐으므로 
							 //다시 json으로부터 만든 obj에서 함수호출 불가능

   console.log(rabbit.birthDate.getDate());
   console.log(obj.birthDate); //obj의 birthDate는 이미 string형태임

json=JSON.stringify(rabbit);
   const obj=JSON.parse(json, (key, value)=>{
    console.log(`key: ${key}, value: ${value}`);
    return key === 'birthDate' ? new Date(value) : value;
   });
   console.log(obj);
   console.log(rabbit.birthDate.getDate());
   console.log(obj.birthDate.getDate()); // (o)

 

📌 참고 링크

[Nomad - javascript for beginners] 강의

[surim014.log]