JavaScript 객체 속성을 다른 객체로 복사하는 방법 – Object.assign() 활용 가이드

Object.assign()으로 객체 속성 복사하기

JavaScript에서 한 객체의 속성을 다른 객체로 복사하려면 Object.assign() 메서드를 사용할 수 있습니다. 이 메서드는 하나 이상의 소스(source) 객체에서 열거 가능한(enumerable) 자체 속성들의 값을 모두 복사하여 대상(target) 객체에 붙여넣습니다.

예를 들어, 소스 객체의 모든 속성을 대상 객체로 복사하고 싶다면 다음과 같이 코드를 작성할 수 있습니다.

예제 코드

const targetObj = { a: 1, b: 2 };
const sourceObj = { b: 4, c: 5 };
const returnedTarget = Object.assign(targetObj, sourceObj);
console.log(targetObj);
console.log(returnedTarget);
console.log(returnedTarget === targetObj);
console.log(sourceObj);

실행 결과

{ a: 1, b: 4, c: 5 }
{ a: 1, b: 4, c: 5 }
true
{ b: 4, c: 5 }

주요 특징 및 주의 사항

• 소스 객체는 변경되지 않습니다. sourceObj는 복사 작업 이후에도 원본 그대로 유지됩니다.

• 반환값은 대상 객체와 동일합니다. Object.assign()은 새로운 객체를 생성하지 않고, 첫 번째 인자로 전달된 대상 객체 자체를 수정한 뒤 그대로 반환합니다. 따라서 returnedTarget === targetObj의 결과는 true입니다.

• 열거 가능한 자체 속성만 복사됩니다. 상속받은 속성이나 열거 불가능한(non-enumerable) 속성은 복사되지 않습니다. 내부적으로 소스 객체에는 [[Get]], 대상 객체에는 [[Set]]을 사용하기 때문에 정의되어 있는 getter와 setter도 함께 호출됩니다.

추가 팁: 얕은 복사에 주의하세요

Object.assign()은 얕은 복사(shallow copy)만 수행합니다. 즉, 속성 값이 객체나 배열인 경우 참조(reference)만 복사되므로 중첩된 내부 객체까지 완전히 복제되지 않습니다. 깊은 복사(deep copy)가 필요하다면 structuredClone() 또는 재귀 복사 유틸리티를 사용하는 것이 좋습니다.