JavaScript에서 객체를 깊은 복제(deep clone)한다는 것은 원본 객체와 완전히 독립적인 새로운 객체를 만드는 것을 의미합니다. 이렇게 하면 복사본의 속성을 변경해도 원본 객체에는 아무런 영향을 주지 않습니다.
가장 널리 사용되는 방법은 JSON.stringify()로 객체를 문자열로 변환한 뒤, JSON.parse()로 다시 객체로 변환하는 것입니다. 이 방식은 중첩된 객체까지 모두 새롭게 생성되므로 깊은 복제가 가능합니다.
예제
다음은 JavaScript에서 객체를 깊은 복제하는 전체 코드입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result {
font-size: 18px;
font-weight: 500;
color: rebeccapurple;
}
</style>
</head>
<body>
<h1>Deep cloning an object in javascript</h1>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>Click the above button to deep clone the obj object</h3>
<script>
let BtnEle = document.querySelector(".Btn");
let resEle = document.querySelector(".result");
let obj = {
firstName: "Rohan",
lastName: "Sharma",
age: 22,
rollNo: "A12",
};
let obj1 = JSON.parse(JSON.stringify(obj));
BtnEle.addEventListener("click", () => {
obj.firstName = "Mohit";
resEle.innerHTML = "obj.firstName =" + obj.firstName + "<br>";
resEle.innerHTML += "obj1.firstName = " + obj1.firstName + "<br><br>";
});
</script>
</body>
</html>코드 설명
핵심 부분은 다음 한 줄입니다.
let obj1 = JSON.parse(JSON.stringify(obj));
obj 객체를 먼저 JSON 문자열로 직렬화한 후 다시 파싱하여 완전히 새로운 객체 obj1을 생성합니다. 버튼을 클릭하면 obj.firstName의 값이 "Mohit"으로 변경되지만, obj1.firstName은 여전히 "Rohan"을 유지하는 것을 확인할 수 있습니다. 이것이 바로 두 객체가 서로 독립적이라는 증거입니다.
출력
위 코드를 실행하면 다음과 같은 화면이 나타납니다.
'CLICK HERE' 버튼을 클릭하면 다음과 같이 결과가 표시됩니다.
참고 사항
JSON.parse(JSON.stringify()) 방식은 간편하지만 몇 가지 한계가 있습니다. 함수, undefined, Symbol은 복제되지 않으며, Date 객체는 문자열로 변환되고, 순환 참조가 있는 객체는 오류를 발생시킵니다. 이러한 경우에는 최신 브라우저에서 지원하는 structuredClone() 메서드를 사용하는 것이 더 안전한 대안이 될 수 있습니다.