자바스크립트 Object.assign() 메소드 완벽 가이드: 객체 복사와 병합 방법

자바스크립트에는 객체를 조작할 수 있는 다양한 메소드를 제공하는 Object 클래스가 있습니다. 이 글에서는 그중에서도 Object.assign() 메소드의 개념과 실제 활용 방법을 예제와 함께 자세히 살펴보겠습니다.

기본 개념 복습

객체(Object)는 자바스크립트의 데이터 타입 중 하나로, 파이썬의 딕셔너리와 유사하게 키(key)와 값(value)의 쌍으로 구성됩니다. 간단한 예시로 'Harry'라는 객체를 만들어 보겠습니다.

let Harry = {
  firstName: 'Harry',
  lastName: 'Potter',
  age: 11,
  house: 'Gryffindor',
  pet: {
    name: 'Hedwig',
    animal: 'owl'
  }
};

기본 규칙은 간단합니다. 콜론(:) 왼쪽에 있는 속성 이름이 키이고, 오른쪽에 있는 것이 값입니다. 대부분의 키와 값은 직관적이지만, 마지막 속성인 pet은 조금 특별합니다. 이 경우에도 pet은 여전히 키 역할을 하지만, 그 값으로 두 개의 키:값 쌍을 가진 또 다른 객체가 들어가 있습니다. 이처럼 객체 안에 객체가 포함된 구조를 중첩 객체(nested object)라고 부릅니다.

Object.assign(대상 객체, ...원본 객체들)

Object.assign()은 하나 이상의 원본(source) 객체를 대상(target) 객체로 복사하는 데 사용되는 메소드입니다. 바로 코드로 어떻게 작동하는지 확인해 보겠습니다.

let hpChar = {
  firstName: 'Harry',
  lastName: 'Potter',
  age: 11,
  house: 'Gryffindor',
  pet: {
    name: 'Hedwig',
    animal: 'owl'
  }
};

Object.assign({}, hpChar);
console.log(hpChar, '\n');

Object.assign(hpChar, {
  firstName: 'Hermione',
  lastName: 'Grainger',
  pet: {
    name: 'Crookshanks',
    animal: 'cat'
  }
});

console.log(hpChar);

코드를 단계별로 살펴보겠습니다. 먼저 hpChar라는 객체 리터럴을 생성했습니다. 이 객체는 firstName, lastName, age, house, pet 속성을 가지고 있으며, pet 속성은 그 자체로 하나의 객체이기 때문에 자체적인 키와 값을 포함하고 있습니다.

다음 줄에서 이 글의 주인공인 Object.assign()이 처음 등장합니다. 이 메소드는 두 개 이상의 매개변수를 받으며, 첫 번째 매개변수는 항상 값을 할당받을 대상(target) 객체입니다. 여기서는 빈 객체({})가 대상입니다.

두 번째 매개변수는 앞서 정의한 hpChar 객체로, 대상 객체에 복사할 원본 데이터 역할을 합니다.

그다음 줄에서 결과를 콘솔에 출력하면 다음과 같습니다.

{ firstName: 'Harry',
  lastName: 'Potter',
  age: 11,
  house: 'Gryffindor',
  pet: { name: 'Hedwig', animal: 'owl' } }

크게 달라진 점이 없어 보이나요? 그 이유는 빈 객체에 hpChar를 할당했기 때문입니다. 즉, 객체를 사실상 복제(clone)한 것입니다. 그렇다면 이번에는 값을 일부 변경하면서 다시 실행해 보면 어떻게 될까요? 빈 객체 대신 hpChar 객체 자체를 대상으로 지정하고, 두 번째 매개변수에서 몇 가지 값을 변경해 보겠습니다. 키는 그대로 유지하면서 값만 자유롭게 바꿔 보셔도 좋습니다.

아래는 변경할 값들입니다. 참고로 대상 객체에서 변경할 필요가 없는 값이라면, 원본 객체에 해당 속성을 굳이 명시하지 않아도 됩니다.

Object.assign(hpChar, {
  firstName: 'Hermione',
  lastName: 'Grainger',
  pet: {
    name: 'Crookshanks',
    animal: 'cat'
  }
});

두 번째로 콘솔에 출력한 결과를 보면, 대상 객체의 기존 속성들이 새로운 값으로 덮어씌워진(overwrite) 것을 확인할 수 있습니다. 이제 콘솔은 아래와 같이 출력됩니다.

{ firstName: 'Hermione',
  lastName: 'Grainger',
  age: 11,
  house: 'Gryffindor',
  pet: { name: 'Crookshanks', animal: 'cat' } }

이것이 동일한 속성을 가진 두 객체를 병합하는 모습입니다. 그렇다면 서로 다른 속성을 가진 세 개의 객체를 병합하면 어떻게 될까요? 결과를 한번 예측해 보세요.

var obj1 = { foo: 1 };
var obj2 = { bar: 2 };
var obj3 = { baz: 3 };

Object.assign(obj1, obj2, obj3);
console.log(obj1);

여기서 obj1은 대상 객체이고, obj2와 obj3는 원본 객체입니다. 세 객체 사이에 겹치는 속성이 없기 때문에, 모든 속성이 각각의 값과 함께 obj1에 병합됩니다.

{ foo: 1, bar: 2, baz: 3 }

지금까지 Object.assign()의 실제 동작 방식을 알아봤습니다. 핵심을 정리하면 다음과 같습니다.

첫 번째 인자는 반드시 대상(target) 객체이며, 나머지 인자들은 원본(source) 객체입니다.
원본 객체의 속성이 대상 객체에 이미 존재하면 새 값으로 덮어씌워집니다.
겹치는 속성이 없으면 모든 속성이 대상 객체에 추가됩니다.
빈 객체를 대상으로 지정하면 기존 객체를 복제하는 효과를 얻을 수 있습니다.

이 개념들을 확실히 이해했다면, 자바스크립트 프레임워크 학습에 한 걸음 더 가까워진 것입니다!

더 배우고 싶다면?

아래 튜토리얼로 학습을 이어가 보세요.

자바스크립트 Object.keys() 메소드
자바스크립트 let 키워드 단계별 가이드
자바스크립트 typeof 연산자
자바스크립트 문자열 포함 여부 확인: 단계별 가이드
자바스크립트 변수