- 전체
- HTML
- Web Design (웹디자인)
- XE 응용 개발
- wordpress plugin dev
- Javascript & JavaScript Application
- MEAN Stack : full stack javascript
- angular js & ionic framework
- bootstrap
- WebGL, Three.js and Babylon.js
- restful api design
- mobile web
- node.js 응용
- Cloud Service 응용
- 웹 어셈블리 개발 [WASM, WebAssembly]
- 마이크로서비스, MSA (microservice architecture)
- WebGL / WebGPU
- next.js 개발
- micro frontend (마이크로프론트앤드)
- 전자상거래/쇼핑몰
- 서버 클라우드 (aws, azure, google)
JavaScript jQuery.extend(), 두개 이상의 객체를 합치기(Merge)
2018.06.08 08:50
jQuery.extend(), 두개 이상의 객체를 합치기(Merge)
원문 링크 
http://api.jquery.com/jQuery.extend/
개요 : 두개 이상의 객체를 합칩(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 는 사용할 수 없습니다.
예 제
두개의 객체를 합칩니다. 첫번째 객체값이 수정됩니다.
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="log"></div>
<script>
var object1 = {
apple: 0,
banana: {weight: 52, price: 100},
cherry: 97
};
var object2 = {
banana: {price: 200},
durian: 100
};
/* merge object2 into object1 */
$.extend(object1, object2);
var printObj = typeof JSON != "undefined" ? JSON.stringify : function(obj) {
var arr = [];
$.each(obj, function(key, val) {
var next = key + ": ";
next += $.isPlainObject(val) ? printObj(val) : val;
arr.push( next );
});
return "{ " + arr.join(", ") + " }";
};
$("#log").append( printObj(object1) );
</script>
</body>
</html>
미리보기
결과를 확인해 보세요. 첫번째 객체의 banana의 값이 바뀐것을 알 수 있습니다.
예 제
두개의 객체를 합칩니다. 첫번째 객체가 바뀝니다.
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="log"></div>
<script>
var object1 = {
apple: 0,
banana: {weight: 52, price: 100},
cherry: 97
};
var object2 = {
banana: {price: 200},
durian: 100
};
/* merge object2 into object1, recursively */
$.extend(true, object1, object2);
var printObj = typeof JSON != "undefined" ? JSON.stringify : function(obj) {
var arr = [];
$.each(obj, function(key, val) {
var next = key + ": ";
next += $.isPlainObject(val) ? printObj(val) : val;
arr.push( next );
});
return "{ " + arr.join(", ") + " }";
};
$("#log").append( printObj(object1) );
</script>
</body>
</html>
미리보기
위의 예제와 결과를 비교해 보세요. 깊은 복사가 실핼된 것을 알 수 있습니다. 완전 동일한 부분만 덮어 써졌네요.
예 제
세가지 객체의 차이점을 보여줍니다. 마지막 객체는 나머지 두 객체를 합친 것입니다. plugin 개발 시 사용하는 기본적인 패턴입니다.
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="log"></div>
<script>
var defaults = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
/* merge defaults and options, without modifying defaults */
var settings = $.extend({}, defaults, options);
var printObj = typeof JSON != "undefined" ? JSON.stringify : function(obj) {
var arr = [];
$.each(obj, function(key, val) {
var next = key + ": ";
next += $.isPlainObject(val) ? printObj(val) : val;
arr.push( next );
});
return "{ " + arr.join(", ") + " }";
};
$("#log").append( "<div><b>defaults -- </b>" + printObj(defaults) + "</div>" );
$("#log").append( "<div><b>options -- </b>" + printObj(options) + "</div>" );
$("#log").append( "<div><b>settings -- </b>" + printObj(settings) + "</div>" );
</script>
</body>
</html>
미리보기
호~ 그렇단 말이죠~. 플러그인 제작해 볼건데;;;; 꼭 쓰게 되겠군요. 에혀~
기존 객체에 새로 만든 객체를 포함시키고 싶을 때 쓰는 함수인 듯 합니다. 배열을 합치는게 아니니 주의하세요.
그럼 즐프하세요.
※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.
출처: http://findfun.tistory.com/404 [즐거움을 찾자 Find Fun!!]
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.
