JavaScript 객체 속성을 동적으로 병합하는 2가지 방법 (Object.assign vs 전개 연산자)

JavaScript에서 두 개 이상의 객체 속성을 동적으로 병합해야 하는 경우는 매우 흔합니다. 대표적인 방법으로 Object.assign() 메서드와 전개 연산자(Spread Operator)를 사용하는 방식이 있으며, 각각의 특징과 주의할 점을 예제와 함께 살펴보겠습니다.

1) Object.assign() 메서드

Object.assign()은 하나 이상의 소스(source) 객체로부터 모든 열거 가능한 속성 값을 대상(target) 객체로 복사하는 메서드입니다. 병합된 결과인 대상 객체를 반환하며, 원본 대상 객체 자체도 변경(mutate)된다는 점에 유의해야 합니다.

예제 1 — 기본 병합

<html>
<body>
<script>
   var target = { a: "ram", b: "rahim" };
   var source = { c: "akbar", d: "anthony" };
   var returnedTarget = Object.assign(target, source);
   document.write(JSON.stringify(target));
   document.write(JSON.stringify(returnedTarget));
</script>
</body>
</html>

출력 결과

{"a":"ram","b":"rahim","c":"akbar","d":"anthony"}
{"a":"ram","b":"rahim","c":"akbar","d":"anthony"}

위 결과에서 볼 수 있듯이, 반환된 객체와 대상 객체 모두 동일한 병합 결과를 가집니다.

키가 중복될 때의 동작

만약 병합하려는 객체들이 동일한 키(key)를 가지고 있다면 어떻게 될까요? 이 경우 나중에 전달된 객체의 값이 기존 값을 덮어쓰게(overwrite) 됩니다. 아래 예제를 통해 확인해 보겠습니다.

예제 2 — 중복 키 처리

<html>
<body>
<script>
    var target = { a: "ram", b: "rahim" };
   var source = { b: "akbar", d: "anthony" };
   var returnedTarget = Object.assign(target, source);
   document.write(JSON.stringify(target));
   document.write("</br>");
   document.write(JSON.stringify(returnedTarget));
</script>
</body>
</html>

출력 결과

{"a":"ram","b":"akbar","d":"anthony"}
{"a":"ram","b":"akbar","d":"anthony"}

두 객체 모두 b라는 키를 가지고 있었지만, 뒤에 위치한 source 객체의 값인 "akbar"가 최종적으로 적용된 것을 확인할 수 있습니다.

2) 전개 연산자(Spread Operator) 사용

전개 연산자(...)는 여러 개의 요소, 변수 또는 인수가 필요한 위치에서 표현식을 확장할 수 있게 해주는 문법입니다. 주로 배열에서 여러 값을 다룰 때 많이 사용되지만, JavaScript 객체는 키-값 쌍으로 구성되어 있기 때문에 전개 연산자를 이용해 여러 객체를 하나로 손쉽게 병합할 수 있습니다.

문법

var target = {...obj1, ...obj2, ...}

예제

<html>
<body>
<script>
   var target = { a: "ram", b: "rahim" };
   var source = { b: "akbar", d: "anthony" };
   var returnedTarget = {...target, ...source}
   document.write(JSON.stringify(returnedTarget));
</script>
</body>
</html>

출력 결과

{"a":"ram","b":"akbar","d":"anthony"}

전개 연산자 역시 키가 중복될 경우 나중에 작성된 객체의 값이 우선 적용됩니다. 위 예제에서도 b 키의 값이 source 객체의 값으로 덮어써진 것을 볼 수 있습니다.

정리

Object.assign(): ES6부터 지원되며, 대상 객체를 직접 변경하고 그 객체를 반환합니다.
전개 연산자(...): 새로운 객체를 생성하여 반환하므로 원본 객체를 유지해야 할 때 더 안전합니다.
두 방법 모두 키가 중복되면 뒤에 오는 객체의 값이 우선합니다.