[자바스크립트] 객체 합치기

JavaScript에서 객체를 합치는 방법은 다양합니다. 이 중에서 가장 일반적인 방법은 다음과 같은 두 가지 방법입니다.

1. Object.assign 메서드 사용하기

Object.assign() 메서드는 첫 번째 인수로 전달된 객체에 다른 객체를 병합할 때 사용됩니다. 예를 들어, 다음과 같이 두 개의 객체를 합쳐보겠습니다.

 

const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const obj3 = Object.assign(obj1, obj2);

console.log(obj3); // { a: 1, b: 2, c: 3, d: 4 }
console.log(obj1); // { a: 1, b: 2, c: 3, d: 4 }

위의 코드에서 Object.assign() 메서드는 obj1 객체에 obj2 객체를 병합합니다. 이때, Object.assign() 메서드는 첫 번째 인수로 전달된 객체를 변경하고, 변경된 객체를 반환합니다.

2. 스프레드 연산자 사용하기

스프레드 연산자는 ES6에서 추가된 문법으로, 배열이나 객체를 확장시켜주는 역할을 합니다. 객체를 확장시킬 때는 다음과 같이 사용할 수 있습니다.

 

const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const obj3 = { ...obj1, ...obj2 };

console.log(obj3); // { a: 1, b: 2, c: 3, d: 4 }

위의 코드에서 ... 연산자는 obj1 객체와 obj2 객체를 확장시키고, 이를 새로운 객체로 합쳐서 obj3 변수에 할당합니다. 이 방법은 Object.assign() 메서드와 동일한 결과를 반환하지만, 원본 객체를 변경하지 않습니다.

또한, 스프레드 연산자를 사용하여 객체를 병합할 때, 다음과 같이 새로운 속성을 추가할 수도 있습니다.

 

const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const obj3 = { ...obj1, ...obj2, e: 5 };

console.log(obj3); // { a: 1, b: 2, c: 3, d: 4, e: 5 }

위의 코드에서 e 속성을 추가하여 새로운 객체를 생성하고, 이를 obj3 변수에 할당합니다.

 

3. 객체를 합칠 때 주의할점

객체를 합치는 과정에서 주의할 점은 다음과 같습니다.

1) 같은 이름의 속성이 있을 경우, 덮어씌워질 수 있습니다.

예를 들어, obj1 객체와 obj2 객체에 모두 a 속성이 있다면, Object.assign() 메서드나 스프레드 연산자를 사용하여 병합하면 obj1 객체의 a 속성이 obj2 객체의 a 속성으로 덮어씌워집니다.

 

2) 객체를 병합하는 과정에서 원본 객체가 변경될 수 있습니다.

 

Object.assign() 메서드는 첫 번째 인수로 전달된 객체를 변경하고, 변경된 객체를 반환합니다. 따라서, Object.assign() 메서드를 사용할 때는 원본 객체가 변경되지 않도록 주의해야 합니다.

 

3) 중첩된 객체를 병합할 때는, 중첩된 객체의 속성들이 제대로 병합되지 않을 수 있습니다.

예를 들어, 다음과 같은 두 개의 객체가 있다고 가정해봅시다.

 

const obj1 = {
  a: {
    b: 1,
    c: 2
  }
};
const obj2 = {
  a: {
    b: 3,
    d: 4
  }
};

 

Object.assign() 메서드나 스프레드 연산자를 사용하여 이 두 개의 객체를 병합하면 다음과 같은 결과가 나옵니다.

 

const obj3 = Object.assign(obj1, obj2);
console.log(obj3); // { a: { b: 3, d: 4 }, b: 2, c: 3 }

 

a 속성의 값이 { b: 3, d: 4 }로 덮어씌워져서, obj3 객체의 a 속성에는 b와 d 속성만 남게 됩니다. 이러한 상황을 방지하기 위해서는, 중첩된 객체들을 병합하기 전에 직접 속성들을 합쳐야 합니다.