Front-End/JavaScript

[JavaScript] 객체를 병합하는 세 가지 방법 (Object merge)

유자맛바나나 2023. 1. 30. 03:49

 

1. Object.assign() 메서드

const object1 = {a: 1, b: 2};
const object2 = {c: 3, d: 4};
const mergedObject = Object.assign({}, object1, object2);
console.log(mergedObject); 
// Output: {a: 1, b: 2, c: 3, d: 4}

Object.assign() 메서드는 JavaScript에서 두 개의 객체를 병합하는 가장 간단한 방법이다. 두 개 이상의 객체를 인수로 전달하면, 모든 객체의 속성을 결합한 새 객체가 생성된다.

 

 

2. Spread operator '...'

const object1 = {a: 1, b: 2};
const object2 = {c: 3, d: 4};
const mergedObject = {...object1, ...object2};
console.log(mergedObject); 
// Output: {a: 1, b: 2, c: 3, d: 4}

Spread 연산자 '...'을 이용해서 Object.assign()와 유사하게 병합할 수 있다. '...' 연산자는 하나의 객체의 속성을 다른 객체로 펼칠 수 있어서, 객체를 효과적으로 병합할 수 있다. 

 

 

3. Looping through properties (속성 반복)

const object1 = {a: 1, b: 2};
const object2 = {c: 3, d: 4};
const mergedObject = {};
for (const key in object1) {
  mergedObject[key] = object1[key];
}
for (const key in object2) {
  mergedObject[key] = object2[key];
}
console.log(mergedObject); 
// Output: {a: 1, b: 2, c: 3, d: 4}

하나의 객체의 속성을 다른 객체에 추가하는 방식이다. 이 방법은 앞선 두 가지 방법보다 더 길지만 객체를 특정 순서로 병합해야 하거나 속성을 병합하기 전에 조작해야 할 경우에는 유용할 수 있다.