JSON.stringify() 메서드는 객체를 문자열로 변환하는 기능뿐만 아니라, 객체 내부에 포함된 함수(function)를 자동으로 제거하는 역할도 합니다. 이번 글에서는 JSON.stringify()를 활용해 객체에서 함수를 손쉽게 제거하는 방법을 예제와 함께 자세히 살펴보겠습니다.
JSON.stringify()가 함수를 제거하는 원리
JSON(JavaScript Object Notation)은 데이터 교환을 위한 경량 형식으로, 표현 가능한 값의 종류가 제한적입니다. JSON 형식에서는 문자열, 숫자, 불리언, 배열, 객체, null만 표현할 수 있으며, 함수는 JSON 사양에 포함되지 않기 때문에 직렬화 과정에서 자동으로 생략됩니다. 바로 이 특성을 활용하면 별도의 필터링 로직 없이도 객체에서 함수 프로퍼티를 간편하게 제거할 수 있습니다.
예제 1 – 함수 타입 프로퍼티 제거하기
다음 예제에서 'designation' 프로퍼티는 함수입니다. 객체를 JSON.stringify()로 직렬화하면 해당 함수는 제거되고, 나머지 일반 프로퍼티만 출력되는 것을 확인할 수 있습니다.
<html>
<body>
<p id="stringify"></p>
<script>
var person = { name: "Rahim", designation: function () {return developer;},
city: "Hyderabad" };
var myJSON = JSON.stringify(person);
document.getElementById("stringify").innerHTML = myJSON;
</script>
</body>
</html>출력 결과
{"name":"Rahim","city":"Hyderabad"}출력 결과를 보면 'designation' 함수가 사라지고 'name'과 'city' 프로퍼티만 남아 있는 것을 알 수 있습니다.
예제 2 – 다른 위치의 함수 프로퍼티 제거하기
이번에는 'name' 프로퍼티가 함수로 정의된 경우입니다. 마찬가지로 JSON.stringify()로 객체를 직렬화하면 함수는 제거되고, 나머지 프로퍼티들만 출력됩니다.
<html>
<body>
<p id="stringify"></p>
<script>
var person = { name: function () {return Ram + Rahim;},
designation:"Developer" , city: "Hyderabad" };
var myJSON = JSON.stringify(person);
document.getElementById("stringify").innerHTML = myJSON;
</script>
</body>
</html>출력 결과
{"designation":"Developer","city":"Hyderabad"}'name' 함수가 제거되고 'designation'과 'city' 프로퍼티만 결과에 포함된 것을 확인할 수 있습니다.
정리 및 추가 팁
JSON.stringify()는 함수뿐만 아니라 undefined, Symbols 같은 JSON에서 지원하지 않는 값들도 직렬화 과정에서 자동으로 제외합니다. 따라서 서버로 데이터를 전송하기 전에 객체를 정리하거나, 순수 데이터만 담은 새로운 객체를 만들고 싶을 때 매우 유용하게 활용할 수 있습니다.
다만 주의할 점도 있습니다. 원본 객체 자체가 변경되는 것은 아니며, 직렬화된 결과물에서만 함수가 제거됩니다. 만약 원본 객체에서 함수를 실제로 삭제하고 싶다면 delete 연산자(예: delete person.designation)를 사용하거나, 구조 분해 할당과 나머지 연산자를 조합해 새로운 객체를 생성하는 방법을 사용할 수 있습니다.