[S3-Unit01] 자료구조/알고리즘 - JSON.stringfy 함수를 직접 구현해보기
포스트
취소

[S3-Unit01] 자료구조/알고리즘 - JSON.stringfy 함수를 직접 구현해보기

JSON.stringfy()란?
JSON.stringfy() 메서드는 JavaScript 값이나 객체를 JSON 문자열로 변환한다.

JSON.stringfy 함수 구현

과제 Rule

  1. JSON.stringfy 함수는 input 값을 JSON 형식으로 반환한다.
    • 단, undefined와 function은 JSON으로 생략되거나 null로 변환된다.
  2. stringfyJSON은 아래와 같이 작동한다.
    • Boolean이 input으로 주어졌을 경우
      1
      
      stringfyJSON(true);  // 'true'
      
    • String이 input으로 주어졌을 경우
      1
      
      stringfyJSON('foo');  // '"foo"'
      
    • Array가 input으로 주어졌을 경우
      1
      
      stringifyJSON([1, 'false', false]);  // '[1,"false",false]'
      
    • Object가 input으로 주어졌을 경우
      1
      
      stringifyJSON({ x: 5 });  // '{"x":5}'
      
    • undefined, function이 주어졌을 경우
      1
      2
      3
      
      stringifyJSON(undefined)  // undefined
         stringifyJSON(function(){})  // undefined
         stringifyJSON({ x: undefined, y: function(){} })  // '{}'
      
  3. spec/stringifyJSONSpec.js의 stringifiableObjects 배열을 참고해서 테스트에서 어떤 input 값들이 주어지고, 어떻게 stringify해 주어야 할지 생각해야 한다.


[테스트 하는데 사용되는 데이터]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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 },
];


👩🏻‍💻 CODE

구현한 stringifyJSON 함수는 다음과 같다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
function stringifyJSON(obj) {
  if (obj === null) {
    return "null";
  }
  if (Array.isArray(obj)) {
    let newArr = [];
    if (obj.length !== 0) {
      obj.forEach((el) => {
        newArr = [...newArr, stringifyJSON(el)];
      });
    }
    return `[${newArr}]`;
  } else if (typeof obj === "object") {
    let str = "";

    for (let key in obj) {
      if (obj[key] === undefined || typeof obj[key] === "function") {
        continue;
      } else {
        let tmpKey = stringifyJSON(key);
        let tmpValue = stringifyJSON(obj[key]);

        str += `${tmpKey}:${tmpValue}` + ",";
      }
    }
    return `{${str.slice(0, -1)}}`;
  }

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


💡 풀이

1. 문자열이 주어졌을 때 따옴표로 감싸서 반환해준다.

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

2. Number와 Boolean이 주어졌을 때 문자열로 반환해준다.

1
return obj.toString();

3. null 값이 주어졌을 때 큰따옴표로 감싼 null로 반환해준다.

1
2
3
if (obj === null) {
	return "null";
}

4. 배열이 주어졌을 때 재귀를 이용하여 새로운 배열로 반환해준다.

1
2
3
4
5
6
7
8
9
if (Array.isArray(obj)) {
  let newArr = [];
  if (obj.length !== 0) {
    obj.forEach((el) => {
      newArr = [...newArr, stringifyJSON(el)];
    });
  }
  return `[${newArr}]`;
}

5. 객체가 주어졌을 때 재귀를 이용하여 새로운 객체로 반환해준다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
if (typeof obj === "object") {
    let str = "";

    for (let key in obj) {
      if (obj[key] === undefined || typeof obj[key] === "function") { // undefined, function일 경우 다음으로 넘어가게끔 ...
       continue;
      } else {
        let tmpKey = stringifyJSON(key);
        let tmpValue = stringifyJSON(obj[key]);

        str += `${tmpKey}:${tmpValue}` + ",";
      }
    }
    return `{${str.slice(0, -1)}}`; // 마지막에 쉼표(,) 제외
  }


Reference

CODESTATES (SEB_FE_43)

이 기사는 저작권자의 CC BY 4.0 라이센스를 따릅니다.