[JavaScript] JSON.stringify / 재귀 (2)

S3U1 W9D5

✅ TIL

• JSON
  JSON.stringify
• Tree UI
• JSON.stringify와 Tree UI를 재귀함수로 표현해보기 (깃헙)

JSON

JSON

JSON : JavaScript Object Notation
서로 다른 프로그램 사이에서 데이터 교환을 위해 만들어진 객체 형태의 포맷
자바스크립트를 포함한 많은 언어에서 범용적으로 사용한다.

메세지 객체가 전송 가능한 조건 (transferable condition)

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

JavaScript에서 객체는 타입 변환을 이용해 string으로 변환할 경우 객체 내용을 포함하지 않는다. ([object Object]를 return함)

따라서 객체를 문자열로 변환하기 위해서는 객체를 JSON 형태로 변환하거나, JSON을 객체 형태로 변환한다.

JSON.stringify : 객체를 JSON으로 변환 = 직렬화(serialize)
JSON.parse : JSON을 객체로 변환 = 역직렬화(deserialize)

JSON.stringify

//message 객체를 JSON으로 변환
let objectToJSON = JSON.stringify(message)

console.log(objectToJSON)
>`{"sender": "a", "receiver": "b", "message":"hello" ...}`

console.log(typeof objectToJSON)
>string

위와 같이 발신자는 객체를 직렬화한 문자열(=객체의 내용)을 수신자에게 보낼 수 있다.
수신자는 문자열을 역직렬화할 수 있다.

JSON.parse

//문자열을 객체 형태로 변환
let packet = `{"sender": "a", "receiver": "b", "message":"hello" ...}`
let obj = JSON.parse(packet)

console.log(obj)
>/*
  {
  sender: "a",
  receiver: "b",
  message: "hello"
  ...
  }
*/

console.log(typeof obj)
>object

JSON은 자바스크립트 객체와 다른 것!

JSON 규칙
1. key에 반드시 쌍따옴표를 붙여야 한다.
2. value가 문자열이면 반드시 쌍따옴표를 붙여야 한다.
3. key와 value 사이 공백이 있어도 된다. (자바스크립트 객체에서는 불가능)
4. key-value 쌍 사이에 공백이 있으면 안된다. (자바스크립트 객체에서는 가능)

JSON.stringify 재귀함수로 구현해보기

function stringifyJSON(obj) {
  let result = "";
  
  if(typeof obj === "boolean" || obj === null) return `${obj}`
  if(typeof obj === "string") return `"${obj}"`
  if(typeof obj === "number") return `${obj}`

  if(Array.isArray(obj)){
    if(obj.length === 0) return '[]'
    let array = [];
    for(let ele of obj) {
      array.push(stringifyJSON(ele))
    }
   return `[${array}]`
  }

  if(typeof obj === "object") {
    for(let prop in obj) {
      if(prop === "functions" || prop === "undefined") {return "{}"}
      if(result.length === 0) {
        result += `${stringifyJSON(prop)}:${stringifyJSON(obj[prop])}`
      }
      else{
        result += `,${stringifyJSON(prop)}:${stringifyJSON(obj[prop])}`
      }
    }
  } return `{${result}}`;
};