structuredClone으로 JavaScript 딥카피 제대로 하기
문제
JavaScript에서 객체 딥카피 할 때 이런 코드를 많이 쓴다.
const copy = JSON.parse(JSON.stringify(original));
근데 이게 생각보다 함정이 많다.
const obj = {
date: new Date(),
func: () => 'hello',
undef: undefined,
regex: /test/gi,
};
const copy = JSON.parse(JSON.stringify(obj));
console.log(copy);
// { date: "2026-02-13T00:00:00.000Z", regex: {} }
// func, undef는 사라지고 date는 문자열이 됐다
Date는 문자열로 바뀌고, undefined와 함수는 아예 날아간다. 순환 참조가 있으면 에러도 난다.
해결
structuredClone을 쓰면 된다. 브라우저와 Node.js 17+에서 전부 지원한다.
const original = {
date: new Date(),
nested: { a: 1, b: [2, 3] },
set: new Set([1, 2, 3]),
map: new Map([['key', 'value']]),
};
const copy = structuredClone(original);
copy.nested.a = 999;
console.log(original.nested.a); // 1 — 원본 안 변함
console.log(copy.date instanceof Date); // true — Date 객체 유지
console.log(copy.set instanceof Set); // true — Set도 유지
순환 참조도 문제없다.
const obj = { name: 'test' };
obj.self = obj; // 순환 참조
const copy = structuredClone(obj); // 에러 없이 동작
핵심 포인트
JSON.parse(JSON.stringify())는Date,Set,Map,RegExp,undefined를 제대로 복사 못 한다structuredClone은 대부분의 내장 타입을 정확히 복사한다- 단, 함수와 DOM 노드,
Symbol은structuredClone으로도 복사 불가다 - lodash의
cloneDeep없이도 네이티브로 딥카피가 가능한 시대다