Object 합치기

💡 객체 합치는 4가지 방법

1. 반복문
2. Object.assign()
3. Spread Operator
4. lodash 라이브러리

반복문

const fruitA = { name: 'apple', color: 'red' };
const fruitB = { name: 'apple', color: 'green', price: 1000};

const fruit = {};
for(let a in fruitA) {
  fruit[a] = fruitA[a];
}
for(let b in fruitB) {
  fruit[b] = fruitB[b];
}

console.log(fruit);
// { name: 'apple', color: 'green', price: 1000 }

다음 예시는 fruitA 객체에 fruitB 객체를 복사한 것이다. for...in 루프를 사용하여 새로운 배열에 직접 복사해주었다.

Object.assign()

const fruitA = { name: 'apple', color: 'red' };
const fruitB = { name: 'apple', color: 'green', price: 1000};

const fruit = Object.assign(fruitA, fruitB);

console.log(fruit);
console.log(fruitA);
// { name: 'apple', color: 'green', price: 1000 }
// { name: 'apple', color: 'green', price: 1000 }

Object.assign(obj1, obj2)

obj2의 모든 속성들을 obj1에 복사하며, 같은 속성이 있을 경우 덮어쓴다. 함수의 파라미터로 전달된 순서가 뒤인 객체의 값이 복사된다.

fruitA 객체는 복사된 값으로 변경되었다. 기존 객체를 변경하지 않고 새로운 객체를 만드는 방법은 첫 번째 파라미터에 빈 객체를 전달하는 것이다.

const fruitA = { name: 'apple', color: 'red' };
const fruitB = { name: 'apple', color: 'green', price: 1000};

const fruit = Object.assign({}, fruitA, fruitB);

console.log(fruit);
console.log(fruitA);
// { name: 'apple', color: 'green', price: 1000 }
// { name: 'apple', color: 'red' }

Spread Operator

const fruitA = { name: 'apple', color: 'red' };
const fruitB = { name: 'apple', color: 'green', price: 1000};

const fruit = {...fruitA, ...fruitB};

console.log(fruit);
console.log(fruitA);
// { name: 'apple', color: 'green', price: 1000 }
// { name: 'apple', color: 'red' }

const obj = {...obj1, ...obj2}

스프레드 연산자는 객체나 배열의 원소를 하나씩 펼쳐서 리턴하며, 기존의 객체를 변경하지 않는다.

lodash 라이브러리

스프레드 연산자나 Object.assign 함수를 이용해서 객체를 병합하면, 얕은 복사가 이뤄진다. 이는 해당 객체의 값이 아닌 주소값을 복사하면서 두 객체를 병합하는 방법이다.

const fruitA = { name: 'apple', count: [1, 2] };
const fruitB = { name: 'apple', color: 'green'};

const fruit = {...fruitA, ...fruitB};
console.log(fruit);
// { name: 'apple', count: [ 1, 2 ], color: 'green' }

fruitA.count.push(3);
console.log(fruit);
// { name: 'apple', count: [ 1, 2, 3 ], color: 'green' }

예제에서 fruitA의 count의 배열에 새로운 값을 추가했지만, 두 객체의 병합으로 만들어진 fruit 객체의 count 배열에도 값이 추가되었다. 얕은 복사가 이뤄졌기 때문이다.

깊은 복사 (실제 값 복사) 는 lodash 라이브러리의 _merge() 함수를 통해 가능하다.

$ npm install --save lodash

import * as _ from 'lodash';

const fruitA = { name: 'apple', count: [1, 2] };
const fruitB = { name: 'apple', color: 'green'};

const fruit = _.merge({}, fruitA, fruitB)
console.log(fruit);
// { name: 'apple', count: [ 1, 2 ], color: 'green' }

fruitA.count.push(3);
console.log(fruit);
// { name: 'apple', count: [ 1, 2 ], color: 'green' }

머지 함수를 통해 객체를 병합하면, 기존의 객체는 변경되지 않는다.

참고 사이트

[Javascript] 객체 합치는 4가지 방법 (merge)