JSON.stringify()와 JSON.parse() 대신 사용할 structuredClone()

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

JavaScript 개발자 (중급 이상)

핵심 요약

• structuredClone()는 JSON.stringify()/JSON.parse()의 한계를 해결하는 내장 메서드로, Date, Map, Set, Circular Reference 등 복잡한 데이터 구조를 깊은 복사 가능
• JSON.stringify()의 문제점: undefined 값 무시, 함수/DOM 요소 처리 불가, 원시 타입으로 강제 변환
• structuredClone() 지원 환경: Chrome 98+, Firefox 94+, Node.js 17.4+

섹션별 세부 요약

1. JSON.stringify()의 한계

• Date, Map, Set, RegExp 등 객체 타입을 원시 값으로 변환
• Circular Reference 시 에러 발생
• undefined 값이 제거됨
• 함수, DOM 요소, WeakMap/WeakSet 처리 불가

2. structuredClone()의 기능

• Date, Map, Set, ArrayBuffer, TypedArray, Blob, File 등 복잡한 객체를 원본 타입 유지하여 복사
• Circular Reference를 자동 처리
• undefined, RegExp 등도 보존
• 코드 예시:

```javascript

const copy = structuredClone(original);

console.log(copy.date instanceof Date); // true

console.log(copy.map instanceof Map); // true

```

3. structuredClone()의 한계

• 함수, DOM 요소, WeakMap/WeakSet, 커스텀 클래스 메서드는 복사 불가
• Node.js 17.4+ 또는 Chrome 98+ 이상에서만 지원

결론

• *structuredClone()는 복잡한 데이터 구조를 안정적으로 깊은 복사할 수 있는 내장 API로, JSON.stringify() 대체 권장. 다만, 함수/WeakMap 등 특정 요소는 지원하지 않으므로** 주의 필요.