JavaScript - 객체 복사 합치기 ➡️ Object.assign, Spread 연산자 공통점과 차이점

자바스크립트에서 객체를 합치는 방법 두가지에 대해서 말씀드리려고 합니다.

Object.assign 함수를 이용하는 방법과 자바스크립트 Spread 연산자인 전개 연산자를 사용하는 방법이 있습니다.

 

두가지 방법 사용법과 공통점과 차이점에 대해서 알아보도록 하겠습니다.

 

사용법

1. Object.assign 이용하기

const target = { name: 'superman' };
const source = { age: 20 };
const result = Object.assign(target, source); // {name: 'superman', age: 20}

2. Spread 연산자 이용 하기

const target = { name: 'batman' };
const source = { age: 21 };
const result = {...target, ...source}; // {name: 'superman', age: 20}

 

공통점

객체를 합치는 방법은 기본적으로 깊은 복사이지만, 2차원 이상의 내부 객체는 얕은 복사가 됩니다.

깊은 복사는 새로운 메모리 공간을 확보하여 값을 가지고 있지만,

얕은 복사는 메모리 주소의 값만 복사하여 값을 공유합니다.

 

성능은 대체로 비슷합니다. 

 

차이점

Object.assign의 경우에 source의 객체를 target에 복사하여 대상을 반환 합니다.

target 객체에 변형이 이루어집니다.

const target = { name: 'superman' };
const source = { age: 20 };
const result = Object.assign(target, source); // {name: 'superman', age: 20}

console.log(result === target); // true

 

이런 현상을 예방하기 위해서 빈객체를 넣어주는 방법이 있습니다.

const result = Object.assign({}, target, source);