[자바스크립트] 자바스크립트 객체 합치는 다양한 방법

자바스크립트에서 객체를 합치는 방법은 다양합니다. 각 방법마다 장단점이 있으므로, 상황에 맞게 적절한 방법을 선택하는 것이 중요합니다.

1. Object.assign()

• 기본적인 객체 병합: 기존 객체를 변경하면서 새로운 객체의 프로퍼티를 추가합니다.
• 얕은 복사: 중첩된 객체는 참조만 복사되므로 주의해야 합니다.
• 사용법:

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

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

 

2. Spread 연산자 (...)

• 객체 리터럴에서 사용: 새로운 객체를 생성하면서 기존 객체의 프로퍼티를 펼쳐 넣습니다.
• 얕은 복사: Object.assign()과 동일하게 얕은 복사를 수행합니다.
• 사용법:

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

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

3. ES6+의 병합 연산자 (Object.assign()의 간결한 버전)

• 기존 객체를 변경: Object.assign()과 동일하게 기존 객체를 변경합니다.
• 얕은 복사: 얕은 복사를 수행합니다.
• 사용법:

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

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

4. Lodash의 _.merge()

• 깊은 복사: 중첩된 객체도 깊게 복사하여 새로운 객체를 생성합니다.
• 다양한 옵션: 커스텀 병합 로직을 구현할 수 있는 다양한 옵션을 제공합니다.
• 외부 라이브러리: Lodash 라이브러리를 추가해야 사용할 수 있습니다.
• 사용법:

const _ = require('lodash');

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

const mergedObj = _.merge({}, obj1, obj2);
console.log(mergedObj); // { a: 1, b: { c: 2, d: 3 } }

5. Reduce를 이용한 객체 합치기

• 유연성: 배열의 요소들을 순회하며 객체를 합칠 수 있어 다양한 조건을 설정할 수 있습니다.
• 사용법:

const arr = [{ a: 1 }, { b: 2 }, { c: 3 }];

const mergedObj = arr.reduce((acc, cur) => ({ ...acc, ...cur }), {});
console.log(mergedObj); // { a: 1, b: 2, c: 3 }

6. 함수를 이용한 객체 합치기

• 커스텀 로직: 복잡한 병합 로직을 구현하기 위해 함수를 직접 작성할 수 있습니다.
• 사용법:

function mergeObjects(...objects) {
  return objects.reduce((acc, cur) => ({ ...acc, ...cur }), {});
}

const obj1 = { a: 1 };
const obj2 = { b: 2 };
const obj3 = { c: 3 };

const mergedObj = mergeObjects(obj1, obj2, obj3);
console.log(mergedObj); // { a: 1, b: 2, c: 3 }

7. 조건에 따른 병합

• 특정 조건: 특정 조건에 맞는 프로퍼티만 병합할 수 있습니다.
• 사용법:

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

const mergedObj = { ...obj1, ...obj2 }; // b는 obj2의 값으로 덮어씌워짐

// b 프로퍼티는 합치지 않고, 나머지 프로퍼티만 합치기
const mergedObj2 = { ...obj1, ...Object.keys(obj2).filter(key => key !== 'b').reduce((acc, key) => ({ ...acc, [key]: obj2[key] }), {}) };
console.log(mergedObj2); // { a: 1, b: 2, c: 4 }

4. 깊은 복사와 병합

• 깊은 복사 라이브러리: lodash의 _.merge() 외에도 다른 깊은 복사 라이브러리를 사용할 수 있습니다.
• 사용법:

const _ = require('lodash');

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

const mergedObj = _.merge({}, obj1, obj2);
console.log(mergedObj); // { a: 1, b: { c: 2, d: 3 } }

5. TypeScript 인터페이스 활용

• 타입 안전: TypeScript 인터페이스를 사용하여 객체의 구조를 정의하고 안전한 병합을 수행할 수 있습니다.
• 사용법:

interface Person {
  name: string;
  age: number;
}

const person1: Person = { name: 'Alice', age: 30 };
const person2: Person = { name: 'Bob', age: 25 };

const mergedPerson: Person = { ...person1, ...person2 }; // TypeScript 컴파일러가 타입을 검사