[JavaScript]두 객체를 합치는 방법

두 객체를 합치는 방법

이번 포스팅은 JavaScript에서 두 객체를 합치기 위해 알아야 할 모든 내용을 설명합니다.

---

Object.assign()

Object.assign() 메서드를 사용하여 두 개 이상의 객체를 합칠 수 있습니다. Object.assign() 메서드는 객체의 열거 가능한 프로퍼티를 복사 후 새로운 객체에 붙여 넣습니다.

Object.assign(target, source1, source2, ..., sourceN);

매개변수

target: 두 개 이상의 객체가 합쳐진 객체입니다.

source1, source2, ..., sourceN: 합쳐지는 객체들입니다.

 

반환 결과

합쳐진 객체를 반환합니다.

const A = {
  name: 'John', 
  age: 20, 
  job: 'developer'
};

const B = {
  email: 'test@test.com', 
  address: 'Seoul', 
  job: 'doctor'
};

const result = Object.assign({}, A, B);

console.log(result);
// {name: 'John', age: 20, job: 'doctor', email: 'test@test.com', address: 'Seoul'}

Object.assign() 메서드는 매개변수로 전달된 객체에서 동일한 프로퍼티가 존재하는 경우 뒤에 있는 객체가 앞에 있는 객체를 덮어씁니다. A, B 객체는 job이라는 동일한 이름의 프로퍼티를 가지고 있는데, B 객체의 job 프로퍼티의 값이 설정된 것을 확인할 수 있습니다.

---

spread(...) 연산자

또 다른 방법으로 ES6에서 도입된 spread(...) 연산자를 사용할 수 있습니다.

const A = {
  name: 'John', 
  age: 20, 
  job: 'developer'
};

const B = {
  email: 'test@test.com', 
  address: 'Seoul', 
  job: 'doctor'
};

const result = {
  ...A,
  ...B
};

console.log(result);
// {name: 'John', age: 20, job: 'doctor', email: 'test@test.com', address: 'Seoul'}

Object.assign() 메서드와 마찬가지로 동일한 프로퍼티가 존재하는 경우 뒤에 있는 객체가 앞에 있는 객체를 덮어씁니다.

반응형

---

얕은 병합(Shallow Merge)

Object.assig() 메서드와 Spread(...) 연산자는 얕은 병합을 수행합니다.

 

아래는 A 객체와 B 객체를 병합한 다음 A 객체의 age 프로퍼티의 값을 변경합니다.

const A = {
  name: {
    firstName: 'Hong',
    lastName: 'Gil Dong'
  }, 
  age: 20, 
  job:'developer'
};

const B = {
  email: 'test@test.com', 
  address: 'Seoul'
};

const result = {
  ...A,
  ...B
};

A.age = 45;
console.log(result);

[실행 결과]

실행 결과에서 알 수 있듯이 A 객체의 age 프로퍼티의 값을 변경하더라도 result 객체의 age 프로퍼티의 값은 변경되지 않습니다.

 

하지만, 아래 예제처럼 중첩된 객체의 프로퍼티의 값을 변경하면 병합된 객체의 프로퍼티의 값도 변경됩니다.

const A = {
  name: {
    firstName: 'Hong',
    lastName: 'Gil Dong'
  }, 
  age: 20, 
  job:'developer'
};

const B = {
  email: 'test@test.com', 
  address: 'Seoul'
};

const result = {
  ...A,
  ...B
};

A.name.firstName = 'Jin';
console.log(result);

[실행 결과]

A 객체의 name 프로퍼티와 result 객체의 name 프로퍼티가 동일한 객체를 참조하므로 중첩된 객체를 병합해야 하는 경우 lodash 라이브러리의 merge() 메서드를 사용하거나 참조 값을 복사하지 않도록 재귀 함수를 구현합니다.

---

정리

• 두 객체를 합치는 방법으로 Object.assign() 메서드 또는 Spread(...) 연산자를 사용할 수 있습니다.
• Object.assign() 메서드와 Spread(...) 연산자는 얕은 병합을 수행하므로 중첩된 객체를 병합하는 경우 lodash 라이브러리의 merge() 메서드를 사용하거나 재귀 함수를 구현합니다.