StringifyJSON

이번 스프린트는 재귀를 이용해 브라우저에서 제공하는 주요 기능 중 하나인 JSON.stringify 함수를 직접 구현할 것입니다.

이전 강의에서 JSON.stringify는 객체를 JSON으로 변경하는 메소드인 것을 배웠습니다. 이 함수를 직접 구현하기 위해서는 재귀 사용을 권장합니다. 왜냐하면 자바스크립트 객체와 JSON은 대표적인 트리 구조를 가졌고, (객체의 값으로 객체를 포함합니다.) 이는 전형적인 재귀 탐색이 가능한 구조이기 때문입니다. 어떻게 풀어야 할지 생각이 잘 나지 않는다면, 코플릿 재귀 문제 풀었던 방법을 다시 기억해보면서 부모와 자식의 구조가 같은 트리 구조는 어떤 조건에 재귀 호출을 하는게 좋을지 고민해보세요.

Getting Started

repository 주소 에서 fork 및 clone 후 Pull Request로 제출하세요

Bare minimum Requirements

• src/stringifyJSON.js에서 stringifyJSON 함수를 직접 구현해보고 spec 테스트를 통과시키세요.

JSON에 관한 나의 정리

업로드 된 코드 github

function stringifyJSON(obj) {
  // 들어오는 obj가 숫자, bool, null 인 경우
  if(typeof obj === 'number' || typeof obj === 'boolean' || obj === null ) {
    // toString() 은 null을 문자열로 변환시키지 못한다.
    return '' + obj;
  }
  // obj가 객체인 경우
  if(typeof obj === 'string') {
    return `"${obj}"`
  }
  // obj가 배열인 경우
  if(Array.isArray(obj)){
    let arr = []; 
    for(let list of obj){
      arr.push(stringifyJSON(list)) 
    }  
    return `[${arr}]`
  }

  if( typeof obj === 'undefined' ){
    return undefined;
  }
  
  // obj가 객체인 경우
  // 여기서 재귀를 발생시킨다.
  if(typeof obj === 'object' || typeof obj === 'function' ) {
    let str = '';
    for(let key in obj) {
      // 해당 value 값이 함수이거나 존재하지 않는다면
      // 마지막 테스트 케이스 통과를 위해서...
      // if(typeof obj[key] === 'function' || undefined) {
      //   return "{}";
      // }
      
      let newKey = stringifyJSON(key)
      let value = stringifyJSON(obj[key])
      str = str + newKey + ":" + value + ',';
      }
      // 맨 마지막 요소를 자른 새로운 배열을 만든다.
      // 맨 마지막에 , 를 잘라줘야 하기 때문 
      str = str.slice(0, -1);
      return `{${str}}`;
  }
  
};

Sprint를 끝마치고 느낀 점

재귀함수로 만들라고 해서 하기는 했는데... 솔직히, for 문과 if 절로만 만드는 게 더 쉬운 것같다.