Object.assign vs jQuery $.extend 객체 합치기

종종 프론트엔드를 개발하다보면 JavaScript를 사용하다가 객체(Object) 를 합쳐야 할 필요가 있을 때가 있습니다.
이 경우에는 여러 방법들이 있겠지만 본 포스팅에서는 Object.assign과 jQuery의 $.extend를 사용해서 하는 방법을 알아보겠습니다.

Object.assign

var obj1 = {id: 'marsland', name: '통통만두'};
var obj2 = {id: 'marsland', name: '삽질하는 프로그래머 통통만두'};

var obj3 = Object.assign(obj1, obj2);

// result
obj1 = {id: 'marsland', name: '삽질하는 프로그래머 통통만두'}
obj2 = {id: 'marsland', name: '삽질하는 프로그래머 통통만두'}
obj3 = {id: 'marsland', name: '삽질하는 프로그래머 통통만두'}

위의 방식으로 하면 obj1과 obj3의 값이 같아져버립니다. 즉, 얕은 복사(shallow) 가 되어버립니다.
깊은 복사(deep copy) 를 하기 위해서는 아래와 같이 하면 됩니다.

var obj1 = {id: 'marsland', name: '통통만두'};
var obj2 = {id: 'marsland', name: '삽질하는 프로그래머 통통만두'};

var obj3 = Object.assign({}, obj1, obj2);

// result
obj1 = {id: 'marsland', name: '통통만두'};
obj2 = {id: 'marsland', name: '삽질하는 프로그래머 통통만두'}
obj3 = {id: 'marsland', name: '삽질하는 프로그래머 통통만두'}

Object.assign에서 제일 처음의 인자에 합쳐지기 때문에 빈 Object를 선언하면 기존의 Object의 값들은 변경되지 않습니다.
주의점은 Object.assign은 익스플로러(Explorer) 와 안드로이드 웹뷰(Android Webview) 에서는 동작하지 않기에 jQuery을 사용하신다면 아래의 $.extend를 권장합니다.

$.extend

개념은 Object.assign과 비슷합니다.

var obj1 = {id: 'marsland', name: '통통만두'};
var obj2 = {id: 'marsland', name: '삽질하는 프로그래머 통통만두'};

var obj3 = $.extend(obj1, obj2);

// result
obj1 = {id: 'marsland', name: '삽질하는 프로그래머 통통만두'}
obj2 = {id: 'marsland', name: '삽질하는 프로그래머 통통만두'}
obj3 = {id: 'marsland', name: '삽질하는 프로그래머 통통만두'}

Object.assign과 마찬가지로 제일 처음 인자에 Object가 합쳐지기 때문에 깊은 복사(deep copy) 를 하려면 아래와 같이 해줍니다.

var obj1 = {id: 'marsland', name: '통통만두'};
var obj2 = {id: 'marsland', name: '삽질하는 프로그래머 통통만두'};

var obj3 = $.extend({}, obj1, obj2);

// result
obj1 = {id: 'marsland', name: '통통만두'};
obj2 = {id: 'marsland', name: '삽질하는 프로그래머 통통만두'}
obj3 = {id: 'marsland', name: '삽질하는 프로그래머 통통만두'}