2021년 5월 12일 코드스테이츠 DAY-38 JSON.stringify 구현 관련 정리

JSON.stringify를 함수로 구현해보는 스프린트와

 

재귀함수를 이용하여 Tree UI를 만드는 스프린트의 리뷰 시간에

 

스스로 정리해보면 좋을 질문을 주었고 이에 스스로 답을 해보고자 한다. 

 

 

왜 우리는 배열과 객체를 원시타입과 똑같은 방식으로 문자열화를 시키면 안 되는가?

 

원시타입을 문자열로 바꾸는 메소드인 String()을 사용하면 어떻게 나오는지 코드로 확인해보자. 

let arr = [1, 2, 3]
undefined
String(arr)
"1,2,3"
//괄호가 벗겨진, 즉 더 이상 배열임을 알아차릴 수 없는 상태가 되었다. 

let obj = {
    name : 'Charles',
    age : 29,
    job : 'developer'
}
undefined
String(obj)
"[object Object]"
//객체의 키와 value를 알아 볼 수 없는 상태임을 알 수 있다.

 

객체를 일반적으로 문자열화시키면 어떻게 나오는가? => 그것을 해결방법은 무엇인가?

 

객체를 일반적인 방법으로 문자열화 시키면 나오는 결과는 위 질문의 코드로 확인할 수 있다. 

    let str = '';
    for (let el in obj) {
        let key1 = stringifyJSON(el);
        obj[key1] = stringifyJSON(obj[el]);
        str = str + `${key1}:${obj[key1]},`//마지막에 ','가 출력되므로 아래 slice로 처리
    }
    return `{${str.slice(0, -1)}}`

위와 같이 for in으로 object의 키와 값을 순회하며 문자열로 만들어야 하고

 

이를 빈문자열에 객체의 형태로 template literal에 넣어주어야 객체의 형태를 가진 문자열을 얻을 수 있다. 

 

배열을 문자열화할 때 왜 요소마다 재귀를 해야 하는가? 어떻게 할 수 있는가?

 

(배열과 객체의 내부에는 다양한 타입이 들어갈 수 있기 때문에,

 

배열, 객체에 존재하는 각각의 타입에 맞게 문자열화 시켜줘야 한다.) 

 

사실 이 부분은 내가 답을 못했던 부분이었는데 전에 페어를 했던 분께서 말씀을 해주셨다. 

 

아래와 같은 방식으로 재귀함수를 걸어주어서 각각의 요소를 문자열화 시킬 수 있다. 

      for(let i=0; i < obj.length; i++){
        temp.push(stringifyJSON(obj[i]))
      }return `[${temp}]`;