[5] JSON

🏁 JSON

JSON은 클라이언트와 서버 간의 HTTP 통신을 위한 자바스크립트에 종속되지않은 텍스트 데이터 포맷이다. 자바스크립트의 객체와 유사하게 키와 값으로 구성되어있는 순수한 텍스트다.

• 서버와 클라이언트 통신
  
  

• json에서 string 형식으로 내보내며, 브라우저에서 string 타입을 받아서,
  다시 오브젝트로 변환하여 보여준다.
  serialize: 클라이언트가 서버로 객체를 전송하려면 객체를 문자열화해야 하는데 이를 직렬화라고 한다.
  
  deserialize: 서버로부터 클라이언트에게 전송된 데이터는 문자열이다. 이 문자열을 객체로 사용하려면 문자열을 객체화 해야하는데 이를 역질렬화라고 한다.

🏁 stringify() & parse()

1. stringfy

json 객체를 String로 변환한다.

const rabbit = {
  name: 'tori',
  color: 'white',
  size: 'null',
  brithDate : new Date(),
  jump: ()=> {
    console.log(`${name} can jump!`);
  },
};
json = JSON.stringify(rabbit);
console.log(json);
/* {\"name\":\"tori\",\"color\":\"white\",\"size\":\"null\",\"brithDate\":\"2022-02-13T14:35:35.521Z\"}*/

✅ 토끼 객체에서 이름만 json으로 하고 싶다면?

json = JSON.stringify(rabbit, ['name']);
console.log(json);
/*{\"name\":\"tori\"}*/

✅ 콜백함수 사용

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

모든 키와 값들이 콜백함수에 전달되는 것을 확인할 수 있다. 특이한 점은 첫번째로 전달되는 것은 토끼 객체를 감싸고 있는 제일 최상위 것이 전달된다. 그 뒤부터 키와 값들이 전달된다.

json = JSON.stringify(rabbit, (key, value)=>{
    return key === 'name' ? 'ellie' : value ;
   // key 가 name 일때 value를 ellie로 설정하고, 그렇지 않을 경우에는 원래 value로 반환한다.
});
console.log(json);

2. parse

json 객체를 json 객체로 변환한다.

json = JSON.stringify(rabbit);
const obj = JSON.parse(json);
console.log(obj);

String으로 만들어진 json으로부터 다시 오브젝트로 만들 경우에는 원래 객체안에 포함되어 있던 함수는 포함되지 않는다.

✅ stringify 메서드와 마찬가지로 콜백함수를 사용할수 있다!

json = JSON.stringify(rabbit);
const obj = JSON.parse(json, (key, value)=>{
  console.log(`key: ${key}, value: ${value}`);
  return value;
});

드림코딩 강의를 듣고 작성하였습니다.