[JQuery] $.extend

JQuery.extend() 함수는 복수의 오브젝트를 합쳐서(merge) 되돌려 주는 함수입니다.

(플러그인 소스에서 디폴트 설정치를 덮어 쓸때 자주 볼 수 있습니다)

jQuery.extend(target[, object1][, objectN])

이런식으로 사용합니다.

오브젝트 a와 b를 합치고 싶은 경우

var a = {     id: 1,     name: 'TAM' };   var b = {     name: 'TAM-new',     hobby: 'football'   };   $.extend(a, b);   console.log(a); // 결과: //  { //      id: 1, //      name: "TAM-new", //      hobby: "football" //  }

$.extend(a, b) 를 실행하면 a에 b를 합쳐 줍니다.

같은 프로퍼티가 존재 한다면 b의 값으로 덮어쓰기를 하며 b에 있는 프로퍼티가 새로운 값이라면 추가를 합니다.

 

그리고 extend() 함수는 파라메타로 넣을 오브젝트의 갯수 제한이 없습니다.

var a = {     id: 1,     name: 'TAM' };   var b = {     name: 'TAM-new',     hobby: 'football'   };   var c = {     name: 'TAM-new-new',     job: 'designer' };   $.extend(a, b, c);   console.log(a); // 결과: //  { //      id: 1, //      name: "TAM-new-new", //      hobby: "football", //      job: "designer" //  }

이런식으로 무제한으로 파라메터를 설정 할 수 있으며

$.extend(a, b, c)를 실행할 경우 a의 값에 b를 합치며 그 값에 c를 합칩니다.

 

합쳐진 결과 값이 직접적으로 a 오브젝트(첫번째 파라메터)에 반영이 되므로

첫번째 파라메터가 변하는걸 원치 않는 경우에는

var a = {     id: 1,     name: 'TAM' };   var b = {     name: 'TAM-new',     hobby: 'football'   };   var newobject = $.extend({}, a, b);

이런식으로 첫번째 파라메터를 {}으로 지정 한 뒤 리턴값을 새로운 오브젝트에 넣어주면 됩니다.

마지막으로 프로퍼티가 오브젝트일 경우를 알아보겠습니다.

var a = {     style: {         top: 100,         left: 200,         width: 300     },     duration: 1000 };   var b = {     style: {         height: 400     } };   $.extend(a, b);   console.log(a); // 결과: //  { //      style: { //          height: 400 //      }, //      duration: 1000 //  }

프로퍼티가 오브젝트일 경우 a.style.top, a.style.left, a.style.width는 모두 지워 지고 b.style.height만 덮어 씌워지게 됩니다.

밑의 계층까지 합치고 싶은 경우에는 extend()의 첫번째 파라메터에 true를 넣으면 됩니다.

var a = {     style: {         top: 100,         left: 200,         width: 300     },     duration: 1000 };   var b = {     style: {         height: 400     } };   $.extend(true, a, b);   console.log(a); // 결과: //  { //      style: { //          top: 100, //          left: 200, //          width: 300 //          height: 400 //      }, //      duration: 1000 //  }

이걸로 style의 프로퍼티들도 합칠 수 있습니다.

출처: https://damedame.tistory.com/entry/jQueryextend-함수-사용-방법 [다메다메의 IT와 19금게임]