stringifyJSON 과제

hyo·2022년 8월 22일
0
post-thumbnail

stringyfyJSON

과제를 풀기전 JSON에 대하여 간단히 알아보자.

JSON

JSON은 JavaScript Object Notation의 줄임말로,
데이터 교환을 위해 만들어진 객체 형태의 포맷이다.
네트워크를 통해 어떤 객체내용을 다른 프로그램에 전송한다고 가정했을때,
이 객체 내용을 일종의 메신저 혹은 채팅 프로그램에서 쓰는 하나의 메세지라고 한다면, 아래의 객체를 어떻게 전송할까??

 const obj = {
   sender: 'hyo',
   receiver: 'woo',
   message: '안녕'
 }

메세지 객체가 전송 가능하려면, 메세지를 보내는 발신자와 메시지를 받는 수신자가 같은 프로그램을 사용하거나, 문자열처럼 범용적으로 읽을수 있는 형태여야 한다.

  • 전송 가능 조건
  1. 수신자와 발신자가 같은 프로그램을 사용하거나,
  2. 문자열처럼 범용적으로 읽을 수 있어야 함 여기서 그럼 객체내용을 toString(), String() 같은 메서드를 사용하여 문자열로 변환하면 되지 않을까? 라고 생각이 들었다.
    하지만 객체는 위의 메서드를 사용하면 [objec Object]라는 결과를 리턴한다.

->

위 문제를 해결하는 방법은 객체를 JSON의 형태로 변환하거나 JSON을 객체의 형태로 변환하는 방법이다.

->

JSON.stringyfy() : 객체를 JSON으로 변환
JSON.parse() : JSON을 객체로 변환

stringyfyJSON 과제

stringyfyJSON() 함수에 인자가 들어가면 문자열로 바꿔주는 로직을 만들어본다.
JSON.stringyfy()메서드를 쓰면 바로 해결되지만 이 함수를 만들어본다.

의사코드

// 숫자, 불린, 문자가 들어가면 ""로 감싸주고 리턴
// null은 "null"로 리턴
// 인자가 배열일 경우 배열안의 요소도 문자열로, 배열자체도 문자열로 ""씌워주고 리턴
// 인자가 객체일 경우 키와값 둘다 제각각 "" 씌워주고 객체 전체에 ""로 씌워 문자열로 리턴
// 키가 'functions'또는 undefined 이거나 값이 undefined이면 그냥 빈객체 리턴 -> {}

function stringyfyJSON() {
  if(typeof obj === 'number' || typeof obj === 'boolean'){
    return obj.toString(); 
  }
  if(obj === null){
    return "null"; // null은 typeof로 판별 불가라서 따로 뽑아서 써줬다.
  }
  if(typeof obj === 'string'){
    return `"${obj}"`; // 문자열에 ""를 씌워줘야하므로 따로 빼서 리턴
  }
  if(Array.isArray(obj)){ // obj가 배열일 경우
    let arr = [];
    for(let el of obj){ // obj = ["hi"]
      arr.push(stringifyJSON(el)); // arr.push(stringifyJSON("hi")) -> '"hi"' -> arr = ['"hi"']
    }
    return `[${arr}]`; // `${arr}` 을 해줄 경우 배열이 벗겨지고 출력된다. 그러므로 [] 한번더 감싸주고 리턴!
  }
   
  if(typeof obj === 'object'){
    let result = ''; // 빈객체를 선언하고 빈객체에 줄줄이 넣어주는 식으로 해보았지만 마지막에 어쨋든 객체에 따옴표를 입혀주는 식이라 [object Object]가 출력돼서 아예 빈문자열에 넣어주는 식으로 로직을 썻다.
    
    for(let key in obj){
      if(key === 'functions' || key === undefined){
        return '{}'
      }
      result = result + `${stringifyJSON(key)}:${stringifyJSON(obj[key])}` + ',';
    }
    return `{${result.slice(0, result.length - 1)}}`;
  }
}
profile
개발 재밌다

0개의 댓글