[개발기초] JSON.stringify구현하기 - 3주차 (3)

👨‍💻 잘 봐도 모르겠다니까?

function 잘본다(본다) {
   if(본다 === 이해한다) return true;
   잘본다(본다)
}

오전내내 탈출조건을 찾을 수 없었다.

오늘 오전에 받은 과제는 JSON.stringify method를 직접 코드로 구현해보는 것이다.

🤨 나는 이 함수와 조금 깊은 인연이 있다.

🇺🇸
사실 미국LA 금융회사에서 인턴할 때 credit팀에서 자산 포트폴리오 데이터 정리 프로젝트를 끝낸 후 회사 내부 intra net에 정리한 데이터를 올리기 위해 tech팀과 협업하며 봤었다.
그때는.. 코딩 지식이 아무것도 없었기 때문에(지금도 그렇긴 함) JSON이 뭔가? 사람이름인가? 정도로 생각했었다.

지금 생각해보면 내가 정리한 exel file의 data들을(아마 string, number등 다양한 data type이 섞여 있었을 것임) tech팀에서 JSON.stringify와 JSON.parse를 통해 규격화된 데이터를 회사 내부망에 올렸을 것이라 이해가 된다.
이때 tech팀과 협업한 경험(+CEO Michael)이 지금 내가 코딩에 대한 열정을 가질 수 있도록 만들었고 부트캠프를 할 수 있도록 이끌었는데 Michael때문에 분노가 아직 가시지 않았지만 난 Antifragile하니까..

아무튼 JSON.stringify는 이렇게 데이터 교환을 만들어진 객체 형태의 포맷이다.

JSON.stringify를 직접 코드로 짜봤다.

 function stringifyJSON(obj) {
  
  if(typeof obj ==='boolean' || typeof obj ==='number' || obj === null){
    return String(obj)
    //boolean, number, null값이 오면 객체를 string type으로 변환한다.
  }
  if(typeof obj ==='string'){
    return `"${obj}"`
    //string type이 오면 ""를 붙여서 return한다.
  }
  if(typeof obj ==='undefined' ||typeof obj ==='function'){
    return 'undefined';
    //undefined or function이 객체의 요소로 들어오면 undefined를 return한다.
  }

  if(Array.isArray(obj)){
    let newArr = [];
    for(let item of obj){
        newArr.push(stringifyJSON(item))
    } 
    //객체 obj의 요소들을 순회하며 stringifyJSON함수를 통해 각 tyep들에 알맞은 값을 도출하게 한다.
    //그리고 그것을 새로운 newArr에 push한다.
    //만약 객체안에 배열이 있고 또 그 안에 많은 양의 배열이 있더라도 재귀 과정을 통해 해체된다.
    //해체되기는 하지만 해체된후 다시 재귀를 벗어나는 과정에서 존재하던 배열은 나올때 그대로 쌓여서 나온다. 
    return `[${newArr}]` 
    //참고로 ${ }안의 값들은 문자열로 자동 반환됨
  }

  if(typeof obj ==='object' && obj!==null){
    //javascript는 null도 object로 인식하기 때문에 null이 아닌 경우를 포함시켜야 진짜 object만 걸러진다.
    let str = '';
      for (let key in obj) {
        if (typeof obj[key]==='function' || obj[key] === undefined) {
          return "{}";
        }
        let newKey = stringifyJSON(key); //key -> 사실상 string값으로 들어가고 재귀되면 ""이 붙여져서 돌아옴
        let newValue = stringifyJSON(obj[key]);//key의 값(value) -> 객체 값으로 boolean, number, null등이 들어와도 위의 과정을 통해 다 정제되어 돌아옴
        str = str+ newKey + ":" + newValue+',';
      }
      str = str.slice(0, -1); //마지막 쉼표 버리기
      return `{${str}}`;
  } 
};

//Test Code
const stringifiableObjects = [
  9,
  null,
  true,
  false,
  "Hello world",
  [], 
  [8],
  ["hi"],
  [8, "hi"],
  [1, 0, -1, -0.3, 0.3, 1343.32, 3345, 0.00011999],
  [8, [[], 3, 4]],
  [[[["foo"]]]], 
  {},
  { a: "apple" },
  { foo: true, bar: false, baz: null },
  { "boolean, true": true, "boolean, false": false, null: null },
  // basic nesting
  { a: { b: "c" } },
  { a: ["b", "c"] },
  [{ a: "b" }, { c: "d" }],
  { a: [], c: {}, b: true },
];

💬
어제 너무 피곤해서 오늘 일어나자마자 잠도 덜 깬 상태로 이 과제를 풀기 시작했는데 오전 내내 하나도 모르겠다가 오늘 새벽 블로그를 적을 때 쯤에야 거의 이해가 된다.
혼자 처음부터 풀라고 하면 또 잘 모르겠지만 앞으로 여러 다른 문제들을 마주하며 더 성장할 것이라고 확신한다.