[js] $.extend(a, b)와 $.extend({}, a, b)의 차이

✅ 기본적인 차이

1. $.extend(a, b):
   • 첫 번째 인자(a)에 두 번째 인자(b)의 내용을 덮어씁니다.
   • 첫 번째 인자가 원본 객체이므로, 원본 객체가 변경됩니다.
2. $.extend({}, a, b):
   • 첫 번째 인자에 빈 객체 {}를 전달하고, **a와 b**를 병합합니다.
   • 원본 객체(a)는 변경되지 않고, 새 객체가 생성되어 병합된 결과를 반환합니다.

✅ 상세 비교

1. $.extend(a, b)

• 동작: 첫 번째 인자에 두 번째 인자의 속성을 덮어씁니다.
• 결과: 원본 객체(a)가 변경됩니다.

js

let a = { others: "기타사항" };
let b = { others: null, memo: "메모" };

$.extend(a, b); // a에 b의 값을 덮어씀

console.log(a.others); // null (b.others로 덮어씀)
console.log(a.memo);   // "메모" (b.memo가 추가됨)

• 결과: a 객체는 others 속성이 null로 변경되었고, memo 속성도 추가되었습니다.
• 주의점: a 객체가 변경되므로 원본 객체를 수정하게 됩니다.

2. $.extend({}, a, b)

• 동작: 첫 번째 인자에 새로운 빈 객체 {}를 전달하고, 두 번째 인자들(a, b)을 병합합니다.
• 결과: 새로운 객체가 생성되며, 원본 객체(a)는 변경되지 않습니다.

js

 

let a = { others: "기타사항" };
let b = { others: null, memo: "메모" };

let result = $.extend({}, a, b); // a는 변경되지 않고 새 객체 생성

console.log(result.others); // null (b.others로 덮어씀)
console.log(result.memo);   // "메모" (b.memo가 추가됨)

console.log(a.others);  // "기타사항" (원본 a는 변경되지 않음)
console.log(a.memo);    // undefined (원본 a에는 memo가 없음)

• 결과: a 객체는 변경되지 않고, **새로운 객체 result**가 others는 null로 덮어쓰고, memo는 추가됩니다.

---

✅ 핵심 차이점

 

방식	원본	객체 변경 여부	새로운 객체 생성 여부결과
$.extend(a, b)	원본 객체 a 변경	새 객체 X	a 객체의 속성이 덮어써짐
$.extend({}, a, b)	원본 객체 a 변경 X	새 객체 생성	원본 a는 변경되지 않고, 새 객체에 병합된 결과 반환

 

---

✅ 주의할 점

1. 원본 객체 변경 여부

• **$.extend(a, b)**에서는 첫 번째 인자(a)가 변경됩니다.
• **$.extend({}, a, b)**에서는 원본 a가 변경되지 않고, 새 객체가 반환되므로 **불변성(immutability)**을 유지할 수 있습니다.

2. 객체 덮어쓰기 문제

• $.extend(a, b) 방식은 원본 객체를 직접 변경하므로, 다른 코드에서 원본 객체를 참조하고 있다면 원하지 않는 부작용을 발생시킬 수 있습니다.
• $.extend({}, a, b) 방식은 새 객체를 반환하므로, 원본 객체를 보호할 수 있습니다.