객체 복제란 무엇인가?
JavaScript에서 클로닝(복제)이란 이미 존재하는 객체를 중복 생성하지 않기 위해, 하나의 객체가 가진 속성들을 다른 객체로 복사하는 작업을 의미합니다. 원본 객체는 그대로 유지하면서 동일한 데이터를 가진 새로운 객체를 만드는 것이 핵심입니다.
JavaScript 객체를 복제하는 대표적인 방법은 다음과 같습니다.
- for-in 반복문으로 각 속성을 순회하며 새 객체에 복사하기
- JSON 메서드(JSON.stringify와 JSON.parse) 활용하기
- Object.assign() 메서드 활용하기
아래에서 각 방법을 하나씩 자세히 살펴보겠습니다.
1) 반복문으로 각 속성을 순회하며 복사하기
가장 전통적인 방식으로, for-in 문을 사용해 원본 객체의 모든 속성을 하나씩 읽어 새로운 객체에 복사합니다. 구현이 단순하지만 코드가 길어지고 실수할 가능성이 있어 요즘은 잘 사용되지 않습니다. hasOwnProperty()를 함께 사용해 상속된 속성까지 복사되는 것을 방지하는 점이 특징입니다.
예제
<html>
<body>
<p id="cloning-1"></p>
<script>
const sourceObject = {name:"salman", age:23, salary:25000};
let requiredObj = {};
for (let pro in sourceObject) {
if (sourceObject.hasOwnProperty(pro)) {
requiredObj[pro] = sourceObject[pro];
}
}
document.getElementById("cloning-1").innerHTML =
"targetObject name = "+requiredObj.name+", age = " + requiredObj.age+", salary = "+requiredObj.salary;
</script>
</body>
</html>실행 결과
targetObject name = salman, age = 23, salary = 25000
2) JSON 메서드 활용하기
최근에 널리 쓰이는 방식 중 하나로, JSON.stringify()로 객체를 문자열로 변환한 뒤 JSON.parse()로 다시 객체화하여 완전히 새로운 객체를 만듭니다. 이 방법은 깊은 복사(deep copy) 효과를 내지만, 원본 객체가 반드시 JSON으로 안전하게 직렬화 가능해야 한다는 제약이 있습니다. 함수, undefined, Symbol 등은 복제 과정에서 손실될 수 있으므로 주의해야 합니다.
예제
<html>
<body>
<p id="cloning-2"></p>
<script>
const sourceObject = {name:"salman", age:23, salary:25000};
let requiredObj = {};
requiredObj = JSON.parse(JSON.stringify(sourceObject));
document.getElementById("cloning-2").innerHTML =
"targetObject name = "+requiredObj.name+", age = " + requiredObj.age+", salary = "+requiredObj.salary;
</script>
</body>
</html>실행 결과
targetObject name = salman, age = 23, salary = 25000
3) Object.assign() 메서드 활용하기
현재 가장 널리 사용되는 고급 방법입니다. Object.assign()은 첫 번째 인수로 전달된 빈 객체({})에 두 번째 인수인 원본 객체의 속성들을 복사합니다. 다만 이 메서드는 얕은 복사(shallow copy)만 수행한다는 점에 유의해야 합니다. 즉, 객체 내부에 중첩된 프로퍼티는 값이 아닌 참조(reference)로 복사되므로, 중첩 객체를 수정하면 원본에도 영향을 줄 수 있습니다.
예제
<html>
<body>
<p id="cloning-3"></p>
<script>
const sourceObject = {name:"salman", age:23, salary:25000};
let requiredObj = {};
requiredObj = Object.assign({}, sourceObject);
document.getElementById("cloning-3").innerHTML =
"targetObject name = "+requiredObj.name+", age = " + requiredObj.age+", salary = "+requiredObj.salary;
</script>
</body>
</html>실행 결과
targetObject name = salman, age = 23, salary = 25000
마무리 및 추가 팁
세 가지 방법 모두 동일한 결과를 출력하지만, 상황에 따라 적합한 선택이 달라집니다. 단순하고 명시적인 처리가 필요하면 반복문 방식, 중첩 객체까지 완전히 분리된 복사본이 필요하면 JSON 방식, 간결하고 성능 좋은 얕은 복사에는 Object.assign()이 적합합니다. 참고로 최신 JavaScript 환경에서는 스프레드 연산자({...sourceObject})나 structuredClone() API를 사용하면 더욱 간편하게 객체를 복제할 수 있습니다.