묵혔다 꺼낸 JS - JSON.stringify

JSON

JavaScript Object Notation = 자바스크립트 객체 표기법이라고 해서 우리가 흔히 백엔드와 프런트엔드의 통신을 할 때 데이터를 주고받는 규격(API)으로 널리 쓰이는 형태임을 익숙히 알고 있을 것이다.
자바스크립트서의 JSON 객체에는 단 두가지의 정적 메서드만이 존재한다.
JSON.stringify(), JSON.parse().
JSON.stringify는 객체를 JSON 문자열화 시켜서 통신을 내보낼 준비를 하기 위해 만들어진 메서드라고 소개할 수 있겠다.
오늘은 이 JSON.stringify에 대해서 사용하는 법을 알아보고자 글을 쓴다.

JSON.stringify()

앞서 설명한 것과같이 문자열화 시킨다고 했는데 어디까지 가능한지 알아보자.
먼저 원시값과 배열, 객체를 넣어보자.

 

 

값을 넣고 실행하면 위와 같이 모두 문자열 화가 되어 출력이 됨을 알 수 있다.

JSON 문자열화가 불가능한 것들, 그리고 문자 열화의 결과.

문자열 화가 불가능한 객체는 다음과 같다.

• undefined
• Function
• Symbol
• 환영 참조 객체

먼저 undefined라는 것 자체가 오직 자바스크립트에서만 사용하니 다른 언어에서 undefined라는 것을 받게 되면 난감한 상황이 펼쳐질 것이라 생각한다.
Function 또한 JSON에서는 변환이 불가능하여 취급을 하지않는다. Symbol도 자바스크립트에서만 사용 중이고...
(환영 참조 객체는 바로 다음에 알아볼 것이다.)
환영 참조 객체를 제외한 나머지의 것들이 배열에 포함되어있으면 모두 "null"을, 객체에 포함이 되어있으면 생략하여 출력한다.

 

 

환영 참조 객체 (Circular References Object)

환영 참조 객체란 객체 프로퍼티의 참조를 무한 순환하게 되는 객체라고 설명할 수 있는데 어느 부분이 무한 순환이라 이런 용어가 나온 지 알아보고 이해하자.

 

 

이런 식으로 만들어진 객체를 환영 참조 객체라고 일컫는다.
설명은 이 정도로 그치고, 결론만 말하면 이 환영 참조 객체를 JSON화 시키면 그 결과는 오류가 발생하는 결과를 낳는다.

 

 

간단히 해석하면 환영 구조는 JSON으로 변환하는데 에러가 난 상황이다.

환영 참조 객체 구출해보기.

너무 당연하지만 저렇게 오류가 나는 코드는 작성해서도 안되고, 할 생각을 해서도 안된다.
그래도 저러한 객체가 나왔을 때 JSON문자열화 시키는 방법이 없는 것은 아니다.

toJSON

toJSON을 객체 속성에 추가 후 구현하여 JSON.stringify()의 value매계변수에 이용하면 toJSON의 메서드로 실행된 평가값이 JSON문자열화가 되는 친구라고 소개할 수 있겠다.
그러면 방금 구현했던 환영 참조 객체를 toJSON을 이용하여 오류를 미연에 방지해보자.

 

 

결과를 보다시피 오류가 나지 않고 정상적으로 작동하고 있다.
먼저 JSON.stringify에서 자동으로 객체 내부에 있는 toJSON을 호출하여 내가 직접 JSON을 만들고자하는 데이터를 리턴 받아해당 데이터를 변환하는 과정으로 이루어진다.
느낀 점으로는 toJSON을 이용하면 이런 오류를 미연에 방지 가능하고, 이뿐만이 아닌 내가 쓸데없는 데이터는 제외하고 필요한 것 만 저렇게 만들어서 보내는 것도 가능하다.

JSON.stringify(value, replacer, space) 각 매계변수를 알아보자.

1번째 매계변수인 value는 우리가 늘 사용했던 객체나 값들을 의미하는 매계변수이다.
2번째 매계변수 replacer는 JSON문자열화 시 문자열화 할 객체의 속성들을 추가나 선택, 필터 할 수 있게 만들어주는 역할을 한다.
3번째 매계변수 space는 JSON문자열화 시 직렬로 출력하여 가독성이 떨어지는데 해당 변수를 사용하여 공백 수를 입력해 이쁜 JSON이 출력되어 눈을 편하게 해주는 기능을 제공한다.