Object.assign()이란?
Object.assign()은 하나 이상의 소스(source) 객체의 속성을 대상(target) 객체로 복사하는 JavaScript 내장 메서드입니다. 이 메서드는 소스 객체에는 'get', 대상 객체에는 'set'을 사용하기 때문에 getter와 setter를 모두 호출합니다. 복사가 완료되면 속성과 값이 병합된 대상 객체를 반환하며, 소스 값이 null 또는 undefined인 경우에도 오류를 발생시키지 않습니다.
문법(Syntax)
Object.assign(target, ...sourceObjects);
Object.assign()은 첫 번째 매개변수로 대상 객체를 받고, 그 뒤에 하나 이상의 소스 객체들을 전달받습니다. 소스 객체들의 속성이 순서대로 대상 객체에 복사되며, 최종적으로 병합된 대상 객체가 반환됩니다.
예제 1: 기본적인 객체 병합
다음 예제에서는 세 개의 소스 객체 "obj1", "obj2", "obj3"의 속성들이 빈 대상 객체 "obj"에 복사되고, 병합된 대상 객체가 결과로 출력됩니다.
<html>
<body>
<script>
var obj1 = { a: 10, b:20 };
var obj2 = { c: 30, d:40 };
var obj3 = { e: 50 };
var obj = Object.assign({}, obj1, obj2, obj3);
document.write(JSON.stringify(obj));
</script>
</body>
</html>출력 결과
{"a":10,"b":20,"c":30,"d":40,"e":50}예제 2: 중복된 속성의 처리 방식
다음 예제에서는 여러 객체에 동일한 이름의 속성이 존재하는 경우를 살펴봅니다. 이때 Object.assign()은 나중에 할당된 값을 우선 적용합니다. 예를 들어 세 객체 "obj1", "obj2", "obj3" 모두 속성 'c'를 가지고 있으며, 각각 1, 3, 0으로 할당되어 있습니다. 마지막에 위치한 obj3의 값 0이 앞서 할당된 값 1과 3을 덮어쓰기(override)하기 때문에, 출력 결과에서 속성 'c'의 값은 0이 됩니다. 마찬가지로 속성 'b'는 obj2의 값 30으로, 속성 'd'는 obj3의 값 70으로 덮어쓰여집니다.
<html>
<body>
<script>
var obj1 = { a: 10, b:20, c:1 };
var obj2 = { b: 30, d:10, c:3 };
var obj3 = { e: 60, d:70, c:0 };
var obj = Object.assign({}, obj1, obj2, obj3);
document.write(JSON.stringify(obj));
</script>
</body>
</html>출력 결과
{"a":10,"b":30,"c":0,"d":70,"e":60}핵심 포인트 정리
- 얕은 복사(Shallow Copy): Object.assign()은 얕은 복사만 수행합니다. 중첩된(nested) 객체는 참조가 복사되므로 깊은 복사가 필요한 경우 주의해야 합니다.
- 객체 복제: Object.assign({}, 원본) 형태를 활용하면 기존 객체를 변경하지 않고 새로운 객체로 복제할 수 있습니다.
- 속성 덮어쓰기: 동일한 키가 존재할 경우, 나중에 전달된 소스 객체의 값이 항상 우선 적용됩니다.