[S3 - U1 과제] stringifyJSON

젬마·2022년 10월 24일

codestates

목록 보기

10/18

개요

자바스크립트 내장함수인 JSON.stringify() 메서드를 재귀를 사용하여 구현해보는 과제이다.

JSON.stringify()

JSON.stringify() 메서드는 JavaScript 값이나 객체를 JSON 문자열로 변환한다. 전달인자의 유형에 따라 결과가 조금씩 달라지므로 주의해야 한다.

JSON.stringify(9); //number 타입: '9'
JSON.stringify(null); // null: 'null'
JSON.stringify(true); //boolean 타입: 'true'
JSON.stringify("Hello world"); //string 타입: '"Hello world"'
JSON.stringify(function); //function 타입: undefined
JSON.stringify(undefined); //undefined: undefined
JSON.stringify([]); // array 타입: '[]'
JSON.stringify(["apple", "banana"]); //array 타입: '["apple","banana"]'
JSON.stringify([undefined, function]); //array의 element가 undefined, function일 때: '[null,null]'
JSON.stringify({}); //object 타입: '{}'
JSON.stringify({a:"apple"}); //object 타입: '{"a":"apple"}'
JSON.stringify({a:undefined, b:function}); //object의 value가 undefined, function일때: '{}'
JSON.stringify({undefined:undefined, function:function}); //object의 key, value가 둘 다 function, undefined일 때: '{}'

풀이

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

  if (typeof obj === "string") {
    return `"${obj}"`;
  }

  if (Array.isArray(obj) === true) {
    let result = "";
    for (el of obj) {
      if (typeof el === "function" || el === undefined) {
        result += null + ",";
      } else {
        result += stringifyJSON(el) + ",";
      }
    }
    result = result.slice(0, result.length - 1);
    return `[${result}]`;
  }

  if (typeof obj === "object") {
    let result = "";

    for (key in obj) {
      if (typeof obj[key] === "function" || obj[key] === undefined) {
        continue;
      }
      result += stringifyJSON(key) + ":" + stringifyJSON(obj[key]) + ",";
    }
    result = result.slice(0, result.length - 1);
    return `{${result}}`;
  }
}

코드를 설명하면 다음과 같다.

obj가 number 타입 || boolean 타입 || null일 때:

-템플릿 리터럴을 사용하여 문자열로 변환

obj가 string 타입일 때:

-템플릿 리터럴을 사용하여 앞뒤로 "를 붙여줌

obj가 array 타입일 때

-결과값으로 출력할 빈 문자열 result를 선언해줌
-obj의 전체 요소 el에 대해 반복문을 돌림
3-1. obj의 n번째 요소가 function이거나 undefined일 때:
-result에 null + "," 가 추가됨
3-2. 그 외의 경우
-el이 원시 타입인지, 배열이나 객체인지 알 수 없으므로 (후자의 경우에 해당하는 요소가 얼마나 있는지 === 반복문을 몇 번이나 돌려야 하는지 알 수 없음) 재귀함수를 사용
-반복문이 끝난 후 slice를 사용하여 result의 제일 마지막에 붙어있는 ","를 제거해줌
-위의 결과를 템플릿 리터럴을 사용하여 `[${result}]` 로 리턴해줌

obj가 object 타입일 때

-결과값으로 출력할 빈 문자열 result를 선언해줌
-obj의 전체 key에 해당하는 key에 대해 반복문을 돌림
4-1. obj[key]가 function이거나 undefined일 때:
-continue문을 사용, 해당 if문을 건너뛰어 stringify되지 않게 함
4-2. 그 외의 경우
-array 타입의 경우와 같은 이유로 재귀함수를 사용
-반복문이 끝난 후 slice를 사용하여 result의 제일 마지막에 붙어있는 ","를 제거해줌
-위의 결과를 템플릿 리터럴을 사용하여 `{${result}}`로 리턴해줌