[TIL] JavaScript: JSON

🔑 Point
🎉 JSON이란?
🎉 stringify (Object to JSON)
🎉 parse (JSON to Object)

---

1. JSON?

JSON file로 data 가져오기~!

javascript 이론을 공부하면서 그래서 data는 어디서 어떻게 가져오는 걸까에 대한 궁금증이 있었습니다. 백엔드를 이용하는 등 다양한 방법이 있지만, 저는 이번에 서버와 데이터를 주고받을 때 사용하는 방법 중 하나인 JSON을 배우게 되었습니다. (Javascript Object Notation)
fetch()API 를 이용해서 통신할 수 있습니다.

JSON이란?

• JSON은 파일을 주고받을 때 쓰는 가장 간단한 file format입니다.
• text를 기반으로 한 가벼운 파일 포멧이다.(읽기 쉬움)
• key 와 value로 이루어져 있다. Object{key : value}
• data를 서버와 주고받을 때 직렬화 (serialization)하고 전송할 때 쓰인다.
• 프로그래밍 언어나 플랫폼에 상관 없이 쓸 수 있다. (C, C++ JAVA., GO... )상관없이 대부분의 언어들과 사용 가능.
  
  

Client에서 Server로 보낼 때는 배열의 형태로 보내고, 반대로 Serverdptj Client로 가져올 때는 Obiect 형태로 가져옵니다.
이를 가능하게 하는 JSON API는 2가지가 있습니다.

2. JSON APIs

1) Object to JSON : stringfy (*직렬화)

client에서 server로 data를 전송할 때에는 데이터를 배열의 형태로 바꿔주어야 합니다. 그것은 stringfy API를 사용합니다.

• 배열를 JSON으로

json = JSON.stringify(['apple', 'banana']);
console.log(json);  

// ["apple","banana"] 출력 
// ->배열 type처럼 보이면서 ""로 나옴(json 규격)

• object를 JSON으로

const rabbit = {
  name: 'tori',
  color: 'white',
  size: null,
  birthDate: new Date(),
  jump: () => {
    console.log(`${this.name} can jump!`);
  },
};
json = JSON.stringify(rabbit);
console.log(json);

// {"name":"tori","color":"white","size":null,"birthDate":"2021-03-08T04:44:40.392Z"}

// jump 함수는 나오지 않는다. 왜냐하면 함수는 object에 있는 data가 아니기 때문에~!!!
// 또한 그 외에 javascript에만 있는 특별한 data도 JSON에 포함되지 않는다!

• callback 함수를 이용하여 더 세밀하게 통제하고 싶을 때.

json = JSON.stringify(rabbit, (key, value) => { 
  console.log(`key: ${key}, value: ${value}`);
  return key === 'name' ? 'hyojin' : value;
});
console.log(json); 

// 이름이 hyojin으로 바뀜
// {"name":"hyojin","color":"white","size":null,"birthDate":"2021-02-21T07:23:17.637Z"}

2) JSON to Object: parse (*분석하다)

const obj = JSON.parse(json, (key, value) => { // --> A
  console.log(`key: ${key}, value: ${value}`); 
  return key === 'birthDate' ? new Date(value) : value;
});
console.log(obj); // {name: "hyojin", color: "white", size: null, birthDate: Mon Mar 08 2021 13:44:40 GMT+0900 (대한민국 표준시)}

rabbit.jump(); // can jump!
// Error (rabbit->JSON(함수x)->obj(함수x))

console.log(rabbit.birthDate.getDate()); 
// 8 (오늘 날짜, Date()라는 object)
console.log(obj.birthDate.getDate()); 
// 8 --> A 에서 key와 value를 이용해 Date를 return해 줘서 Error가 안남

---

✅ overloading
--> 함수의 이름은 동일하지만 매개변수에 차이, 어떤 파라미터를 몇개의 파라미터를 전달하느냐에 따라 각각 다른 방식으로 호출이 가능한 것.