[jquery] Object.assign() 와 $.extend 차이

Object.assign()과 $.extend는 둘 다 객체를 병합하는 기능을 제공합니다.

하지만 동작 방식, 사용법, 그리고 몇 가지 세부 사항에서 차이가 있습니다. 아래는 그 차이를 정리한 내용입니다.

 

1. Object.assign()

특징

• ES6 표준으로 도입된 자바스크립트의 내장 함수.
• 원본 객체를 수정하지 않고 새 객체를 반환하거나, 대상 객체를 직접 수정할 수 있음.
• 얕은 복사(shallow copy)만 지원.
• 배열 및 기타 객체 타입도 복사 가능하지만, 중첩된 객체는 복사하지 않음.

const target = { a: 1 };
const source = { b: 2, c: 3 };

const result = Object.assign(target, source); // target 객체에 source 속성 추가
console.log(result); // { a: 1, b: 2, c: 3 }
console.log(target); // { a: 1, b: 2, c: 3 } (target이 수정됨)

 

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

const merged = Object.assign({}, obj1, obj2, obj3); // 새로운 객체 생성
console.log(merged); // { a: 1, b: 2, c: 3 }

 

const target = { a: { nested: 1 } };
const source = { b: { nested: 2 } };

Object.assign(target, source);
console.log(target); // { a: { nested: 1 }, b: { nested: 2 } }
source.b.nested = 3; // 원본 객체 변경
console.log(target.b.nested); // 3 (깊은 복사가 아님)

 

 

 

2. $.extend (jQuery)

특징

• jQuery에서 제공하는 객체 병합 함수.
• 기본적으로 얕은 복사를 수행하지만, 깊은 복사(deep copy) 옵션을 제공 (true를 첫 번째 매개변수로 전달).
• 원본 객체를 수정하고 결과를 반환.
•  

const target = { a: 1 };
const source = { b: 2, c: 3 };

const result = $.extend(target, source); // target에 source 병합
console.log(result); // { a: 1, b: 2, c: 3 }
console.log(target); // { a: 1, b: 2, c: 3 } (target이 수정됨)

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

const merged = $.extend({}, obj1, obj2, obj3); // 새로운 객체 생성
console.log(merged); // { a: 1, b: 2, c: 3 }

const target = { a: { nested: 1 } };
const source = { b: { nested: 2 } };

$.extend(true, target, source); // 깊은 복사 수행
source.b.nested = 3;
console.log(target.b.nested); // 2 (깊은 복사로 인해 원본 객체 변경 없음)

 

 

3. 주요 차이점

특징Object.assign()$.extend

지원 여부	ES6+ (최신 브라우저 및 Node.js)	jQuery가 필요
복사 방식	얕은 복사	얕은 복사 및 깊은 복사 지원
병합 대상	대상 객체가 수정됨	대상 객체가 수정됨
깊은 복사 지원	❌ (직접 구현 필요)	✅ (true를 첫 번째 인자로 전달)
사용 편의성	표준 함수로 별도 라이브러리 불필요	jQuery가 필요한 환경에서 유용

---

4. 선택 기준

1. 최신 환경에서 깊은 복사 불필요:
   • Object.assign()이 권장됩니다.
2. 깊은 복사가 필요한 경우:
   • $.extend(true, ...)을 사용하거나, lodash의 _.merge와 같은 라이브러리를 고려하세요.
3. jQuery 의존 환경:
   • 이미 jQuery를 사용하는 프로젝트라면 $.extend를 사용하는 것이 편리합니다.