JSON.stringify() 원리를 재귀함수로 직접 만들어보다가 헷갈리는 문자열 표현 방법 정리
JSON.stringify 메서드는 객체를 JSON 포맷의 문자열로 변환한다.
일단, 들어오는 요소가 모두 문자열로 변환되어야하고 최종 객체 또한 문자열이 되어야하는 것이 포인트이다.
인자의 타입이 boolean, number 이거나, 인자자체가 null일 경우에는 한겹 ‘’ 씌운 문자열을 감싸준다.
인자가 문자열일경우에는, 문자열 자체에 또 한겹 씌운 ‘””’ 문자열을 반환한다.
그리고 배열과 객체의 경우, 각 요소 또한 문자열로 변환되어야 하기때문에 요소의 타입을 확인하면서 문자열로 변환시켜주는 게 필요한데, 이때 재귀함수를 사용한다.
여기서 나를 정말 고통받게 만든건 …
테스트파일에서 돌려보면 분명!! 숫자, 불리언, 문자열일 경우엔 따옴표가 감싸진게 눈에 보이게 나타나있다.
객체는 문자열 “9”로 변환되어야 합니다
객체는 문자열 “null”로 변환되어야 합니다
객체는 문자열 “true”로 변환되어야 합니다
객체는 문자열 “false”로 변환되어야 합니다
객체는 문자열 ““Hello world”“로 변환되어야 합니다
그런데, 숫자와 문자열을 포함하고있는 배열의 경우
[8, "hi"]
내가 예상했을때는 분명, ‘[‘8’,’“hi”’]’ 의 형태로 나타나야할 것 같은데,
결과값은 ‘[8,”hi”]’ 이렇게 배열의 요소에는 string 겹이 안겹쳐져있는 상태?로 나와야 한다는게 아닌가…?
이게 도저히 이해할 수 가 없었다. 재귀를 거치면 당연히 8은 숫자요소니까 얘도 string형태로 변환되고, “hi”는 문자열이니까 당연히 double로 된 문자열 ‘“hi”‘이어야 되는것 같은데…
그런데 콘솔에 찍어보니 결국 8, “hi” 모두 문자열의 형태였다.
즉 내가 예상하는대로 실제 값은 문자열 타입으로 변환된 값이지만, 표현되는건 문자열이 벗겨진 상태로 표현되는 것 같다.
마치, 그냥 문자열 “choco” 이 있을때, choco라는 값 자체는 ‘choco’이지만, 콘솔에 찍어보면 그냥 choco 로 나오는 것 처럼 실제로는 배열, 객체 안의 모든 요소가 string 의 형태인 것이다.
문자열”” 을 감싸고 있는 ‘””’ 문자열 형태도 콘솔에 찍어보았는데, 실제 가지고있는 값은 ‘””’ 두겹 문자열일지라도 콘솔에는 한겹 “” 으로만 보여진다.
마찬가지로 실제로 JSON.stringify() 메서드를 사용해서 object를 serialize화 시켰을때도, 이 변수의 실제 값은 문자열로 변환된 ‘{}’ 객체인 것이고, 표현은 그냥 {} 객체로 된다는 것
배열, 객체의 요소가 숫자형이나 true, false의 boolean 값 일때는 string ‘’ 이 아예 없는 썡(?)값으로 보여지고, 문자형일때는 “” 한겹만 씌어진 문자형으로 보여서 너무 헷갈렸다.
그런데 알고보니 모든 요소는 이미 다 string 타입으로 변환이 된것이었고, 눈에 보이는 표현 방식이 콘솔에 찍히는 것처럼 문자열 “” 따옴표가 벗겨져서 나타난다는 것이 오늘의 레슨이다.
(다른 테스트케이스와 표현 형식?을 맞추려면 문자열 “9”로 변환되어야 합니다가 아닌 문자열 9로 변환되어야 합니다. 이렇게 실제로 보여지는 값 자체를 보여줘야 되는 듯…)
어쨌든 중요한건 JSON.stringify() 메서드는 객체를 싹 다 문자열 형태로 만든다는 것. 요소도 다 하나하나 찾아서 모든 요소를 하나도 빠짐없이 모두 다 문자형으로 만든다는게 여기서 알아야될 포인트이다.