JavaScript - JSON

JSON이란...?

JavaScript Object Notation

• 데이터를 주고받을 때 쓸 수 있는 가장 간단한 포맷
• 텍스트를 기반으로해 가벼운 구조
• 읽기 쉬움
• key와 value로 이루어진 파일 포맷
• 데이터를 서버와 주고 받을 때 직렬화 하여 주고받음
• 프로그램 언어와 플랫폼에 상관없이 쓸 수 있음

1. Object to JSON

stringify(obj)

<script>
  <!--boolean type 바꿔보기-->
  let json = JSON.stringify(true);
  console.log(json); // true
  <!--array type 바꿔보기-->
  json = JSON.stringify(['apple', 'banana']);
  console.log(json); // ["apple", "banana"]
  <!--object 바꿔보기-->
  const rabbit = {
	name: 'tori',
    color: 'white',
    size: null,
    birthDate: new Date(),
    symbol: Symbol("id"),
    jum: () => {
    	console.log(`${this.name} can jump!`);
    },
  };
  json = JSON.stringify(rabbit);
  console.log(json)
  // {"name":"tori","color":"white","size":null,"birthDate":"2022-11-22T13:20:22.670Z"} 
  -> 함수는 object에 있는 데이터가 아니기 때문에 제외, 자바스크립트에만 있는 특별한 데이터(symbol)은 포함되지 않음.
  <!--특정 프로퍼티만 저장하고 싶을 때-->
  json = JSON.stringify(rabbit, ['name', 'color']);
  console.log(json) // {"name":"tori","color":"white"}
  <!--콜백함수 전달-->
  json = JSON.stringify(rabbit, (key, value) => {
  	console.log(`key: ${key}, value: ${value}`);
    return key === 'name' ? 'mia' : value;
  });
  console.log(json);
  //key: , value: [object object] -> 첫줄은 object를 감싸는 제일 최상위의 것이 전달된다.
  //key: name, value: tori
  //key: color, value: white
  //key: size, value: null
  //key: birthDate, value:birthDate":"2022-11-22T13:20:22.670Z
  //key: jump, value: () => {
  //	console.log(`${name} can jump!`);
  //}
  //{"name":"mia","color":"white","size":null,"birthDate":"2022-11-22T13:20:22.670Z"}
</script>

2. JSON to Object

parse(json)

<script>
  json = JSON.stringify(rabbit);
  const obj = JSON.parse(json);
  console.log(obj);
  //{"name":"tori","color":"white","size":null,"birthDate":"2022-11- 22T13:20:22.670Z"} -> 함수는 전달되지 않았기 때문에 obj로 변환하더라도 함수는 없다.
  console.log(rabbit.birthDate.getDate()); // 22
  console.log(obj.birthDate.getDate()); // TypeError -> object를 string으로 변환하여 할당해두었기 때문에 new Date()라는 함수가 아닌 날짜로 저장해두었음.
  <!--new Date 함수 데리고 오기-->
  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.birthDate.getDate()); // 22
</script>