JavaScript에서 복사한 객체를 수정하면 원본 객체도 함께 변경될까요?

아니요, 복사된 객체를 수정하더라도 원본(상위) 객체는 업데이트되지 않습니다. Object.assign()은 새로운 객체를 생성해 속성을 병합하기 때문에 원본 객체에는 영향을 주지 않습니다. 아래 예제 코드로 직접 확인해 보겠습니다.

예제

var firstObject = { name: 'John' };
var secondObject = { name: 'Carol' };
console.log("Before merging=");
console.log(firstObject);
var afterMerging = Object.assign({}, firstObject, secondObject);
afterMerging.name = 'Smith';
console.log("After merging=");
console.log(firstObject);

위 프로그램을 실행하려면 다음 명령어를 사용합니다.

node fileName.js

출력 결과

여기서는 파일 이름이 demo131.js이며, 실행하면 다음과 같은 출력 결과를 얻을 수 있습니다.

PS C:\Users\Amit\JavaScript-code> node demo131.js
Before merging=
{ name: 'John' }
After merging=
{ name: 'John' }

동작 원리 설명

Object.assign({}, firstObject, secondObject)는 첫 번째 인자인 빈 객체 {}를 대상으로 나머지 객체들의 속성을 복사합니다. 즉, 병합 결과가 완전히 새로운 객체에 저장되기 때문에, 이후 복사본의 name 속성을 'Smith'로 변경해도 원본 객체인 firstObject는 여전히 { name: 'John' } 그대로 유지됩니다.

주의할 점: 얕은 복사(Shallow Copy)

다만 Object.assign()이 수행하는 것은 얕은 복사라는 점에 유의해야 합니다. 객체 내부에 중첩된 객체(nested object)가 존재한다면 해당 중첩 객체는 참조(reference)로 복사되므로, 복사본에서 중첩 객체의 속성을 수정하면 원본 객체에도 영향을 미칠 수 있습니다. 중첩 구조까지 완전히 독립적인 복사가 필요하다면 structuredClone() 또는 JSON.parse(JSON.stringify())와 같은 깊은 복사(deep copy) 방법을 사용하는 것이 좋습니다.