JSON.stringify / JSON.parse

Achievement Goals

• JSON 구조가 재귀 함수를 사용할 수 있는 Tree 구조임을 이해할 수 있다. (stringifyJSON)
• JSON.stringify 와 JSON.parse 가 seriealize, deserialize라는 것을 이해할 수 있다.
• JSON.stringify 와 JSON.parse 를 사용하여 자바스크립트 값과 JSON을 넘나들 수 있다.
• JSON에 재귀 호출을 사용할 때, 어디에 사용해야 할지 이해할 수 있다.

JSON

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

메시지 객체가 전송 가능하려면(transferable condition)

• 수신자(reciever)와 발신자(sender)가 같은 프로그램을 사용한다.
• 또는, 문자열처럼 범용적으로 읽을 수 있어야 한다.

const message = {
  sender: "김코딩",
  receiver: "박해커",
  message: "해커야 오늘 저녁 같이 먹을래?",
  createdAt: "2021-01-12 10:10:10"
}

-> 객체는 타입 변환을 이용해 String으로 변환할 경우 객체 내용을 포함하지 않습니다.

해결방법

• 객체를 JSON의 형태로 변환하는 방법
  JSON.stringify : Object type을 JSON으로 변환합니다.
  stringify하는 이 과정을 직렬화(serialize)한다고 합니다.

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

• JSON을 객체의 형태로 변환하는 방법
  JSON.parse : JSON을 Object type으로 변환합니다.
  JSON.parse를 적용하는 이 과정을 역직렬화(deserialize)한다고 합니다.

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`

• JSON 기본 규칙
  

또한 JSON은 키와 값 사이, 그리고 키-값 쌍 사이에는 공백이 있어서는 안됩니다.

출처: 코드스테이츠