TIL Day-22

hyeongirlife·2021년 10월 7일

TIL

목록 보기

23/90

JSON.stringify 이해하기

Achievement Goals

JSON.stringify 와 JSON.parse 가 seriealize, deserialize라는 것을 이해할 수 있다.

JSON.stringify 와 JSON.parse 를 사용하여 자바스크립트 값과 JSON을 넘나들 수 있다.

JSON에 재귀 호출을 사용할 때, 어디에 사용해야 할지 이해할 수 있다.

JSON 이란?

Javascript Object Notation의 줄임말로, 데이터 교환을 위해 만들어진 객체 형태의 포맷이다.

JSON.stringify 이란?

JSON.stringify()는 객체를 JSON으로 변환하는 메소드다.

네트워크를 통해 데이터를 주고받을 때, 하나의 객체 메시지를 보낸다고 가정해보자.
const message = {
  sender: "코너",
  receiver: "존존스",
  message: "존스야 오늘 저녁 같이 먹을래?",
  createdAt: "2021-01-12 10:10:10"
}
여기서 전송 가능한 조건

수신자와 발신자가 같은 프로그램을 사용한다.

또는 문자열처럼 범용적으로 읽을 수 있어야 한다.

문자열 처럼 읽기 위해 객체타입의 메시지에 String()을 씌워주면 [object Object]라는 결과를 얻게된다. 이건 그냥 JS 만든 사람이 이렇게 정의했으므로 걍 외워
따라서 이 문제를 해결하기 위해
JSON.stringify() : 객체타입 자료를 JSON 형태로 변환한다.
JSON.parse() : JSON 형태 자료를 객체타입으로 변환한다.

객체를 JSON타입으로 바꾸는 과정

let transferableMessage = JSON.stringify(message)
console.log(transferableMessage)  // `{"sender":"코너","receiver":"존존스","message":"존스야 오늘 저녁 같이 먹을래?","createdAt":"2021-01-12 10:10:10"}`
console.log(typeof(transferableMessage)) // `string`

여기서 JSON 형태로 변하는 과정을 직렬화(serialize)라 한다.

JSON타입을 객체로 바꾸는 과정

let packet = `{"sender":"코너","receiver":"존존스","message":"존스야 오늘 저녁 같이 먹을래?","createdAt":"2021-01-12 10:10:10"}`
let obj = JSON.parse(packet)
console.log(obj)
/*
 * {
 * sender: "김코딩",
 * receiver: "박해커",
 * message: "해커야 오늘 저녁 같이 먹을래?",
 * createdAt: "2021-01-12 10:10:10"
 * }
 */
 console.log(typeof(obj))
 // `object`