JSON.stringify() 메서드란?
자바스크립트로 웹 개발을 하다 보면 데이터를 웹 서버로 전송해야 하는 경우가 자주 발생합니다. 이때 중요한 점은 서버로 전송되는 데이터는 반드시 문자열(string) 형태여야 한다는 것입니다. 그런데 자바스크립트에서 다루는 데이터는 대부분 객체(object) 형태이기 때문에, 객체를 그대로 전송할 수는 없습니다.
이러한 문제를 해결하기 위해 사용하는 것이 바로 JSON.stringify() 메서드입니다. 이 메서드는 자바스크립트 객체 리터럴(object literal)을 JSON 형식의 문자열로 변환해 주며, 직렬화(serialization) 과정이라고도 부릅니다.
기본 문법은 다음과 같습니다.
JSON.stringify(value[, replacer[, space]])
- value: 문자열로 변환할 대상 객체 또는 값 (필수)
- replacer: 변환 과정에서 특정 속성을 필터링하거나 가공하는 함수 또는 배열 (선택)
- space: 결과 문자열의 들여쓰기 간격을 지정하는 숫자 또는 문자열 (선택)
그럼 실제 예제를 통해 JSON.stringify()가 어떻게 동작하는지 살펴보겠습니다.
예제 1: 기본 객체를 문자열로 변환하기
이름, 나이, 도시 정보를 담은 단순한 객체를 JSON 문자열로 변환하는 예제입니다.
<html>
<body>
<p id="demo"></p>
<script>
var obj = {name:"rekha", age:40, city:"newyork"};
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;
</script>
</body>
</html>출력 결과
{"name":"rekha","age":40,"city":"newyork"}위 예제에서 볼 수 있듯이, 원래 객체였던 obj가 큰따옴표로 감싸진 키와 값으로 구성된 JSON 문자열로 변환된 것을 확인할 수 있습니다. 이렇게 변환된 문자열은 서버로 안전하게 전송될 수 있습니다.
예제 2: 중첩된 객체(배열 포함) 변환하기
JSON.stringify()는 객체 내부에 배열이나 다른 객체가 중첩되어 있어도 모두 정상적으로 문자열로 변환합니다.
<html>
<body>
<p id="demo"></p>
<script>
var obj = {"name":"ramesh","age":30,"family":
[{"mother":"geetha","father":"rao"}],"city":"berlin"};
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;
</script>
</body>
</html>출력 결과
{"name":"ramesh","age":30,"family":[{"mother":"geetha","father":"rao"}],"city":"berlin"}예제 2처럼 family라는 배열 안에 부모 정보를 담은 객체가 중첩되어 있어도, JSON.stringify()는 전체 구조를 그대로 유지한 채 하나의 문자열로 만들어 줍니다.
JSON.stringify() 사용 시 주의사항
- 함수(function)와 undefined는 변환 과정에서 자동으로 제외됩니다.
- Date 객체는 ISO 8601 형식의 문자열(예: "2024-01-01T00:00:00.000Z")로 변환됩니다.
- NaN, Infinity는 null로 변환됩니다.
- 순환 참조(circular reference)가 있는 객체를 변환하면 TypeError가 발생합니다.
마무리
JSON.stringify()는 자바스크립트 객체를 서버 전송용 문자열로 변환하는 필수적인 메서드입니다. 반대로 서버에서 받은 JSON 문자열을 다시 객체로 변환할 때는 JSON.parse() 메서드를 사용합니다. 이 두 메서드는 항상 짝을 이루어 사용되므로 함께 익혀두면 클라이언트와 서버 간 데이터 통신을 훨씬 수월하게 처리할 수 있습니다.