[javascript] jQuery.extend(), 두개 이상의 객체를 합치기(Merge)

[javascript] jQuery.extend(), 두개 이상의 객체를 합치기(Merge)

 

jQuery.extend()

원문 링크 

http://api.jquery.com/jQuery.extend/

jQuery.extend() | jQuery API Documentation

 

jQuery.extend( target [, object1] [, objectN] )Returns : Object

개요 : 두개 이상의 객체를 합칩(Merge)니다.

• jQuery.extend( target [, object1] [, objectN] )
• target 합쳐지는 추가 객체의 속성을 받을 객체 또는 유일한 인자일 경우 jQuery 네임스페이스로 확장될 객체
• object1 합쳐질 때 기준이 될 객체
• objectN 기준 객체에 합쳐질 추가 객체
• jQuery.extend( [deep], target, object1 [, objectN] )
• deep true 라면, 깊은 수준 복사가 됩니다.
• target 합쳐지는 추가 객체의 속성을 받을 객체 또는 유일한 인자일 경우 jQuery 네임스페이스로 확장될 객체
• object1 합쳐질 때 기준이 될 객체
• objectN 기준 객체에 합쳐질 추가 객체

두개 이상의 객체를 합치기 위해 $.extend() 함수를 사용합니다.

만약 $.extend() 함수에 사용된 인자가 하나라면, target 인자가 생략되었다는 의미입니다. 이런 경우, jQuery 객체는 target를 자체적으로 판단하게 됩니다. 이렇게 되면, jQuery 네임스페이스에 새로운 함수를 추가할 수 있게 됩니다. 이것은 새로운 함수를 jQuery에 추가해야 할 경우가 많은 plugin 제작 시 유용하게 사용할 수 있습니다.

var object = $.extend({}, object1, object2);

위의 예제는 배열이 반환되겠죠?

$.extend() 함수의 합침(merge) 기능은 유연하겍 동작하지 않습니다. 만약 첫번째 객체에 있는 키와 합쳐질 두번째 객체에 있는 키가 동일할 경우, 첫번째 객체의 값이 덮어써져 버립니다. values 는 합쳐지지 않습니다. 이것은 아래 예제들의 banana에 대한 내용을 확인하면 알 수 있습니다. 하지만, 첫번째 인자에 true라고 설정하면 유연하게 동작하게 됩니다. (false 는 사용할 수 없습니다.

예 제  
두개의 객체를 합칩니다. 첫번째 객체값이 수정됩니다.

 

미리보기

 

결과를 확인해 보세요. 첫번째 객체의 banana의 값이 바뀐것을 알 수 있습니다.

 

예 제  
두개의 객체를 합칩니다. 첫번째 객체가 바뀝니다.

 

미리보기

 

위의 예제와 결과를 비교해 보세요. 깊은 복사가 실핼된 것을 알 수 있습니다. 완전 동일한 부분만 덮어 써졌네요.

 

예 제  
세가지 객체의 차이점을 보여줍니다. 마지막 객체는 나머지 두 객체를 합친 것입니다. plugin 개발 시 사용하는 기본적인 패턴입니다.

 

미리보기

 

호~ 그렇단 말이죠~. 플러그인 제작해 볼건데;;;; 꼭 쓰게 되겠군요. 에혀~

 

기존 객체에 새로 만든 객체를 포함시키고 싶을 때 쓰는 함수인 듯 합니다. 배열을 합치는게 아니니 주의하세요.

그럼 즐프하세요.

※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.

출처: http://findfun.tistory.com/404?category=383258 [즐거움을 찾자 Find Fun!!]
출처: https://emong.tistory.com/225 [에몽이]