JavaScript에서 기존 속성을 덮어쓰지 않고 한 객체의 속성을 다른 객체에 추가하는 방법

JavaScript로 개발을 하다 보면 한 객체의 속성을 다른 객체로 복사하되, 이미 존재하는 키는 그대로 유지해야 하는 경우가 자주 발생합니다. 이럴 때 hasOwnProperty() 메서드를 활용하면 간단하게 해결할 수 있습니다.

문제 상황

다음과 같이 두 개의 객체가 있다고 가정해 보겠습니다.

var first = {key1: 100, key2: 40, key3: 70}
var second = {key2: 80, key3: 70, key4: 1000}

여기서 목표는 second 객체의 속성을 first 객체에 추가하는 것입니다. 단, first에 이미 존재하는 key2, key3의 값(40, 70)은 덮어쓰지 말아야 합니다. 즉, first에 없는 key4(값 1000)만 새로 추가됩니다.

hasOwnProperty()를 활용한 해결 방법

hasOwnProperty()는 해당 객체에 특정 키가 직접 소유되어 있는지 확인하는 메서드입니다. 이를 활용해 대상 객체에 존재하지 않는 키만 골라서 추가할 수 있습니다.

다음은 전체 예제 코드입니다.

예제 코드

var first = {key1: 100, key2: 40, key3: 70}
var second = {key2: 80, key3: 70, key4: 1000}

function addPropertiesWithoutOverwriting(first, second) {
   for (var key in second) {
      if (second.hasOwnProperty(key) && !first.hasOwnProperty(key)) {
         first[key] = second[key];
      }
   }
   return first;
}

console.log(addPropertiesWithoutOverwriting(first, second))

코드 동작 원리

위 코드의 핵심 로직을 단계별로 살펴보면 다음과 같습니다.

1. for...in 반복문: for (var key in second) 구문으로 second 객체의 모든 열거 가능한 속성을 하나씩 순회합니다.

2. 출처 객체 검증: second.hasOwnProperty(key) 조건으로 해당 키가 프로토타입 체인이 아닌 second 객체 자신의 속성인지 확인합니다.

3. 대상 객체 검증: !first.hasOwnProperty(key) 조건으로 first 객체에 해당 키가 없는 경우에만 통과시킵니다. 이 조건 덕분에 기존 값이 덮어써지지 않습니다.

4. 속성 추가: 두 조건을 모두 만족하는 키만 first[key] = second[key]로 추가합니다.

실행 및 결과 확인

Node.js 환경에서 위 프로그램을 실행하려면 다음 명령어를 사용합니다.

node fileName.js

파일 이름이 demo99.js인 경우 실행 결과는 다음과 같습니다.

PS C:\Users\Amit\JavaScript-code> node demo99.js
{ key1: 100, key2: 40, key3: 70, key4: 1000 }

실행 결과를 보면 first 객체의 기존 값(key1: 100, key2: 40, key3: 70)은 그대로 유지되고, first에 없던 key4: 1000만 성공적으로 추가된 것을 확인할 수 있습니다.

참고: Object.assign()과의 차이점

흔히 사용하는 Object.assign(target, source)은 source의 값을 target에 무조건 덮어쓰기 때문에, 기존 값을 보존해야 하는 상황에서는 위와 같은 hasOwnProperty() 기반 접근이 적합합니다. 최신 JavaScript(ES2019+)에서는 스프레드 연산자와 함께 조건부 처리를 하거나, 라이브러리의 유틸리티 함수를 활용하는 방법도 있습니다.